如何合并一个动画与另一个？

Question

我最近发布了一个关于移动多个图像的问题，并从甜菜根得到了一些建议（谢谢甜菜根!!）

我想在游戏板上动画图片。

我已经设法使用.animate（）功能，它有一个回调函数来再次运行anamation。

我遇到的问题是，当每个动画运行图像“加速”到“巡航”速度时，在“减速”停止前继续距离，然后再次启动该过程。

这样做的效果是，图像在某种波动中移动。

是否有可能使动画模糊，以便图像不会在动画之间“减速”？

我已经在下面包含了动画函数的代码。

我试图评论它，因为我可以和页面的例子可以看到here。要使其工作，请点击“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)}); 

} 

在此先感谢您的帮助！

约翰

Answer 1

设置动画宽松政策以“线性”您指定的时间以防止动画的加速或减速之后。这样，巡航速度将始终如一，所以动画不会加速或减速;它会以相同的速度启动和停止，并在更改动画时保持该速度。

$(Image).animate({left: left,top: top}, 1500, 'linear' function(){WalkTo(ImgID,Next_Coord)});