Question

我想做的是当我停止播放动画时重置动画对象的初始状态。我想这样做是因为当我现在停止它（Element.stop([anim])）时它会在当前点冻结（让我们说半转）并且当我再次播放动画时，动画开始从这个地方重复而不是从头开始。

这是我的动画Raphael.animation({opacity: 0}, 500, "<>").repeat(Infinity)。

我在拉斐尔新闻组3周前问过这个问题，但我没有收到任何答复。

谢谢， bozhidarc

Answer 1

我并不是说它是最优雅的，但在过去我只是通过在创建元素时为元素添加一些额外的属性来完成这样的事情。在这种情况下，我只需添加一个baseAttrs属性，该属性包含设置的原始对象：

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

在上面的示例中，动画的回调在动画完成时将圆的属性设置为元素的baseAttrs值。无论发生什么情况，baseAttrs将始终与圈子保持一致。 http://jsfiddle.net/UVPeh/

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

1 个答案: