Perf css анимация против перехода - PullRequest
Новая
       66

Perf css анимация против перехода

0 голосов
/ 02 мая 2020

Мне бы хотелось знать, какие отличия от анимации css (ключевые кадры) от css перехода.

В моем тестировании, похоже, бывают ситуации, когда переход выполняется намного лучше, чем ключевые кадры. Эта статья также предлагает то же самое, но это с 2015 года, так что он может быть устаревшим https://www.pixelstech.net/article/1434375977-CSS3-animation-vs-CSS3-transition

Глядя на MDN https://developer.mozilla.org/en-US/docs/Web/Performance/CSS_JavaScript_animation_performance, в нем говорится "С точки зрения производительности , нет никакой разницы между реализацией анимации с CSS переходами или анимациями. Обе они классифицируются под одним и тем же зонтиком на основе CSS в этой статье. "

Так что я удивлен, увидев такое как разница в тестировании. Возможно, они одинаковы на firefox, но с использованием Chrome я определенно вижу разницу.

Я провел несколько тестов для CodeSandbox, чтобы показать анимацию с ключевыми кадрами и переходами. Вот некоторые важные факторы: 1. Я анимирую как transform, так и border-radius. Я знаю, что вы не должны анимировать радиус границы, но это часть теста. 2. Когда я объединил 2 теста в SPA и переключился между ними, они оба работали хорошо, так что это может быть связано с загрузкой страницы.

Чтобы просмотреть тест во всех его состояниях, выберите «средний уровень мобильного телефона». 'используя chrome инструменты разработчика.

  1. Джанки css анимация https://codesandbox.io/s/perf-test-css-animation-nl6xs

  2. Гладкая css переход https://codesandbox.io/s/perf-test-css-transition-fgd7w

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

Спасибо!

1 Ответ

0 голосов
/ 02 мая 2020

Похоже, что обе они должны быть довольно эффективными анимациями, поскольку они являются только составными изменениями (поскольку они анимируются в масштабе, что эффективно): https://csstriggers.com/transform

Я думаю, что проблема может быть тот факт, что ваш тест не является «честным» сравнением.

css анимация (ключевые кадры) : эта анимация происходит сразу в браузере клиента. Также он выполняет еще один код эмоции для keyframes.

css transition : эта анимация происходит, когда React завершил монтирование (как это было сделано на крюке useEffect) и не выполняет функцию keyframes.

Таким образом, первый тест css анимации (ключевые кадры) может быть выполнен с помощью React, отнимающего драгоценные ресурсы от анимации браузера, пока он завершает свои события жизненного цикла ,

Также дополнительный эмоционный вызов keyframes может замедлить его - он делает еще один css вызов https://github.com/emotion-js/emotion/blob/6cb8d15438b01b8623af42f304d5ea3032332187/packages/core/src/keyframes.js#L11, так что вы эффективно вызываете css дважды с тестом ключевых кадров.

Может быть лучше провести сравнение в простом HTML + CSS, чтобы React или JS не мешали и не создавали ложного впечатления, что одно лучше другого

...