0

私の目標は、画面内のさまざまな場所をポイントし、それらのポイント (x、y) を保存し、保存されているすべての X 値と Y 値で画像をアニメーション化することです。

配列を使用してすべてを保存します。コードの一部を次に示します。

function storeCoordinates(e){
    pos.push({x:e.offsetX, y: e.offsetY });

    if(pos.length > 1){
        delta.push({
            dx: pos[pos.length - 1].x - pos[pos.length - 2].x,
            dy: pos[pos.length - 1].y - pos[pos.length - 2].y
        });
        //Distance between the two points
        distance[distance.length - 2] = Math.sqrt(delta[delta.length - 2].dx * delta[delta.length - 2].dx + delta[delta.length - 2].dy * delta[delta.length - 2].dy);

        moves[moves.length - 2] = distance[distance.length - 2] / speed;

        xunits[xunits.length - 2] =  (pos[pos.length - 1].x - pos[pos.length - 2].x) / moves[moves.length - 2];
        yunits[yunits.length - 2] = (pos[pos.length - 1].y - pos[pos.length - 2].y) / moves[moves.length - 2];
    }
}                                                      
c.addEventListener('click', function(e){storeCoordinates(e);}, false);

しかし、アニメーションは開始されません。どんな助けでも大歓迎です！

フルフィドルはこちら

4

1 に答える 1

1

既存のコードには複数の問題があります。

コードのリファクタリングされたデモは次のとおりです: http://jsfiddle.net/m1erickson/9EZha/

コードのリファクタリングについて:

次のように、キャンバスに対するマウスの位置を取得できます。

var mouseX=e.clientX-offsetX;
var mouseY=e.clientY-offsetY;

複数のクリック ポイントに沿ってアニメーション化するには、各線を線に沿ったポイントに分割する必要があります。

次のように、「pos」配列からポリポイント ラインを作成できます。

function makePolyPoints(pathArray){

    var points=[];
    for(var i=1;i<pathArray.length;i++){
        var startPt=pathArray[i-1];
        var endPt=pathArray[i];
        var dx = endPt.x-startPt.x;
        var dy = endPt.y-startPt.y;
        for(var n=0;n<=100;n++){
            var x= startPt.x + dx * n/100;
            var y= startPt.y + dy * n/100;
            points.push({x:x,y:y});
        }
    }
    return(points);
}

アニメーション関数は次のようにする必要があります。

  • 別のループが必要かどうか (または画像のアニメーションが完了したかどうか) を判断します。
  • 行うアニメーションがさらにある場合は、別のアニメーション フレームを要求します。
  • ポリラインの現在の位置に画像を描画します。
  • ポリラインに沿って次の位置にインクリメントします。

典型的なアニメーション ループは次のようになります。

function animate(){

    // are we done animating?

    if(polyPos>polyline.length-1){return;}

    // request another animation frame

    requestAnimFrame(animate);

    // determine the current point on the polyline

    var pt=polyline[polyPos];

    // draw the image at the current point

    ctx.clearRect(0, 0, c.width, c.height);
    ctx.drawImage(car, pt.x, pt.y);

    // increment the next position on the polyline 
    // for the next animation frame

    polyPos++;
}
于 2013-11-05T23:59:57.177 に答える