Question

我正在尝试从X到Y距离继续动画形状，再次使用kinetic js animate函数将形状从Y返回到X.例如。将形状从0px移动到200px并再次将形状200px返回到0px。

感谢。

Answer 1

你可能在这里寻找一个Tween而不是动画。查看动态文档以获取有关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);

注意：我没有运行此代码，它应该可以运行。使用两者将导致形状沿对角线移动，但希望此snipplet显示您的问题的解决方案。

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

1 个答案: