web-dev-qa-db-ja.com

キャンバス上の描画線をアニメーション化する方法

キャンバス上で相互に接続するいくつかの線を作成しました。次に、キャンバスに描画しながらこれらの線をアニメーション化します。

誰か助けてもらえますか？

これが私のコードとフィドルのURLです：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0,0,0);
ctx.lineTo(300,100);
ctx.stroke();

ctx.moveTo(0,0,0,0);
ctx.lineTo(10,100);
ctx.stroke();

ctx.moveTo(10,100,0,0);
ctx.lineTo(80,200);
ctx.stroke();

ctx.moveTo(80,200,0,0);
ctx.lineTo(300,100);
ctx.stroke();

http://jsfiddle.net/s4gWK/1/

javascripthtml5animationcanvas
8
Mufeed Ahmad

アニメーションを使用して、パス内のポイントに沿って線を段階的に延長する必要があることを理解しています。

デモ： http://jsfiddle.net/m1erickson/7faRQ/

この関数を使用して、パスに沿ったウェイポイントを計算できます：

// define the path to plot
var vertices=[];
vertices.Push({x:0,y:0});
vertices.Push({x:300,y:100});
vertices.Push({x:80,y:200});
vertices.Push({x:10,y:100});
vertices.Push({x:0,y:0});

// calc waypoints traveling along vertices
function calcWaypoints(vertices){
    var waypoints=[];
    for(var i=1;i<vertices.length;i++){
        var pt0=vertices[i-1];
        var pt1=vertices[i];
        var dx=pt1.x-pt0.x;
        var dy=pt1.y-pt0.y;
        for(var j=0;j<100;j++){
            var x=pt0.x+dx*j/100;
            var y=pt0.y+dy*j/100;
            waypoints.Push({x:x,y:y});
        }
    }
    return(waypoints);
}

次に、requestAnimationFrameを使用して、各増分線分をアニメーション化できます：

// calculate incremental points along the path
var points=calcWaypoints(vertices);


// variable to hold how many frames have elapsed in the animation
// t represents each waypoint along the path and is incremented in the animation loop
var t=1;


// start the animation
animate();

// incrementally draw additional line segments along the path
function animate(){
    if(t<points.length-1){ requestAnimationFrame(animate); }
    // draw a line segment from the last waypoint
    // to the current waypoint
    ctx.beginPath();
    ctx.moveTo(points[t-1].x,points[t-1].y);
    ctx.lineTo(points[t].x,points[t].y);
    ctx.stroke();
    // increment "t" to get the next waypoint
    t++;
}
21
markE

編集：私はあなたの元の投稿を誤解しました。状況によっては、アニメーションが完了して最初からやり直す場合にのみ、前のアニメーションをクリアする必要はありません。

jsfiddle： http://jsfiddle.net/Grimbode/TCmrg/

アニメーションがどのように機能するかを理解するのに役立った2つのWebサイトがあります。

http://www.williammalone.com/articles/create-html5-canvas-javascript-Sprite-animation/

この記事では、ウィリアムがスプライトアニメーションについて話しますが、これはもちろんあなたが興味を持っているものではありません。興味深いのは、ポールアイリッシュによって作成された再帰ループ関数を使用していることです。

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

この関数は、1秒間に60回（つまり、基本的に60 fpsで）回転しようとします。

(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame =
          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

大きな問題は、これがどのように機能するかということです。あなたはほとんどこれをする必要があります：

function gameLoop () {

  window.requestAnimationFrame(gameLoop);

  renderLine();

}
var counter = 0; 
var old_position = {x: 0, y: 0};
var new_position = {x: 0, y: 0}; 
var width = 10;
var height = 10;
function renderLine(){

 /* Here you clear the old line before you draw the new one */
 context.clearRect(old_position.x, old_position.y, width, height) 

 /* you update your new position */
 new_position = {x: 100, y: 200};  
/* Here you call your normal moveTo and lineTo and stroke functions */

 /* update old position with the nwe position */
 old_position = new_position;

}

このステップの後、あなたの質問はおそらく好きになるでしょう。 「わかりました。ある種のアニメーションが進行中ですが、ラインアニメーションを60fpsで回転させたくありません」。ウィリアムズの投稿を読むと、彼は「ティック」を使用しています。

私がリンクしたウェブサイトは、私が説明できるよりもはるかに優れた説明をしています。それらをよく読んでおくことをお勧めします。 [=私はそれらを読んで楽しんだ。

AND：これがあなたのjfiddleです:)

http://jsfiddle.net/Grimbode/TCmrg/

3
kemicofa

アイデアは、描画し、ループ内にいくつかの異なる線を描画して描画し、それが「アニメーション化」しているように見せることです。しかし、それはとにかくアニメーションの概念です。

したがって、実行するアニメーションを決定し、各フレームをループで描画する方法を見つけます。

それはとにかくコンセプトです。ただし、これにはライブラリを使用することをお勧めします。

Fabric.js（ http://fabricjs.com/ ）とKineticJS（ http://kineticjs.com/ ）は、私が指摘したいライブラリ/フレームワークです。 。

1
Mark Gabriel