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

如何在特定点或坐标处停止动画？比如x = 700的动画，然后停止。我希望有一个圆圈能够用一个按钮设置动画来协调x = 700，然后停止然后停止，之后用另一个按钮来回或关闭。

谢谢。

Answer 1

有两种方式，
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。使用Kinetic.Transition check here

动画到特定点

1 个答案: