Question

我使用Raphael JS为矩形设置动画，问题是在第二个动画中，＆＃39; x＆＃39;位置重置为0。

var paper = Raphael("paper1", 640, 480);
var rect = paper.rect(20,20,50,50).attr({fill:"orange"});
var myAnim = Raphael.animation({transform:'t100,0'},"1000","elastic");
var waitTime = 0;

function animRect(){
                rect.animate(myAnim.delay(waitTime));
                waitTime+=1000;
                rect.animate(myAnim.delay(waitTime));
            }

如何制作连续动画？

感谢＆＃39; s！

Answer 1

Raphael有一个重复的无限选项...

var anim = Raphael.animation({transform: "t100,0"}, 2500).repeat(Infinity);

rect.animate(anim)

如果您想要2个单独的动画（一个倒转）或重复相同的动画，则不太清楚。如果这样做，您可以输入多个动画，如下所示（将数字视为通过的百分比）......

var anim = Raphael.animation( { 0.5: {transform: "t100,0"}, 1: { transform: 't0,0' } }, 2500 ).repeat(Infinity);
rect.animate(anim)

jsfiddle

暂停的示例......

jsfiddle 2

如何使用Raphael JS继续动画？

1 个答案: