какое количество кадров в секунду является стандартом в анимации

Что такое «частота кадров в секунду»? 24, 30 и 60 FPS

Разбираемся, от чего зависит и на что влияет кадровая частота в играх, кино и мультипликации.

Кадровая частота (англ. frame rate) — это количество кадров, сменяющих друг друга за секунду. В кино, анимации или видеоиграх термин зачастую используют, чтобы пояснить, насколько изображение получилось «плавным». Единица измерения такой частоты тоже есть — это буквально кадры в секунду (англ. frame per second, или FPS). Чем их больше, тем «плавнее» изображение: если для фильмов норма — 24 кадра в секунду, то в разговорах про игры обычно упоминают цифры от 30 до 60.

Это, впрочем, не предельные значения. Так, в классических мультфильмах Уолта Диснея кадровая частота — 12 FPS, но картинка всё равно достаточно «плавная», чтобы не раздражать зрителей, — всё благодаря приёмам аниматоров. А вот профессиональный киберспортсмен, играя на самом современном компьютере, вполне может увидеть до 300 кадров в секунду. Рассказываем, откуда такой разброс и что в этом «фреймрейте» важного.

Сценарист и копирайтер. Утверждает, что видел все фильмы и прошёл все игры, но редакция отказывается ему верить.

24 кадра в секунду

24 FPS — стандарт в кинематографе. Показатель, наиболее комфортный для зрителя.

Впервые частоту киносъёмки осознанно выбрали пионеры кинематографа — братья Люмьер. Она тогда составляла 16 кадров в секунду. Это был строгий расчёт — расход 35-миллиметровой киноплёнки составлял ровно один фут (0,3048 метра) в секунду.

Во времена немого кинематографа скорость показа фильма нередко превышала частоту съёмки. Киномеханик, который вращал ручку проектора, подбирал темп в зависимости от настроения фильма и «темперамента» публики — от 18 до 30 кадров в секунду.

Ситуация изменилась с появлением звукового кино. Поскольку разная скорость воспроизведения меняла частоту звука и голоса становились выше, американские кинокомпании задумались о стандарте фреймрейта. В 1926 году таким стандартом стал показатель в 24 FPS — создатели кино выбрали его как компромисс между «плавностью» картинки, расходом плёнки и возможностями техники. Как раз с этой частотой мы смотрим фильмы по сей день. Хотя исключения тоже бывают.

Кто-то снимает быстрее?

Современные режиссёры иногда проводят эксперименты с увеличением кадровой частоты, чтобы сделать изображение «плавнее» и тем самым усилить погружение. Один из самых известных примеров — «Хоббит» Питера Джексона, снятый с частотой 48 FPS.

Другой пример — фильм «Гемини» Энга Ли, снятый с частотой и вовсе 120 кадров в секунду.

Правда, чтобы увеличить в фильме кадровую частоту, вовсе не обязательно снимать его с высоким фреймрейтом — порой достаточно и современного телевизора с функцией «сглаживания движения» (англ. motion smoothing).

Дело в том, что частота обновления экрана у нынешних ТВ превышает общепринятую кадровую частоту кино — это может быть и 50 Гц против 24 FPS, и даже 120 Гц против тех же 24 кадров. Иногда это приводит к тому, что изображение начинает дёргаться и дрожать. Чтобы решить проблему, изобрели «сглаживание движения» — эта технология анализирует движение объектов и создаёт дополнительные кадры, будто бы заполняя ими «пустые» места.

Звучит здорово, однако на деле motion smoothing только портит изображение. Резкость картинки заметно увеличивается, порой возникают артефакты изображения, а естественная «смазанность» сцены, специально созданная режиссёром, становится едва заметной, сбивая фокус. И в результате возникает «эффект мыльной оперы».

По этой причине режиссёры и актёры выступают против технологии, называя её проклятием кинематографа. Хорошо, что пока это лишь опция, которую при желании можно просто отключить.

А что с кадрами в мультфильмах?

