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

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

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