Question

var stage = new Kinetic.Stage({
   container: 'container',
   width: 578,
   height: 200
});
var layer = new Kinetic.Layer();

var Circle = new Kinetic.Circle ({
     x: 100,
     y: 100,
     radius: 10,
     fill: 'green',
     stroke: 'black',
     strokeWidth: 5
});

layer.add(Circle);
stage.add(layer);

var a = 1;
var anim = new Kinetic.Animation(function(frame) {
     Circle.setX(frame.time * 350 / 1000 + 100);
 }, layer);


anim.start();

How do i stop the animation at a specific point or coordinate? like animate to x=700 and then stop. i want to have a circle that is able to animate with a button to coordinate x=700, stop and then stop, and after that with another button back or down.

thank you.

Answer 1

There are 2 ways,

1.

var anim = new Kinetic.Animation(function(frame) {
    if(Circle.getX() < 700)
       Circle.setX(frame.time * 350 / 1000 + 100);
    else 
       this.stop();
}, layer);

OR
2. Use Kinetic.Transition check here