RaphaelJS 动画循环

Question

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

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

所以我需要帮助：

能够多次使用该功能

功能总结：

通过点击按钮，紫色方块会旋转 120 度进行变换，right.The 动画计时器设置为在 2 秒内发生。为其添加弹跳效果。

这里是右旋函数。 rotate left函数除了transform部分外完全一样。然后我尝试通过添加“.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

RaphaelJS 动画循环

RaphaelJS animation loop

javascript

html

raphael