javascript - 拉斐尔JS : back and forth animation repeated

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/

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

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

编辑:发现一些工作正常但有点脏的东西。还是有点“干净”。