Как правильно перезапустить канвас на клик кнопки?

Question

[Alice777]

Нужно на клик кнопки запускать канвас анимацию, при повторном клике анимация должна сброситься и заново повториться (эффект туггл). В примере я так и сделал, однако у меня на клик функция вызывается много раз не очищая старый холст, что само собой сказывается на скорости (фпс) анимации. Как сделать это правильно?

https://jsfiddle.net/Lr2fpndx/

Answer 1

[RAX7]

Comments

[Alice777]

Все верно, но я пользуюсь barba js - это для перехода по страницам без перезагрузки, и этот вопрос я задал больше с целью того, чтобы переходя на другую страницу мой канвас очищался полностью (удалялся), потом когда я врзвращаюсь на нужную страницу, снова запускался без потери фпс

При вашем решении, переходя по страницам и используя для сброса вашу функцию "ресет" фпс все равно падает, тут нужно перезапускать функцию анимации или весь канвас, как вы думаете? спасибо!)

[RAX7]

Alice777,

канвас очищался полностью (удалялся)

так очищался или удалялся? Канвас внутри data-barba="container" или за его переделами?

[Alice777]

внутри

[Alice777]

RAX7, вообще часто пользуюсь web gl и всевозможными библиотеками, которые создают канвас. Очень хочу найти какой-нибудь хак для canvas + barba js чтоб при переходе на страницы не падал фпс, но не могу

Очень много мучений с канвасом получается - очищать, снова рисовать - а это время для каждого канваса писать отдельно очищение, вы не знаете что-нибудь как от этого избавиться?

[RAX7]

Alice777, попробуй перед уходом со страницы прихлопнуть pixi https://pixijs.download/release/docs/PIXI.Applicat... , а при возвращении заново создать new titleParticle()

[Alice777]

хороший вариант, но вот кручу верчу, и не могу правильно прихлопнуть pixi

повесил на beforeEnter new titleParticle();
а на afterLeave или leave не могу правильно обратиться к нему - должно быть как-то так?
let titleAnim;
titleAnim.ParticlesText.sprite.destroy(true);
сори за глупый код, сложно, спасибо

[RAX7]

Alice777, скорее всего как-то так:

titleAnim.ParticlesText.app.destroy(true, { children: true, texture: true, baseTexture: true })

можно не дестроить пиксю, а просто приостановить https://pixijs.download/release/docs/PIXI.Applicat...
Суть в том, что при уходе со страницы барба удаляет канвас из DOM, но pixi продолжает работать. При возвращении создается новый инстанс pixi (при этом старый продолжает работать) отсюда и просадка по фпс.
Что бы все работало как нужно:
При заходе на страницу проверить есть ли инстанс titleAnim, если нет, то создать его и вставить канвас в DOM

document.querySelector("#content-canvas").append(titleAnim.ParticlesText.app.view);

, если есть, то просто вставить канвас в DOM и запустить pixi titleAnim.ParticlesText.app.start()
При уходе со страницы вызвать titleAnim.ParticlesText.app.stop()

[Alice777]

RAX7, у вас очень интересный ход мысли, но у меня так ничего и не получилось, ни в коему случае не хочу на вас давить, вы и так много для меня сделали, за что вам огромное спасибо, но, если вдруг совершенно случайно у вас будет настроение, не могли бы вы сделать все то, что вы описали выше, с помощью моего наброска - только на клик кнопок, так, например, кнопка 'start' - (имитация эффекта захода на страницу(beforeEnter));
'restart' - (имитация эффекта ухода из страницы(afterLeave))

[RAX7]

Alice777, https://codesandbox.io/s/vibrant-goldberg-q9ww4
в песочнице оно криво работает, поэтому лучше запускать у себя на локальном сервере.

[Alice777]

RAX7, получилось! если бы вы знали как вы помогли мне разобраться, благодаря вам я теперь понимаю намного больше и чувствую себя невероятно, сори за сентиментальность - неиссякаемая благодарность, вы делаете невероятное дело для нас - для разработчиков. Верю в позитивные мысли, направленные вам, все у вас будет хорошо, еще раз благодарю!

[RAX7]

Alice777, пожалуйста=)