Question

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

我试图在游戏板上制作动画图片。

我已设法使用.animate（）功能执行此操作，该功能具有回调函数以再次运行anamation。

我遇到的问题是，每个动画都运行图像＆＃34;加速＆＃34;直到＆＃34;巡航＆＃34;速度，继续前一段距离＆＃34;减速＆＃34;停下来，然后再次开始这个过程。

这样做的结果是，这个图像会以一种激增的方式移动。

是否可以使动画模糊，以免图像减速＆＃34;动画之间？

我在下面列出了animate功能的代码。

我尽力对其进行评论，并且可以看到该页面的示例here。为了让它发挥作用，请点击＆＃34; ind＆＃34;现场并选择＆＃34;锯木厂＆＃34;从弹出窗口升级。

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

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

1 个答案: