Всем привет, мы снова встретились, я ваш друг Цюаньчжаньцзюнь.

анимация

• js анимация
• CSS-анимация

Суть вебанимации заключается в изменении стиля, вызванном изменением состояния элемента.,Разница между CSSанимацией и JSанимацией не определяется языком.,Об этом судят по их характеристикам и применимым сценариям.

• CSSанимация – это просто и эффективно,Код, написанный для улучшения интерактивного взаимодействия, можно легко изолировать от основной бизнес-логики.,Рекомендуется использовать его в первую очередь во время разработки;
• Когда вам нужны более широкие функции замедления,Анимация с многообъектной ассоциацией или необходимость связать какую-либо другую бизнес-логику в определенный момент времени выполнения анимации и другие сценарии, требующие детального контроля.,JSанимация станет понятнее и проще в обслуживании.

js анимация

недостаток:

• JavaScriptЗапускается в основном потоке браузера,Существуют другие сценарии JavaScript, расчеты стилей, макеты, задачи рисования и т. д., которые необходимо запускать в основном потоке. Вмешательство в их работу может привести к блокировке потока.,Это приводит к потере кадров.
• Сложность кода выше CSSанимации

преимущество:

• JavaScriptанимация имеет широкие возможности управления, анимацией можно управлять во время воспроизведения: Старт, пауза, Воспроизведение, продолжение, Отмена. возможна.
• Эффект анимации богаче, чем css3animation,Некоторые анимационные эффекты, такие как изогнутые движения.,ударная вспышка,Эффект прокрутки параллакса, возможен только с помощью JavaScriptанимации
• У CSS3 есть проблемы с совместимостью, но у JS в большинстве случаев проблем с совместимостью нет.

CSS-анимация

CSSанимацияобычно относится к использованиюtransitionпереход реализациианимацияи использоватьanimationДля достижения ключевых кадрованимация。

Блог Наньчжи — CSSанимация

недостаток:

• Слабый контроль над рабочим процессом,Невозможно подключить функцию обратного вызова привязки события. CSSанимацию можно только ставить на паузу,Вы не можете найти конкретный момент времени в анимации, вы не можете повернуть анимацию наполовину, вы не можете изменить шкалу времени, вы не можете добавить функцию обратного вызова в определенную позицию или привязать событие воспроизведения.,Нет отчета о ходе работы
• Код многословен. Хотите использовать CSS Если реализация будет немного сложнее, код CSS в конечном итоге станет очень громоздким.

преимущество:

• Браузеры можно оптимизировать для анимации.
  • Использование браузера и requestAnimationFrame Аналогичный механизм, основные преимущества requestAnimationFrame по сравнению с setTimeout и setInterval: 1) requestAnimationFrame Все операции DOM в каждом кадре будут сосредоточены и завершены за одну перерисовку или перекомпоновку, а временной интервал перерисовки или перекомпоновки точно соответствует частоте обновления браузера. Вообще говоря, эта частота составляет 60 раз в секунду. 2) requestAnimationFrame не будет перерисовываться или перекомпоновываться в скрытых или невидимых элементах, что, конечно, означает меньшее использование процессора, графического процессора и памяти.
  • Принудительное аппаратное ускорение (проходить GPU для улучшения производительности анимации)
• Код относительно прост, и направление настройки производительности фиксировано.
• Для браузеров более ранних версий с низкой частотой кадров CSS3 может быть ухудшен естественным образом, в то время как JS требует написания дополнительного кода.

Причины, по которым CSSанимация работает гладко:

• Поток рендеринга делится на основной поток (main thread) и поток композитора (compositor thread).
• Если CSSанимация меняет только трансформацию и непрозрачность, то вся CSSанимация может быть наборщике тема завершена (и JSанимация будет в основной выполнение потока, а затем запустить наборщик для следующего шага).
• Когда JS выполняет какие-то дорогостоящие задачи, основной Тема занята, анимация CSS из-за использования композитора. Нить может оставаться гладкой.

• В основном потоке поддерживается дерево слоев (LayerTreeHost) и осуществляется управление TiledLayer.
• В потоке компоновщика (поток композитора) поддерживается один и тот же LayerTreeHostImpl и осуществляется управление LayerImpl. Содержимое двух деревьев находится в отношении копирования, поэтому они не мешают друг другу.
• Когда Javascript управляет LayerTreeHost в основном потоке, поток композитора может использовать LayerTreeHostImpl для рендеринга.
• Когда Javascript занят и основной поток зависает, процесс композитинга на экране также проходит гладко.
• Чтобы предотвратить зависание анимации, сообщения мыши и клавиатуры будут сначала передаваться в поток композитора, а затем в основной поток. Таким образом, когда основной поток занят, поток наборщика все равно может отвечать на некоторые сообщения.
• Например, когда мышь прокручивается, а основной поток занят, поток компоновщика также будет обрабатывать сообщение о прокрутке и прокручивать отправленную часть страницы (неотправленная часть будет закрашена).

Предположение, что CSSанимация более плавная, чем JS:

• JS выполняет некоторые дорогостоящие задачи
• В то же время CSSанимация не запускает верстку или отрисовку. Main требуется, когда отрисовка или макет запускаются CSSанимацией или JSанимацией. поток выполняет перерасчет дерева слоев. В это время CSSанимация или JSанимация заблокирует последующие операции.

Подведите итог:

• Если анимация — это просто переключатель состояний,Не требуется промежуточный контроль процесса,в этом случае,CSS-анимация является предпочтительным решением. Позволяет помещать логику анимации в файлы стилей.,Не заполняя свою страницу библиотекой Javascript.
• Проектирование сложного насыщенного клиентского интерфейса или разработка интерфейса со сложными состояниями пользовательского интерфейса. ПРИЛОЖЕНИЕ. тогда тебе следует использовать js анимация,Таким образом, ваша анимация останется продуктивной.,И ваш рабочий процесс становится более контролируемым.

Заявление об авторских правах: Содержание этой статьи добровольно предоставлено пользователями Интернета, а мнения, выраженные в этой статье, представляют собой только точку зрения автора. Этот сайт предоставляет только услуги по хранению информации, не имеет никаких прав собственности и не принимает на себя соответствующие юридические обязательства. Если вы обнаружите на этом сайте какое-либо подозрительное нарушение авторских прав/незаконный контент, отправьте электронное письмо, чтобы сообщить. После проверки этот сайт будет немедленно удален.

Издатель: Full Stack Programmer - User IM, укажите источник для перепечатки: https://javaforall.cn/181605.html Исходная ссылка: https://javaforall.cn