我怎样才能使用拉斐尔 JS 有一个连续的动画

How can i have a continues animation using Raphael JS?

本文关键字：JS 有一个 连续 动画      更新时间：2023-09-26

我使用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));
            }

我怎样才能有一个连续动画？

谢谢 ！

拉斐尔有一个重复的无穷大选项...

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)

斯菲德尔

带暂停的示例...

斯菲德尔 2

相关文章：