我如何使用 Raphael JS 制作连续动画？

Question

我正在使用 Raphael JS 为矩形设置动画，问题是在第二个动画中，'x' 位置重置为 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));
            }

我怎样才能拥有连续动画？

谢谢！

Answer 1

拉斐尔有一个重复无限选项...

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 制作连续动画？

How can i have a continues animation using Raphael JS?

javascript

animation

raphael