Question

我需要帮助为我的raphaelJS动画添加一个循环。想法是按下按钮id =“1”来旋转紫色正方形120度。如果按下按钮id =“2”，则紫色方块将向左旋转120度。

我已经完成了添加它们都旋转的功能，但问题是你只能点击按钮id =“1”，按钮ID =“2”，1,2,1,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

RaphaelJS动画循环

1 个答案: