javascript - RaphaelJS 动画循环

Question

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

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

所以我需要帮助:

能够多次使用该功能。

功能总结:

按下按钮，紫色方 block 会向右旋转 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);
});
};

紫色方 block 本身:

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