Сегодня во время съёмок кино оператор выставляет на камере нужную частоту. Всё сложнее, если речь идёт о мультипликации, ведь каждый кадр необходимо нарисовать вручную. По кадровой частоте анимация делится на несколько видов:

Чтобы снять 20 минут мультфильма в анимации вида 1s, необходимо нарисовать порядка 28 000 уникальных рисунков. Это весьма непростая задача, и потому мультипликаторы идут на всевозможные уловки, чтобы зритель не заметил недостающих кадров. Так, анимацию 1s чаще всего применяют только в активных сценах — например, если персонаж бежит.

Постепенно в создании анимации появились новые секреты. Первым работу мультипликаторов оптимизировал Уолт Дисней: ведущие художники сперва рисовали основные кадры (англ. keyframes), а после этого в дело вступали художники-фазовщики — они рисовали «промежуточные фазы движения»
(англ. in-between) и доводили анимацию до финального вида. Эти термины остаются актуальными для аниматоров и сегодня.

Для экономии кадров художники идут и на другие хитрости. Скажем, рисуют фон и на статичный рисунок накладывают прозрачные целлулоидные плёнки с подвижными элементами. А ещё аниматоры зацикливают кадры или же «раскладывают» персонажей и объекты в несколько слоёв — например, анимируют только губы на неподвижном лице.

В японской анимации — аниме — художники для упрощения своих задач зачастую пропускают промежуточные рисунки — фазовки. Из-за этого эмоции на лице персонажа меняются моментально.

В аниме также существует термин sakuga — это моменты, когда качество картинки возрастает и доходит до стандарта 1s. Приём используют для заставок, сюжетных поворотов или экшн-сцен.

Сколько кадров в видеоиграх?

Оптимальный фреймрейт в играх выше, чем в кино, — он начинается с 30 кадров в секунду. С точки зрения технологий кадровая частота в игровой индустрии работает иначе, нежели в кино, однако суть та же — чем больше FPS, тем лучше. Кроме того, именно счётчик FPS — главный показатель производительности той или иной игры.

Частота в 60 FPS обеспечивает куда более «плавное» изображение. Впрочем, важнее стабильная производительность. Высокий фреймрейт, который время от времени неожиданно «падает» до 35–45 кадров, игрок воспринимает хуже, чем стабильные 30 FPS. Любой такой сбой воспринимается как лаг, ведь мозг игрока «настраивается» на определённую кадровую частоту.

Кадровая частота игры во многом зависит от того, на какой платформе она запущена. Так, на ПК единственное ограничение в большинстве случаев — мощность «железа», которое может быть очень разным. Зачастую это вызывает дополнительные проблемы при оптимизации игры: сделать так, чтобы она работала одинаково на всех компьютерах, попросту невозможно — комбинаций «железа» слишком много.

При создании версий для игровых приставок, где установлены фиксированные комплектующие, ситуация немного проще — оптимизировать игру приходится под тот или иной «стандарт» (в зависимости от конкретной приставки). В этом случае, правда, возникает другая проблема: нередко мощности устройства не хватает для частоты в 60 кадров, и тогда разработчики искусственно ограничивают фреймрейт на отметке в 30 FPS. Это компромисс — низко, зато стабильно.

Правда, с появлением консолей нового поколения — Xbox Series X и PlayStation 5 — многие компании и студии при разработке стали целиться именно в 60 FPS, поскольку «железо» позволяет. По крайней мере, пока. Если верить рекламе, новые консоли способны выдавать и 120 FPS, но это, конечно, касается относительно «лёгких» с точки зрения графики игр.

«Мы никогда не пытались ограничить разработчиков в том, чего они пытаются добиться на нашей платформе, будь то 60 FPS на Xbox 360 или 4K и 60 FPS на Xbox One X. Мы хотим дать им инструменты для того, чтобы они создавали свои игры на любой из наших платформ. В поколении Xbox One X мы уже достигли момента, когда игры выглядят потрясающе, но у нас есть простор для того, чтобы сделать их ещё лучше. Я хочу, чтобы игры ощущались столь же здорово, как и выглядят. Думая о будущем, мы хотели сосредоточиться не только на количестве пикселей, но и на ощущениях от игр, которые обеспечивает высокий фреймрейт».

