Javascript kineticjs:：继续从X到Y距离设置形状动画

我试图动画形状继续从X到Y的距离，再次返回形状从Y到X使用动态js动画功能。例如，将形状从0px移动到200px，然后再次将形状200px返回到0px

---

谢谢。

您可能在这里寻找的是一个Tween，而不是动画。查看动力学文档以了解更多关于吐温的信息，但是您希望做的事情可能如下所示：

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

现在你有了一个tween，你可以播放它，回放它，暂停它，反转它（同样，检查文档中关于tween的所有最新信息）

因此，您现在可以执行以下操作：

tween.play()

或

完成你想要的

参考：

更新（根据下面的评论）：如果你想要一个循环效果，在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);

var yPos=myShape.getAttr（'y'）， xPos=myShape.getAttr（'x'）， maxX=1000， maxY=1000， yIncreasing=true， xIncreasing=true//让我们假设myShape位于最大值以下的某个位置 var anim=新的动能动画（函数（帧）{ /*沿y方向向后和第四次移动形状*/ if（yPos

---

注意：我还没有运行此代码，它应该可以工作。使用这两种方法都会使形状沿对角线移动，但希望这个小剪贴画能解决您的问题。

您尝试了什么？嗨，拉夫顿，|我想在两个用户定义的点X到Y之间循环动画。我看到了这个示例：但我不知道如何控制开始和位置，因为X和Y点是用户定义的。谢谢hippofluff。但使用tween函数，我无法循环动画。从X到Y距离循环动画的任何其他解决方案。我看到一个例子，但我不知道如何在两个特定点X到Y之间循环形状，其中X和Y是用户定义的值。你给我的例子有什么问题？我看到一个形状从x和y向后和第四个移动。是的形状从x和y向后和第四个移动，但x和y位置由用户定义。如果用户指定将形状从X=0移动到Y=250，那么我如何实现这一点？我更新了问题。希望这能有所帮助，在这件事上我没有什么可说的了。我建议您多看看java脚本和kineticjs教程，看看它们是如何工作的，这很容易做到。

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