kineticjs ::从X到Y的距离继续动画形状

Question

我想要动画形状继续从X到Y距离，再次使用动力学js动画函数从Y到X返回形状。例如。将形状从0px移动到200px，并再次将形状200px返回到0px。

谢谢。

Answer 1

您可能正在寻找一个补间，而不是一个动画。退房的动能文档上吐温更多的信息，但是你在找什么做的可能会是这个样子：

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

现在，你有一个补间，你可以玩，倒带，暂停，将其反转（再次查看文档以获取有关Tween的所有最新信息）。

所以，你现在可以做的：

tween.play() 

或

tween.reverse() 

来完成你在找什么。

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

更新（按照下面的评论）：如果你想有一个循环的影响，在X方向，Y方向，或两者兼而有之。你可以这样做：

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

注意：我还没有运行此代码，它应该工作。使用两者都会导致形状沿对角线移动，但希望此snipplet能够为您的问题提供解决方案。