如何在Raphael中将停止时的动画重置为其初始状态？

Question

What I want to do is when I stop an animation to reset the initial state of the animated object. I want to do that because when I stop it now ( Element.stop([anim]) ) it freezes in its current point (lets say half tranperant) and when I play it again the animation starts to repeat from this place not from the beginning.

Here is my animation Raphael.animation({opacity: 0}, 500, "<>").repeat(Infinity) .

I asked this question in the Raphael newsgroup 3 weeks ago but I didn't receive any answer.

Thanks, bozhidarc

Answer 1

I'm not suggesting it's the most elegant, but in the past I've done things like this simply by adding a couple of extra attributes to the element when you create it. In this case, I'd just add a baseAttrs attribute, which holds the original object of settings:

    var paper = Raphael('canvas', 500, 500);

    var circle = paper.circle(320, 240, 60);
    circle.baseAttrs = {fill:'yellow'}; // add to the elem
    circle.attr(circle.baseAttrs);

    circle.animate({fill: "blue"}, 1000,
                   function(){
                       this.attr(this.baseAttrs);
                   });

In the above example, the callback from the animation sets the attributes of the circle to the baseAttrs value of the element when the animation is complete. The baseAttrs will always be held with the circle, regardless of what happens to it. http://jsfiddle.net/UVPeh/