javascript - Kineticjs::从 X 到 Y 距离继续动画形状

Question

我正在尝试从 X 到 Y 距离继续对形状进行动画处理，再次使用kinetic js 动画函数将形状从 Y 返回到 X。例如。将形状从 0px 移动到 200px，然后再次将形状 200px 返回到 0px。

谢谢。

Answer 1

您可能在这里寻找补间而不是动画。查看动力学文档以获取有关 Tweens 的更多信息，但是您想要做的可能如下所示:

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

现在您已经有了补间，您可以播放它、快退、暂停、反转(再次查看文档以获取有关补间的所有最新信息)。

所以你现在可以这样做:

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

注意:我还没有运行过这段代码，它应该可以工作。使用两者都会导致形状沿对 Angular 线移动，但希望此代码片段能够解决您的问题。