Фил Спенсер, глава Xbox.
Интервью, 2020 год

Похожего мнения придерживаются и разработчики, которые сотрудничают с Sony.

«Разрешения 4K достаточнo, его хватит надолгo. Но мне хочется вместо того, чтобы оставаться на уровне 60 кадров в секунду, поднять частоту до 120 или даже 240 кадров в секунду. Я думаю, это то, что изменит игры».

Кадзунори Ямаути, руководитель разработки серии Gran Turismo.
Интервью, 2020 год

И если в одиночных играх кадровая частота играет роль важную, но всё-таки не принципиальную, то в киберспорте высокий показатель FPS — залог успеха.

И не только он: ещё при подборе техники для соревнований профессиональные игроки учитывают частоту обновления экрана монитора. От неё зависит, как часто и быстро обновляется изображение на дисплее каждую секунду. Так, при частоте 60 Гц кадр меняется каждые 16 миллисекунд, при 144 Гц — каждые 6 миллисекунд.

Когда монитор обновляется с такой скоростью, разница не видна глазу, всё дело в мелкой моторике. После нескольких лет тренировок киберспортсмен в той же Counter-Strike: Global Offensive использует лишние 10 миллисекунд для более точного наведения прицела. Для реализации своего потенциала профессиональным игрокам необходима техника с максимальными характеристиками, даже несмотря на то, что упомянутая Counter-Strike — не слишком требовательная к «железу» игра.

Ещё один пример — Call of Duty: Black Ops — Cold War. Компания NVIDIA, которая выпускает видеокарты, в 2019 году провела исследование «фликшотов» — этим термином обозначают ситуации, когда игрок в шутере очень резко целится во врага и метко стреляет. В случае с Black Ops частота обновления 360 Гц улучшает качество стрельбы на 4% — по сравнению с монитором на 240 Гц. И этот небольшой перевес может оказаться решающим во время соревнования.

Источник

Как сделать UI-анимацию естественной и приятной глазу: физические законы в анимации интерфейсов на практике

Сейчас уже никого не удивишь топовыми продуктовыми практиками, каждая команда работает по одному и тому же алгоритму: UX-исследования, анализ рынка и стратегия на основе данных, совершенствование CJM, экраны в Figma и прототипы, релизы, A/B-тесты и выкручивание метрик.

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

Все это круто, но дико пресно. Пресно как суп без жирненькой курочки со специями. Да, эти дизайны работают, но все же у них нет никакого четкого, ясно осознаваемого вкуса, который хочется попробовать вновь. Но так, конечно же, не у всех. Есть команды, которые уровнем повыше. Как их найти?

Ещё больше статей о дизайне, а также полезные сервисы можно найти на ux-journal.ru

Попробуйте изучить список топ дизайнерских агентств, студий и результаты инхауз-команд у крупных брендов в нишах про деньги (банки), развлечения (Apple) и решение глобальных задач (Google/Yandex). Проанализируйте их портфель приложений и посчитайте долю проектов, в которых есть: уникальный характер, выраженный в графике и анимации из вселенной метафоры бренда.

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

Суть такова, что бездумно приправленный анимацией интерфейс не несет никакой ценности, так как анимация в нем живет своей жизнью, на своей волне и не делает сценарии приложения еще более полезными, удобными, приятными и вкусными.

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

По сути — это несколько быстро сменяющихся кадров, за счет которых создается иллюзия движения на картинке.

Количество кадров в секунду аниматоры называют частотой кадров (frame rate) или кадров в секунду (FPS). Человеческому глазу комфортна частота 24 кадра в секунду, чтобы анимация воспринималась плавно.

