Raphaël.js 动画 resume() 失败答案

【问题标题】：Raphaël.js animation resume() fails on setRaphaël.js 动画 resume() 失败
【发布时间】：2012-07-05 16:41:25
【问题描述】：

我有这段代码 (on jsfiddle)

var paper = new Raphael('holder', 400, 100);

var set = paper.set();

for(var i = 0; i < 10; i++) {
    var circle = paper.circle((i * 30) + 30, 20, 5);
    circle.attr({ fill: '#ff0' });
    circle.animate(Raphael.animation({ transform: 's2,2' }, 2000).repeat('Infinity'));

    set.push(circle);
}

set.hover(function() {
    set.pause();
}, function() {
    set.resume(); // <- things get nasty here
});

现在当鼠标进入集合时，set.pause() 被正确调用并且所有动画停止。
但是当离开悬停区域时，它不会恢复动画，而是在控制台中出现以下错误：

未捕获的类型错误：无法读取未定义的属性“转换”

我不知道为什么会这样；有人可以帮忙吗？

【问题讨论】：

我链接了未压缩的 Räphâël.js 以进行调试：jsfiddle.net/7nGcR/23 悬停后，它恢复播放，但在 raphael.js:line#2946 与e.totalOrigin is undefined 再次循环之前就死了

标签： javascript html animation raphael resume

【解决方案1】：

在 Safari/Firefox 上，悬停一段时间后，我收到此错误消息（使用 https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael.js 处的未压缩源）：

`raphael.js`, line 2946: `e.totalOrigin is undefined`

唯一设置totalOrigin的地方是runAnimation函数：

line 3072: function runAnimation(anim, element, percent, status, totalOrigin, times) {

您的代码首先调用elproto.pause()（第3352 行），然后调用elproto.resume()（第3361 行）。 pause() 将 paused 属性设置为 true，resume() 删除此属性。但是resume 在删除paused 标志之后也会调用status() 方法：

var e = animationElements[i];
if (eve("raphael.anim.resume." + this.id, this, e.anim) !== false) {
    delete e.paused;
    this.status(e.anim, e.status);
}

奇怪的，正在进行中的 elproto.status 方法（第 3323 行）仅由 elproto.setTime() 和 elproto.resume() 调用。这个函数构造了一些复杂的返回值，但是没有活动代码使用它的返回值，只有从第 2980 行开始的被注释掉的行。

这个函数也调用runAnimation函数，如果它有一个value参数：

 runAnimation(anim, this, -1, mmin(value, 1)     );
          totalOrigin should be passed here! ^^^

不幸的是，它没有为totalOrigin 传递任何东西，这就是错误的原因。

我尝试根据第 3312 行添加totalOrigin 参数：

 runAnimation(anim, this, -1, mmin(value, 1), this.attr());

虽然它似乎有效，但它却有问题。

作为第二次尝试，我将整行注释掉：

 // runAnimation(anim, this, -1, mmin(value, 1));

结果：可以，但是时间不对，可能动画开始时间应该在某个地方更新。

http://jsfiddle.net/7nGcR/26/ https://raw.github.com/gist/3067995/1e82de48eeacf98697b572efdc74c11a9b1d9d03/gistfile1.js

【讨论】：

太棒了；非常好的分析！非常感谢你！这是一个很好的起点，如果我不能让它工作，我会提交一个错误报告。
没错，这就是它需要进一步研究的原因，请随时为赏金进行调查:)

【解决方案2】：

在elproto.status 方法中，需要替换（Raphael 2.1.4 中的第 5127-5128 行）

runAnimation(anim, this, -1, mmin(value, 1));
return this;

与

for (var i = 0; i < animationElements.length; i++) if (animationElements[i].el.id == this.id && (!anim || animationElements[i].anim == anim)) {
    e = animationElements[i];
    runAnimation(anim, this, -1, mmin(value, 1), e.totalOrigin, e.repeat);
    return this;
}

【讨论】：