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

我最近发布了一个关于移动多个图像的问题，并从Beetroot那里得到了一些建议谢谢Beetroot

我正在尝试通过游戏板制作图片动画

我已经设法使用了.animate功能来实现这一点，它有一个回调函数来再次运行模拟

我遇到的问题是，当每个动画运行时，图像会加速到巡航速度，在减速到停止之前继续一段距离，然后再次开始此过程

这样做的效果是图像在某种程度上发生了波动

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

我在下面包含了动画功能的代码

我已经尽我所能对其进行了评论，可以看到该页面的示例。要使其工作，请单击ind点并从弹出窗口中选择锯木厂升级

    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)});

}

提前感谢您的帮助

---

John

在指定持续时间后，将动画缓和设置为“线性”，以防止动画加速或减速。这样，巡航速度将始终保持不变，因此动画从不加速或减速；它将以相同的速度启动和停止，并在更改动画时保持该速度

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

---

指定持续时间后，将动画缓和设置为“线性”，以防止动画加速或减慢。这样，巡航速度将始终保持不变，因此动画从不加速或减速；它将以相同的速度启动和停止，并在更改动画时保持该速度

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

---

没问题！如果这有帮助，请在8分钟内投票并接受它作为正确答案，或者不管你还有多长时间等待我点击了“是”，这篇文章有用吗？这就是你所说的投票吗？-更新：啊，我明白，滴答！！好的，等待6分钟，但可以！！再次感谢！“我的答案”旁边有两个箭头-单击顶部的箭头将向上投票此答案，并将其标记为有用。单击下面的复选框，将此答案标记为已解决您的问题。我已勾选它，但没有投票权，抱歉！谢谢你！很高兴我能帮忙，没问题！如果这有帮助，请在8分钟内投票并接受它作为正确答案，或者不管你还有多长时间等待我点击了“是”，这篇文章有用吗？这就是你所说的投票吗？-更新：啊，我明白，滴答！！好的，等待6分钟，但可以！！再次感谢！“我的答案”旁边有两个箭头-单击顶部的箭头将向上投票此答案，并将其标记为有用。单击下面的复选框，将此答案标记为已解决您的问题。我已勾选它，但没有投票权，抱歉！谢谢你！很高兴我能帮忙。