Для примера, на частоту кадров ваших CSS-анимаций сайтов влияет производительность браузера и железа. Возможно, вы когда-нибудь встречали подергивание анимации или подвисание на экране, так бывает когда компьютер загружен тяжелой работой, и в итоге ресурсов не хватает, и анимация играет с частотой ниже 24 FPS (некоторые дизайнеры при первых признаках такого тут же идут изучать характеристики нового iMac).

Еще один хороший пример применения анимации — игры. Игры лагают, когда ваш компьютер не может поддерживать их со скоростью 24 FPS, хотя большинство игроков настаивают на том, что все, что ниже 60 FPS, тормозит и лагает.

Тайминг (Timing) — это количество кадров, необходимое для перемещения объекта из A в B. Если мячику потребуется 5 секунд, чтобы упасть на землю, его анимированное время будет равно 120 кадрам (5 x 24 FPS).

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

Темп (Pacing) задает скорость, с которой происходит движение. Если ваша анимация будет слишком медленная, вы можете утомить пользователей или вызвать разочарование. Если же анимация будет слишком быстрая, пользователь может не уследить за ней, и не понять, где находится или что произошло.

Правильно подобранный транзишн (переход между экранами) помогает пользователям следить за изменениями интерфейса, не усложняя задачи. Главное, чтобы он был коротенький и не действовал на нервы.

Как мы знаем, большинство объектов в реальном мире обладает размером и весом. Эти величины влияют на центр тяжести, а он в свою очередь влияет на то, как объект движется и вращается.

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

Гравитация (Сила тяжести)

Гравитация — это сила притяжения объектов друг к другу. Она приковывает нас к планете, а также влияет на приливы. Это просто фатастика! Удивительная сила притяжения.

Мне кажется, на наши устройства действуют две гравитационные силы. Во-первых, сверху вниз по оси Y, а во-вторых, в глубину интерфейса по оси Z. Google одним из первых осознал, что наши устройства обладают глубиной, и основал большую часть философии Material Design на том, что они называют elevation (высота).

Такой подход вполне органично вписывается в нашу картину мира: в реальности мы не раз видели, как ведет себя предмет, когда его смахнули на ось Y. Выпадающие списки, поля выбора, аккордеоны — все эти элементы ведут себя вполне естественно.

С ним мы сталкиваемся ежедневно, когда движемся в пространстве и времени. Сопротивление может быть следствием гравитации, поверхностей или напряжений.

Сопротивление используется в UX-дизайне довольно часто. Отличным примером является 3D Touch от Apple (RIP), где интерфейс практически «сопротивляется» действию, пока вы не нажмете достаточно сильно. Это сопротивление заметно благодаря анимации, при этом иконка подсвечивается сильнее или слабее в зависимости от давления, которое вы оказываете.

Еще пример «Потяните, чтобы обновить» (pull-to-refresh) — так делают, когда пользователь должен потянуть интерфейс, чтобы получить свежий контент, тоже годится как пример с отличной реализацией принципа сопротивления. Пользователь должен потянуть вниз с некоторым сопротивлением (здесь, что задействована антигравитация?), пока не достигнет определенного предела, когда перезагружает страницу.

Действие и реакция (противодействие)

Всякое тело продолжает удерживаться в своём состоянии покоя или равномерного и прямолинейного движения, пока и поскольку оно не понуждается приложенными силами изменить это состояние.

Законы Ньютона удивительным образом связаны с UX в целом и анимацией в частности. Когда вы нажимаете кнопку, вы ожидаете реакцию. В некотором смысле гравитация принуждает вас двигать мышью, и кнопка реагирует, показывая эффект наведения курсора.

Действию всегда есть равное и противоположное противодействие.

Третий закон Ньютона особенно важен для создания анимации интерфейсах. Интерфейсы по своей природе реактивны — есть даже эта библиотека под названием React (или что-то в этом роде). Особенно, когда дело доходит до изменения данных, размера, цвета, фона и многого другого.

