RaphaelJS：来回动画重复

Question

我有一个简单的动画，用 RaphaelJS 制作：我只想要圆 "blink" 平滑 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/

有点效果...我不知道这是否是您需要的结果。

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

编辑：找到了一些工作正常但有点脏的东西。还是有点 "clean".

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

这里是fiddle：http://jsfiddle.net/t33swt92/1/

您可以找到 .repeat()here.

的文档

RaphaelJS：来回动画重复

RaphaelJS : back and forth animation repeated

javascript

animation

raphael