为什么paper.js path.onFrame在从函数更改为null时不会停止

Question

我正在尝试使用path.onFrame来动画化路径的写入，在每个帧中都会添加分段。我需要能够在完成后停止该路径的特定帧事件，而不删除该路径。这是我所拥有的：

path.onFrame = function(event) {
if(pathSegs.length > 0) {
if(pathSegs[0].length > 0) {
path.add(pathSegs[0].shift());
}
else {
pathSegs.shift();
path = new Path(pathAttrs);
}
}
else {
console.log('chalkboard finished - should only call once');
path.onFrame = null;
//writeText1();
}
}

pathSegs是一个由路径段数组组成的数组，它在每帧上向画布写入一个段，直到外部数组为空。当我设置path.onFrame = null时，我希望覆盖原始函数，但我的控制台日志会继续在每一帧上打印。如果我设置path.onFrame = otherFunction()而不是null，那么两个函数都将在每个帧上执行。

为什么会这样？我知道我可以解决我的问题，但我想了解发生了什么，不会让这个版本发挥作用。

注意：最终目标是在这个动画结束时触发另一个动画，即writeText1((

图纸草图

Answer 1

这是因为每次新字母开始时，都会将新的Path实例重新分配给path变量，而不重置其onFrame属性
因此onFrame回调实际上只为最后一个字母重新设定种子。

您应该使用ViewonFrame属性，而不是使用PathonFrame属性，这在您的情况下是误导性的。

这是修正后的草图。

view.onFrame = function(event) {
if(pathSegs.length > 0) {
if(pathSegs[0].length > 0) {
path.add(pathSegs[0].shift());
}
else {
pathSegs.shift();
path = new Path(pathAttrs);
}
}
else {
console.log('chalkboard finished - should only call once');
view.onFrame = null;
//writeText1();
}
}