Роль анимации здесь заключается в создании визуальных подсказок, необходимых для информирования пользователя о том, где он находится и что делает. Когда пользователь нажимает, чтобы загрузить изображение, он ожидает увидеть какие-либо признаки (индикаторы) прогресса, неудачи или успеха.

Надеюсь вы уже понимаете, что не нужно добавлять анимации ради анимации. Т.е мы по-умолчанию ожидаем, что движение выльется в действие.

В 1981 году два аниматора студии Disney, Олли Джонстон и Фрэнк Томас, решили, что вся анимация состоит из двенадцати основных принципов. Эти принципы придерживаются законов физики, упомянутых ранее, и служат руководством для создания реалистичного движения.

Эти принципы применимы не только к мультфильму «Холодное сердце», но также пригодятся и для UX-дизайна и дизайну как таковому.

Вот все эти принципы вместе с лучшими примерами с Dribbble (в произвольном порядке).

В живом мире объекты податливы и тягучи — их форма меняется при взаимодействии с миром. Они могут сжиматься и растягиваться в зависимости от их состава. Точно так же наши интерфейсы могут сжиматься и растягиваться, когда с ними взаимодействуют. Вес и центр тяжести компонента не изменяются, а просто перемещаются.

Сжатие и растяжение — также полезный способ создания анимации с целью масштабирования.

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

Предвкушение также можно реализовать через полное отсутствие действия, например, драматическая пауза перед тем, как кошка набросится. Такой подход работать на предупреждение и применяться для привлечения внимания.

Подобным образом мы можем использовать небольшие анимации, чтобы подготовить наших пользователей. Эффекты наведения курсора — отличный пример этого, поскольку он указывает пользователю, что этот объект (например, кнопка) может выполнять большее действие.

Стейджинг включает в себя настройку сцены для выделения персонажей, объектов или событий. Это может быть сделано несколькими способами, например, при помощи освещения, музыки или движения камеры. Она может также использоваться, чтобы подготовить пользователя к действию.

Классическим примером принципа стейджинга в дизайне интерфейса является значок загрузки. Это не только улучшает ситуацию с техническими ограниченями, но также позволяет пользователю узнать, что «сцену» готовят для дела.

Кроме того, в дизайне загрузчика можно тоже учесть принцип стейджинга — такой подход поможет сформировать у пользователя представление о типе контента, который вот вот появится.

Скелетная/Каркасная загрузка страницы (Skeleton loading) — развитие иконки загрузчика, считается гораздо более удобным решением. «Скелет/Каркас» загружаемого контента показывается пользователю, а затем заполняется по мере загрузки контента.

Этот принцип определяет способ рисования анимации. Используя движение «прямо вперед», вы начинаете с первого кадра и рисуете каждый последующий кадр. Это часто приводит к гораздо большей реалистичности и плавности, поскольку вы контролируете каждое последующее действие.

Применяя такой принцип в рисовании, вы сначала отрисовываете на экране первый кадр, затем финальный кадр, и только потом заполняете промежуточные кадры.

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

Follow-through — это пружинящая анимация. Объект слегка перескакивает точку, на которой он должен остановиться, а потом возвращается обратно. Такой эффект помогает оживить анимации.

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

В результате один и тот же объект может состоять из частей, которые движутся с разными скоростями или вращаются под разными углами. Они также могут иметь разные уровни сопротивления из-за своего размера, который влияет на время, необходимое для ускорения или замедления.

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

Источник

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

Пользователи ожидают, что взаимодействие с интерфейсом будет плавным, а интерфейс будет отзывчивым. Анимация помогает улучшить восприятие приложения, сделав его быстрым и отзывчивым; но анимация так же может замедлить его и привести к зависаниям, если она сделана неумело. Отзывчивые интерфейсы должны иметь частоту смены кадров, равную 60 кадров в секунду (fps). В то время, как не всегда возможно поддерживать такую частоту, очень важно поддерживать быструю и устойчивую смену кадров для анимации.

