RaphaelJS 动画循环

Question

我需要帮助来为我的 raphaelJS 动画添加循环。这个想法是点击按钮 id="1" 将紫色方块旋转 120 度。如果你点击按钮 id="2"，紫色方块会向左旋转 120 度。

我已经完成了添加它们都旋转的功能，虽然问题是你只能点击顺序，按钮 id="1", 按钮 ID="2", 1, 2, , 1, 2等。为了澄清，你不能在同一方向旋转蓝色方块两次，你必须在按钮1/2之间交替。其次，您不能从左旋转功能开始。为了能够使用向左旋转，您首先必须将其向右旋转。

所以我需要帮助：

能够多次使用该功能。

总结一下功能：

点击按钮，紫色方块向右旋转 120 度变换。动画计时器设置为 2 秒。为其添加反弹效果。

这里是向右旋转的功能。除了变换部分外，左旋转功能完全相同。 然后我尝试通过添加“.repeat(Infinity)”来解决这个问题，但是没有效果。

//Turn right
    p.rect(10, 80, 50, 25)
    .attr({
        fill : "grey",
        "stroke-width" : 1
    }).click(function(){
    purpleRect.animate({
        transform : "r120",
    }, 2000, "bounce").repeat(Infinity);
});
};

紫色方块本身：

window.onload = function(){

    var p = Raphael(0, 0, 240, 140);
    p.rect(0,0,240,70);

    var purpleRect = p.rect(10, 10, 50, 50)
    .attr({
        fill : "#aaaaff",
        "stroke-width" : 3
    });

Answer 1

不知何故，您需要存储旋转，或从现有变换中收集旋转。无论哪种方式都是可能的，将旋转存储在数据元素中可能是一种更简单的思维方式。所以主要部分看起来像这样......

设置初始旋转存储...

SomeElement.data('rotation',0)

然后在你的转换中使用它...

    p.rect(70, 80, 50, 25)
    .attr({
        fill : "grey",
        "stroke-width" : 1
    }).click(function a(){
        purpleRect.data('rotation', purpleRect.data('rotation') - 120);
        purpleRect.animate({
            transform : "r" + +purpleRect.data('rotation'),
    }, 2000, "bounce");
});

jsfiddle