Question

我有一个简单的动画，用 RaphaelJS 制作：我只想要一个圆圈“闪烁”4次（动画不透明属性）。

最后，这就是我所做的：

circleBackground.animate({'opacity': 0.2}, duration/2/8, "easeIn", function() {
            circleBackground.animate({'opacity': 0}, duration/2/8, "easeOut", function() {
                circleBackground.animate({'opacity': 0.2}, duration/2/8, "easeIn", function() {
                    circleBackground.animate({'opacity': 0}, duration/2/8, "easeOut", function() {
                        circleBackground.animate({'opacity': 0.2}, duration/2/8, "easeIn", function() {
                            circleBackground.animate({'opacity': 0}, duration/2/8, "easeOut", function() {
                                circleBackground.animate({'opacity': 0.2}, duration/2/8, "easeIn", function() {
                                    circleBackground.animate({'opacity': 0}, duration/2/8, "easeOut", function() {

                                    });
                                });
                            });
                        });
                    });
                });
            });
        });

但是，这看起来很脏，我想要清理它，以使这个更具可读性/可维护性。

我试过.repeat()但是我只能重复动画的一半（不透明度从0到0.2重复，而不是0.2到0），这不会产生影响我'我正在寻找。

有什么想法吗？

Answer 1

我试过了：

var paper = new Raphael("myDiv", 100, 100);
var rect = paper.rect(20,20,20,20).attr({fill: "red", opacity: 0});
var cmp = 3;

var anim = Raphael.animation({opacity: 0.2}, 500, "easeIn", function () {
    rect.animate({opacity: 0}, 500, "easeOut", function () {
        if (cmp > 0) {
            rect.animate(anim); cmp--;
        }
    });
});

rect.animate(anim);

http://jsfiddle.net/Manegan/mfx76jem/1/

它有点工作......我不知道这是否是你需要的结果。

编辑：问题是动画完成后会自动重复，而不等待回调完成...我会尝试找到解决方案。

编辑：发现一些工作正常但有点脏的东西。仍然有点“干净”。

Answer 2

我改编了Manegan的解决方案并使用了Raphael.animation函数.repeat()。它现在看起来像这样：

var paper = new Raphael("myDiv", 100, 100);
var rect = paper.rect(20,20,20,20).attr({fill: "red", opacity: 0});
var cmp = 3;
var animationTime = 500;

var anim = Raphael.animation({opacity: 0.2}, animationTime, "easeIn", function () {
    rect.animate({opacity: 0}, animationTime, "easeOut");
}).delay(animationTime).repeat(cmp);

rect.animate(anim);

这是小提琴：http://jsfiddle.net/t33swt92/1/

您可以找到.repeat() here.

的文档

RaphaelJS：反复播放动画

2 个答案: