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

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

Прошлый ответ не годен.
Вот вариант проще, но только нужно до ума довести чтобы вниз не съезжало
https://jsfiddle.net/QW01_01/0p9uz4bq/2/
Ответ написан
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
codepen.io/suez/pen/2ab9aaf1b3290ea5ebdcbaee61898f64 - похоже на необходимый эффект?
В общем перепробовал массу способов, вариант с margin самый адекватный. При использовании translate все дергается при анимации, видимо из-за sub-pixel rendering.
Я естественно позволил себе сделать прототип с использованием вьюпорт едениц, но по виду и вы их юзать можете, раз уж вы пытались юзать clip-path с куда более скромной поддержкой :)
Для того чтобы расположить элементы не в % величинах (там где у меня юзается left: 20% например), надо будет либо хардкодить свои цифры, либо просто юзать calc(), считая отступ центра кружка относительно вертикального центра страницы.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
copal
@copal
𝄞 ...оооо baby
Соглашусь с предыдущими ораторами, но от части. requestAnimationFrame это хорошо, но на сколько я знаю, полифилом её не заменить, так как она должна синхронизироваться на уровне движка.

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Cryptopay Санкт-Петербург
от 150 000 ₽
GXB Development Йошкар-Ола
от 60 000 до 160 000 ₽
20 февр. 2020, в 17:56
360000 руб./за проект
20 февр. 2020, в 17:45
60000 руб./за проект
20 февр. 2020, в 17:38
3000 руб./за проект