1

最近、複数の画像の移動に関する質問を投稿し、Beetroot からアドバイスをもらいました (Beetroot に感謝!!)

ゲームボード全体で写真をアニメーション化しようとしています。

アニメーションを再度実行するためのコールバック関数を持つ .animate() 機能を使用して、これを行うことができました。

私が抱えている問題は、各アニメーションが実行されると、画像が「巡航」速度まで「加速」し、停止するまで「減速」する前に距離を続け、このプロセスを再度開始することです。

これが持つ効果は、画像が一種のサージで移動することです。

アニメーション間で画像が「減速」しないように、アニメーションをぼかすことはできますか?

以下のアニメーション機能のコードを含めました。

私はできる限りコメントしようとしました。ページの例はここで見ることができます。それを機能させるには、「ind」スポットをクリックし、ポップアップから「sawmill」アップグレードを選択します。

    function WalkTo(ImgID,Crnt_Coord)
{
    //ImgID is a cobination of the coordinate the picture started on plus the word "worker".
    //Crnt_Coord is the current coordinate the image is on
    var index = parseInt(ImgID.replace("worker", ""));
    var Image = Animate_Image[index];// this array holds the Ids for the images for the $(Image) jquery code later.

    var Current_Coord = Crnt_Coord;
    if(Crnt_Coord==Animate_End_Coord[index])
        {Animate_Delivered[index]=1;} //checks to see if image has arrived at destination and sets the delivered to 1
    if(Crnt_Coord==index)
        {Animate_Delivered[index]=0;}// checks to see if image is back at starting location, sets delivered back to 0 so object can start journey again.

    var End_Coord;//destination
    if(Animate_Delivered[index]==0){End_Coord = Animate_End_Coord[index];}//if image has not arrived it gets the destination from an array
    else{End_Coord = index;}//delivered now set to 1 and destination is set as startposition.

    //I now run a simple path finding function to determine next move, it returns as a string the next coodinate and the bearing (north,east,south,west)
    var bearing_next_coord = Direction(Current_Coord,End_Coord);
    var bearing = bearing_next_coord[0];
    var Next_Coord = parseInt(bearing_next_coord.substring(1));


    var pos = $(Image).position();//Gets the current pixel position of the image
    var left = pos.left;
    var top = pos.top;

    var imgSrc = "images/animations/"+Animate_Job[index]+"_dude_"+bearing+".gif";//changes the image so worker appears to turn
        //The switch below then sets the distance and direction for the image to travel in the .animate
        switch(bearing)
        {
        case "n":
        top-=60;
        break;
        case "e":
        left+=60;
        break;
        case "s":
        top+=60;
        break;
        case "w":
        left-=60;
        break;
        }
    if(zone_array[Next_Coord]==""){$(Image).attr("src", "images/icons/boat.gif");}//changes image to boat if the image needs to cross water
    else{$(Image).attr("src", imgSrc);}//for land use the imgSrc
    //finally the animate using the varibles set above, then set the function to run again with new "currentCoordinate"
    $(Image).animate({left: left,top: top}, 1500, function(){WalkTo(ImgID,Next_Coord)});

}

助けてくれてありがとう!!

ジョン

4

1 に答える 1

1

継続時間を指定した後、アニメーションのイージングを 'linear' に設定して、アニメーションが加速または減速しないようにします。この方法では、巡航速度は常に同じになるため、アニメーションの速度が速くなったり遅くなったりすることはありません。同じ速度で開始および停止し、アニメーションを変更してもその速度を維持します。

$(Image).animate({left: left,top: top}, 1500, 'linear' function(){WalkTo(ImgID,Next_Coord)});
于 2012-04-26T16:12:18.800 に答える