javascript - 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

你能使用补间吗？

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

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