kineticjs :: continue animate shape from X to Y distance

Question

I am trying to animate shape continue from from X to Y distance, again return shape from Y to X using kinetic js animate function. eg. move shape from 0px to 200px and again return shape 200px to 0px.

thanks.

Answer 1

You are probably looking for a Tween here rather then an Animation. Check out the kinetic documentation for more information on Tweens, however what you are looking to do will probably look something like this:

var tween = new Kinetic.Tween({
    node: myShape,
    x: moveToX,
    y: moveToY,
    duration: 1
});

Now that you have a tween, you can play it, rewind it, pause it, reverse it (again, check out the documentation for all up to date information on Tweens).

So you can now do:

tween.play()

or

tween.reverse()

to accomplish what you are looking for.

Reference: http://www.html5canvastutorials.com/kineticjs/html5-canvas-stop-and-resume-transitions-with-kineticjs/

Update (as per comment below): If you want a looping affect, in an X direction, Y direction, or both. You can do something like:

var yPos = myShape.getAttr('y'),
    xPos = myShape.getAttr('x'),
    maxX = 1000,
    maxY = 1000,
    yIncreasing = true,
    xIncreasing = true; //lets assume myShape resides somewhere below the max

var anim = new Kinetic.Animation(function(frame) {
    /* move the shape back and fourth in a y direction */
    if (yPos < maxY && yIncreasing)  {
        hexagon.setY(yPos++);
    } else {
        if (yPos < 1) {
            yIncreasing = true;
            hexagon.setY(yPos++);
        } else {
            hexagon.setY(yPos--);
            yIncreasing = false;
        }
    } 

    /* move the shape back and fourth in a x direction */
    if (xPos < maxX && xIncreasing) {
        hexagon.setX(xPos++);
    } else {
        if (xPos < 1) {
            xIncreasing = true;
            hexagon.setX(xPos++);
        } else {
            hexagon.setX(xPos--);
            xIncreasing = false;
        }
    } 
}, layer);

Note: I haven't ran this code, it should work. Using both will cause the shape to move diagonally, but hopefully this snipplet shows a solution to your problem.