为什么 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 是路径段数组的数组，这会在每个帧上将一个段写入 canvas，直到外部数组为空。当我设置 path.onFrame = null 时，我希望覆盖原始函数，但是我的控制台日志继续在每一帧上打印。如果我要设置 path.onFrame = otherFunction() 而不是 null，这两个函数都会在每一帧上执行。

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

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

paper sketch

Answer 1

这是因为您正在将一个新的 Path 实例重新分配给 path 变量，每次新字母开始时，都不会重置其 onFrame 属性。
所以 onFrame 回调实际上只为最后一个字母重置。

您应该使用 Path onFrame 属性而不是使用 Path onFrame 属性，而是使用 View onFrame 属性效果相同。

这是更正后的 sketch。

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

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

Why does paper.js path.onFrame not stop when changed from function to null

canvas

path

paperjs