Question

I recently posted a question regarding moving multiple images and got some advice from Beetroot (Thanks Beetroot!!)

I am trying to animate pictures accross a gameboard.

I have managed to do this using .animate() feature which has a callback function to run the anamation again.

The problem I have is that as each animation runs the image “accelerates” up to “cruising” speed, continues a distance before “decelerating” to a stop, it then starts this process again.

the effect this has is that thwe image moves in sort of surges.

Is it possible to make the animations blur so that the image doesn’t “decelerate” between animations?

I have included the code for the animate function below.

I have tried to comment it as best I can and the example of the page can be seen here. To get it to work click on an “ind” spot and select the “sawmill” upgrade from pop-up.

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

}

Thanks in advance for any help!!

John

Answer 1

Set the animation easing to ‘linear’ after you specify the duration to prevent the animation from speeding up or slowing down. This way, cruise speed will always be the same, so the animation never speeds up or slows down; it will just start and stop at same speed and will maintain that speed when changing animations.

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