Комментарии 16
Сначала создали себе мегапролему на ровном месте, затем героически ее решили. Анимация на Реакте ?♂️ Куда руководство смотрит?)) Ну ладно вам интересно, но вашей компании то это зачем?) Добавлю еще решение - анимированный GIF.
Webp вроде ещё умеет анимацию, но не пробовал никогда
Да, согласен, react - это не лучший инструмент для анимаций. Но бывает так, что ты просто приходишь на проект и там уже есть решение. А ты лишь можешь его улучшить или заменить. И да, эта задача решалось мной ещё до текущего места работы.
Кроме того, статья в целом не про то, что "мы съехали с React и стало всё замечательно". Вы могли заметить, что все представленные решения имеют какой-то недостаток. Главная же идея была показать, что есть иные варианты решения проблемы и один из главных - просто отказаться от ненужной сложности.
Решение с анимированным GIF нам не подошло по причине низкого качества картинки и отсутствия возможности сделать прозрачный фон.
Да, возможно это было бы можно решить с помощью современных форматов, типа Webp, но на момент поиска решения (~2 года назад) Safary не умел в Webp, а тем более анимированный
<sarcasm>Кажется, я нашел идеальное решение.</sarcasm>
Сарказм тут и не нужен, кмк. Это решение отлично работало, работает и будет работать. Году в 2015-м, если память не подводит, ко мне пришёл заказ на «3D» просмотр товаров (простое вращение по оси X, на самом деле) без использования flash. Я таким образом и делал: брал видео прокрутки товара, делал ленту спрайтов и с помощью JS обрабатывал тач-движения. Плюс добавил ускорения, инерцию.
Разработчикам таких интерфейсных решений всегда полезно подсматривать как делают игры. Физика, решения с картами спрайтов, использование части спрайтов одного предмета, как части другого и много других интересных штук.
Есть возможность распараллелить выполнение задач через web workers. Но в них нет доступа к DOM, а значит, мы не сможем менять состояния элементов
Для этого есть OffscreenCanvas, который будет рисовать, даже если основной поток в бесконечном цикле крутится. Но в сафари его нету.
А для варианта с svg не помогло свойство contain? Должно бы layout уменьшить.
Помню, как решал подобную проблему, была таблица, и в каждой строке было выпадающее меню, которое подписывалось на событие resize и scroll для закрытия (писали на Angular без использования onPush). При 10-20 записях все было хорошо, но при 100 записях все начинало тормозить, любое событие resize или scroll вызывало фриз на 1,7-1,8 секунды. Договорился с аналитиками, что можно заменить все на css, принеся в жертву открытие на клик мыши. Стало работать за 2-3мс. (Сейчас я бы там все переписал по нормальному, но тогда это было тоже крутое ускорение)
Ради полноты картины можно добавить вариант с webgl. Производительность хорошая, ресайз не влияет на качество.
А вы не пробовали lottie? Интересно сравнить производительность с ним
Нет, не пробовал. Но кажется lottie это просто инструмент для быстрого переноса анимаций из after effects. Не думаю, что он может быть производительнее, чем просто анимация на canvas.
И опять же, любая анимация на JS имеет недостаток, что выполняется в том же потоке что и ваш код. Будете блокировать поток - будет тормозить анимация.
This is the most detailed article on animations I've ever seen good job.
Интересная статья, спасибо.
Можете посоветовать что почитать новичку о профилировании фронта?
Могу посоветовать начать с советов от самого Гугла
К сожалению не видел статьи, где бы разбирались все панели devTools, но по частям можно найти именно в блоге Гугла
7 + 1 способ анимировать спиннер