Мы рассмотрим, как можно использовать инструменты браузера для инспектирования частоты смены кадров. Так же, мы обсудим некоторые подсказки, как организовать и поддерживать быструю и стабильную смену кадров.

Графики frame rate и waterfall из встроенных инструментов браузера дают информацию о том, как браузер выполняет работу по анимации. Используя эти инструменты, вы можете измерить fps приложения и диагностировать узкие места, в которых fps уменьшается.

С помощью CSS-анимации вы указываете ключевые кадры (keyframes), каждый из которых использует определённые CSS-свойства, чтобы определить внешний вид элемента в конкретный (ключевой) момент анимации. Браузер создаёт анимации с помощью плавных переходов от одного ключевого кадра к следующему.

Если сравнивать анимацию с помощью JavaScript и CSS, вы увидите, что CSS-анимации проще создать. Более того, CSS-анимации гарантируют лучшую производительность, так как они автоматически делегируют некоторые задачи браузеру. Например, в случае CSS браузер сам решает, когда нужно отрендерить кадр, а когда пропустить кадр, если это необходимо.

Этапы рендеринга

Процесс, используемый браузером для отображения анимации CSS-свойств, может быть представлен как последовательность этапов из следующего изображения:

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

Стоимость CSS-свойств

Свойства, не затрагивающие геометрию и позиционирование элементов, но не лежащие в отдельном слое, запускают только вычисление стилей и перерисовку, но не Layout.

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

Тип свойства	Стоимость	Примеры
Свойства, затрагивающие геометрию или позицию элемента, запускают весь процесс заново: новое вычисление стилей, layout и перерисовку.				transform opacity

На Веб-сайте CSS Triggers хорошо показано, какие CSS-свойства вызывают те или иные этапы обновления в разных браузерах.

Пример: margin против transform

Если вы хотите самостоятельно разобраться с этим примером, вы можете найти демо здесь. Демо выглядит так:

Так же на странице есть некоторое количество элементов со свойствами linear-gradient и box-shadow Мы обращаем внимание именно на эти два свойства, так как они относительно дорогие.

Так же существует видео-версия анализа и оптимизации этой страницы.

Анимация свойства margin

Оставим включённой опцию «Use margin» и начнём анимацию. В это же время откроем «Performance tool» и нажмём кнопку «записать» (make a recording). Нам понадобится лишь пара секунд записи.

Откройте первую запись. Точное содержимое, которое вы увидите, зависит от вашего устройства, системной нагрузки и окружения, но, в целом это должно выглядеть так:

На экране показаны три отдельных секции: (a) обзор этапов рендеринга (Waterfall), (b) частота кадров, и (c) детали на временной шкалы.

Обзор этапов рендеринга на временной шкале (Waterfall)

Частота кадров (Frame Rate)

Этапы рендеринга в деталях (Waterfall)

Оставшаяся часть записей показа в секции «Waterfall view». Если вы пролистаете этот список, вы увидите что-то наподобие этого:

Это шаги рендеринга (rendering waterfall). Для каждого кадра анимации мы вычисляем стили для каждого элемента, потом вычисляем Layout, а затем перерисовываем все элементы.

Анимация свойства transform

Теперь, переключитесь на «Use transform» и запишите новые данные. Это должно выглядеть примерно так:

Обзор этапов рендеринга на временной шкале (Waterfall)

В сравнении с версией, которая использует margin, мы видим намного меньше зелёного, но намного больше фиолетового цвета. Это говорит о том, что вместо paint мы теперь тратим ресурсы на этапы layout или style recalculation.

Частота кадров (Frame Rate)

В сравнении с версией, которая использует margin, показатели fps здесь выглядят достаточно хорошо. Средняя частота кадров близка к 60fps, а стабильность fps, за исключением падения fps в начале значительно выросла.

Этапы рендеринга в деталях (Waterfall)

В этой секции мы видим объяснения тому, что fps значительно улучшился. Мы больше не тратим время на layout и перерисовку элементов:

Источник