KineticJS 动画形状去准确位置

Question

我有一个多边形，我正在为其设置动画以使其沿直线路径移动。

var anim = new Kinetic.Animation(function(frame) {
shape.setX(99);
if(shape.getPosition().y < window.innerHeight/2){shape.setY(shape.getPosition().y + frame.time/48);};
  }, layer);

所以这个动画是有效的，除了形状永远不会到达页面高度的中心，而是总是稍微靠后一点。我知道这是因为 shape.getPosition().y < window.innerHeight/2 但使其成为 shape.getPosition().y == window.innerHeight/2 会导致形状永远不会停止，因为计算永远不会完全 window.innerHeight/2 我想知道是否有人对我的方法有任何想法将对象动画化到精确坐标。

Answer 1

可以使用 Tween 吗？

var tween = new Kinetic.Tween({
  node : rect,
  y : window.innerHeight / 2,
  duration : 0.5
});
tween.play();

http://jsbin.com/zihoqe/1/edit?js,output

KineticJS 动画形状去准确位置

KineticJS Animate shape to go to exact position

javascript

kineticjs