Блог

Я пытаюсь использовать 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()

бумажный эскиз

Это потому, что вы переназначаете новый Path экземпляр path переменной каждый раз, когда начинается новая буква, без сброса ее onFrame свойства.
Таким onFrame образом, обратный вызов фактически сбрасывается только для последней буквы.

Что вам следует сделать вместо использования Path onFrame свойства, которое в вашем случае вводит в заблуждение, так это использовать View onFrame свойство, которое будет работать так же.

Вот исправленный эскиз.

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