RaphaelJS 动画循环 [英] RaphaelJS animation loop

问题描述

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

I need help with adding a loop to my raphaelJS animation. The idea is to hit the button id="1" to rotate the purple square 120degrees. If you hit button id="2", the purple square will rotate 120degrees to the left instead.

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

I've accomplished to add the function which they both rotates, though the problem is that you can only click the order of, button id="1", button ID="2", 1, 2, , 1, 2, etc. To clarify, you can't rotate the blue square twice the same direction, you'll have to alternate between button 1/2. Second, you can't start with rotate left function. To be able to use rotate left you'll first have to rotate it to the right.

那么我需要什么帮助:

能够多次使用该功能.

总结功能:

点击按钮后，紫色方块会向右旋转 120 度而发生变化.动画计时器设置为超过 2 秒.为其添加反弹效果.

By hitting the button, the purple square transforms by rotating 120degrees to the right.The animation timer is set to happen over 2 seconds. Adding a bounce effect to it.

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

Here is the rotate right function. The rotate left function is exactly the same except the transform part. And then I tried to solve this by adding ".repeat(Infinity)", but it had no effect.

//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
    });

推荐答案

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

Somehow, you need to either store the rotation, or gather the rotation from the existing transform. Either way is possible, it may be a simpler mindset to just store the rotation in a data element. So the main bit would look like this...

设置初始轮换存储...

Set up the initial rotation store...

SomeElement.data('rotation',0)

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

Then use this in your transform...

    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 动画循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！