#javascript #html #animation #lottie
#javascript #HTML #Анимация #лотти
Вопрос:
Привет, я использовал некоторые стикеры Telegram на своем веб-сайте, загрузив их на веб-сайт Lottiefiles и экспортировав их в виде файлов json. Но когда я захожу на страницу своего веб-сайта, мой браузер Google Chrome использует около 80% процессора моего ноутбука, а также анимация отстает при воспроизведении на ноутбуке! Как я могу решить эту серьезную проблему с производительностью? Спасибо
Комментарии:
1. Я борюсь с той же проблемой….
Ответ №1:
Не используйте файлы Lottie на своем веб-сайте, я попробовал использовать пакет vue-lottie npm и понял, что мой сайт работает во много раз медленнее, а переходы выглядят очень прерывистыми.
Решение действительно заключается в том, чтобы не использовать анимации SVG, если они не были созданы для Интернета (с использованием html и css, иногда JavaScript тоже).
Вот почему вы не видите много анимаций на веб-сайтах, это стоит больших денег, чтобы нанять технического веб-дизайнера для написания кода для одного, учитывая, что он не может быть хорошо перенесен из after effects.
Вы могли бы попробовать использовать анимацию в качестве видео, но это применимо только в том случае, если ваш фон белый (почти все анимации, которые я приобрел в UI8, являются white bg) или вы опытный видеоредактор, способный изменить цвет фона на тот, который вам нужен. Очевидным недостатком является то, что если дизайн вашего сайта изменится, вам придется переделать редактирование видео.