Производительность canvas анимации?

Question

[Анна Бакурова]

Сделали анимацию на js который изменяет свойства css через определённое время (гсап использовали)
Из за того что в анимации анимируются большие картинки (максимально сжатые) то анимация жутко тормозит.
Предложили сделать на канвас (менеджеру сказал знакомый что на канвас лучше так как он растрирует изображения), сижу и думаю что значит расрирует, чем это быстрее обычного изменения css js-ом. И действительно ли Canvas будет быстрее.
Анимация при переключения кружков test.cuberto.ru/Neemble/#business_type - поддержка хром.

Comments

[Анна Бакурова]

Всем большое спасибо за помощь особенно Nikolay Talanov и @Taraflex
Вот ссылкочка на мою анимацию с js

Answer 1

[Александр Таратин]

UPD

Прошлый ответ не годен.
Вот вариант проще, но только нужно до ума довести чтобы вниз не съезжало
https://jsfiddle.net/QW01_01/0p9uz4bq/2/

Comments

[Анна Бакурова]

Я знаю что такое растеризация, но Я не понимаю как это растрировать растровые изображения?

Answer 2

[Nikolay Talanov]

codepen.io/suez/pen/2ab9aaf1b3290ea5ebdcbaee61898f64 - похоже на необходимый эффект?
В общем перепробовал массу способов, вариант с margin самый адекватный. При использовании translate все дергается при анимации, видимо из-за sub-pixel rendering.
Я естественно позволил себе сделать прототип с использованием вьюпорт едениц, но по виду и вы их юзать можете, раз уж вы пытались юзать clip-path с куда более скромной поддержкой :)
Для того чтобы расположить элементы не в % величинах (там где у меня юзается left: 20% например), надо будет либо хардкодить свои цифры, либо просто юзать calc(), считая отступ центра кружка относительно вертикального центра страницы.

Answer 3

[copal]

Соглашусь с предыдущими ораторами, но от части. requestAnimationFrame это хорошо, но на сколько я знаю, полифилом её не заменить, так как она должна синхронизироваться на уровне движка.

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

Тут нужно сглаживать дельту времени. И у pixi я такого сглаживания не видел. Хотя я вообще на уровне фраймворков из коробки такое не видел.

И pixi это рендер для gpu, который не для новичков. Не стоит его вообще пропагандировать в среде web-jquery'стов.)

Comments

[Александр Таратин]

>Тут нужно сглаживать дельту времени.
Но мы же тут не физику расчитываем или какие-нибудь расчеты научные ведем. Подумаешь анимашка рассинхронится на пару десятков миллисекунд - ничего страшного. Анна Бакурова вроде не новичек.

[copal]

Александр Таратин: без сглаживание даже flash, на что уж продвинутый и то лагает. Даже в starling приходится.
аааа... Вы не поняли.... Страшны не задержки, которые Вы описывает, а рывки, которые потом будут. Все фраймворки строятся на анимации, но не просто анимации типа EnterFrame или requestAnimationFrame, а анимации построенной на времени.
Эта технология описана везде и она работает, но не так как хочется.

Представьте что произошел лаг и значение времени передаваемое в метод анимации увеличивается с одной части до трех. Теперь этот подход становится просто губительным, ведь страшен не лаг, а скачок который произойдет из-за увеличенного времени. Лаг бы человеческий глаз и не заметил, но вот скачок видит..

Понимаете о чем я?

[Александр Таратин]

Не очень. Просто привязываем анимацию не ко времени, а к числу срабатываний requestAnimationFrame. На каждый такт увеличиваем кружок на небольшую дельту. Если произойдет лаг, то после не будет рывка, а застопориться вся анимация и закончится немного позже.

[copal]

Нет, завершится она вовремя, как и было отведено временем, которое было расчитано при старте. Только вместо резкого рывка излишнее время распределяется на следующие интервалы.