Высокопроизводительные анимации

  1. От DOM до пикселей в DevTools
  2. Свойства анимации макета
  3. Свойства анимации краски
  4. Стили, которые влияют на краску
  5. Анимация композитных свойств
  6. Императив против декларативной анимации
  7. Императив
  8. декларативный
  9. Заглядывая в будущее
  10. Заключение

Мы собираемся перейти прямо к погоне. Современные браузеры могут очень дешево анимировать четыре вещи: положение , масштаб , вращение и непрозрачность . Если вы оживляете что-то еще, это на свой страх и риск , и есть вероятность, что вы не получите гладкие и гладкие 60 кадров в секунду.

Если вы оживляете что-то еще, это на свой страх и риск , и есть вероятность, что вы не получите гладкие и гладкие 60 кадров в секунду

Посмотрите на это замедленное видео с одной и той же анимацией:

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

От DOM до пикселей в DevTools

При использовании временной шкалы Chrome DevTools вы должны увидеть шаблон, подобный следующему:

При использовании временной шкалы Chrome DevTools вы должны увидеть шаблон, подобный следующему:

Режим Chrome DevTools. Чем выше водопад вы начинаете, тем больше работы выполняет браузер.

Процесс, который проходит браузер, довольно прост: вычислить стили, которые применяются к элементам (стиль пересчета), сгенерировать геометрию и положение для каждого элемента (макет), заполнить пиксели для каждого элемента в слои (Paint Setup и Paint) и нарисуйте слои на экране (Composite Layers).

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

Свойства анимации макета

Когда вы изменяете элементы, браузеру может потребоваться сделать макет, который включает в себя вычисление геометрии (положение и размер) всех элементов, затронутых изменением. Если вы измените один элемент, возможно, потребуется пересчитать геометрию других элементов. Например, если вы измените ширину элемента <html>, это может повлиять на любого из его дочерних элементов. Из-за того, что элементы переполняются и влияют друг на друга, дальнейшие изменения вниз по дереву могут иногда приводить к вычислениям макета вплоть до самого верха.

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

Вот самые популярные свойства CSS что при изменении запускает макет:

Стили, которые влияют на макет

ширина высота отступ поля отображения границы ширина ширина верхней позиции размер шрифта float выравнивание текста переполнение-y переполнение шрифта слева семейство шрифтов line-height вертикальное выравнивание вправо очистить пробел дно min-height

Источник: http://goo.gl/lPVJY6

Свойства анимации краски

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

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

Стили, которые влияют на краску

цвет границы стиль видимости фон текст оформление фоновое изображение фоновое положение фоновый повтор повторение контурный цвет контурный стиль контурный радиус ширина границы контурная ширина box-shadow background-size

Источник: http://goo.gl/lPVJY6

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

Анимация композитных свойств

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

В браузерах Blink и WebKit новый слой создается для любого элемента, который имеет CSS-переход или анимацию на непрозрачность, но многие разработчики используют translateZ (0) или translate3d (0,0,0) для принудительного создания слоя вручную. Принудительное создание слоев гарантирует, что слой будет окрашен и готов к работе сразу после запуска анимации (создание и рисование слоя является нетривиальной операцией и может задержать начало анимации), а также отсутствие внезапное изменение внешнего вида из-за изменений сглаживания. Продвижение слоев должно быть сделано экономно, хотя; Вы можете перестараться и имея слишком много слоев может вызвать рывки ,

Изменение преобразования элемента сводится к изменениям его положения, поворота или масштаба. Часто положение анимируется путем установки левого и верхнего свойств. Проблема заключается в том, что, как показано выше, левая и верхняя обе операции запуска триггера, и это дорого Лучшее решение - использовать translate для элемента, который не вызывает компоновку.

Императив против декларативной анимации

Разработчикам часто приходится решать, будут ли они анимироваться с помощью JavaScript (обязательно) или CSS (декларативно). У каждого есть свои плюсы и минусы, поэтому давайте посмотрим:

Императив

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

Анимация в JavaScript дает вам много контроля: запуск, пауза, реверсирование, прерывание и отмена тривиальны. Некоторые эффекты, такие как параллакс прокрутка, может быть достигнуто только в JavaScript.

декларативный

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

Заглядывая в будущее

По мере развития веб-стандартов некоторые ограничения, связанные с анимацией, исчезнут. Есть предложение от Яна Воллика из Google, которое исследует концепцию JavaScript анимация через работников предоставление анимации не приводит к пересчету макета или стиля.

Для тех, кто заинтересован в более декларативном подходе к анимации, есть Спецификация веб-анимации , который Джейк Арчибальд много писал ,

Заключение

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

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

  • помутнение
  • переведите
  • вращаться
  • масштаб

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

Похожие

Сеть против центров безопасности: чем отличается NOC от SOC?
Джо Панеттьери • 13 июля 2017 г. Роландо Торрес Тысячи MSP (провайдеров управляемых услуг) уже имеют свои собственные NOC (центр управления сетью) или подключаются к сторонним NOC. Сейчас многие из этих МСП пытаются выяснить, нужен ли им SOC (центр безопасности). Но в чем истинная разница между NOC и SOC? Одно из лучших
7 вопросов, которые нужно задать, прежде чем запускать корпоративный блокчейн-проект
Блокстрим (источник: Gentlejack35 в Викискладе ) Мы только в начале истории блокчейна, а не в середине или в конце. Там нет недостатка активности и брожения. Если биткойн-блокчейн является проверкой концепции первого поколения, а блокчейн Ethereum - вторым, мы начинаем видеть блокчейны третьего
Avast против AVG против Avira: Какой лучший бесплатный антивирус?
... вирусов - и антивирусных программ - средний пользователь компьютера не может действительно много сделать для защиты от этих угроз. Антивирусные программы, подключенные к компьютеру, обычно мало что делают для защиты и более инвазивны, чем настоящие вирусы, с постоянными предупреждениями и советами пользователей по оплате обновления. Поэтому понятно, что пользователи, которые хотят с уверенностью просматривать и загружать файлы, ищут лучшие варианты защиты. Тем не менее, большое количество
Как сделать сайт интерактивным с событиями JavaScript
... свойства обработчика событий."; } // Добавить обработчик события как свойство элемента кнопки const button = document.querySelector ('button'); button.onclick = changeText; Примечание. Обработчики событий не следуют соглашению camelCase, которого придерживается большая часть кода JavaScript. Обратите внимание, что код включен, а не включен. При первой загрузке страницы браузер отобразит следующее:
Браузер Вбрасывание: Опера против Храброго против Вивальди
Рынок браузеров полон бесчисленных настольных и мобильных браузеров. опера , Храбрый , а также Vivaldi не так популярны, как Firefox или Chrome, но все они были созданы для удовлетворения конкретных потребностей пользователей . За исключением случаев, когда речь идет о спецификациях
Фирменное наименование - как создать что-то оригинальное?
Знаете ли вы, что названия популярных брендов, таких как Google, Apple и Coca-Cola, были созданы случайно? Представьте себе нескольких сотрудников в офисе, которые в течение нескольких часов пытаются придумать название компании. В результате их имя было вдохновлено ... математикой и ошибочным вводом одного из сотрудников! Так появился Google, хотя было много теорий об истории создания имен! Это было похоже на Twitter,
Dom Nad Wodospadem - проживание, гостиница, комнаты - Międzygórze
Добро пожаловать в наш дом, расположенный в самом сердце Судетских гор, у подножия Снежника. Семейное заведение приглашает Вас воспользоваться нашими номерами, баром и рестораном, где подают традиционные и нетрадиционные блюда .... В нашем заведении есть хорошо оборудованный конференц-зал на 50 человек, пивной сад и гриль с захватывающим видом на Вильчский водопад . У нас есть 2-, 3- и 4-местные номера с ванными комнатами и телевизором. Dom Nad
... впервые предоставили информацию, прошло не более 24 часов, и первая реакция уже появилась"> После того, ...
... впервые предоставили информацию, прошло не более 24 часов, и первая реакция уже появилась"> После того, как мы впервые предоставили информацию, прошло не более 24 часов, и первая реакция уже появилась. Напомним: новое лицо Розенека стало НОВОЙ ЛИЦОЙ AVON! (ТОЛЬКО С НАМИ) Неожиданно новый контракт для Малгонии решил прокомментировать
4 критических вопроса, которые нужно задать, прежде чем разрабатывать что-либо
Не всегда очевидно, в какие идеи стоит вкладывать время и ресурсы в строительство. Легко спешить во что-то, не останавливаясь, чтобы точно определить, кому нужен ваш продукт или дизайн. Но лучшие дизайнеры постоянно задают одни и те же вопросы, прежде чем что-то разрабатывать: какую проблему я решаю? Кто пользователь, которого я обслуживаю? Что этот пользователь хочет сделать? Что я хочу от них? Когда вы применяете строгие рамки, становится ясно, на какие идеи
Загрузка, установка, использование веб-браузера Lynx на основе командной строки в Ubuntu
Хотя графический пользовательский интерфейс (GUI) почти стал синонимом персональных компьютеров в наши дни, системы все еще существуют, которые предлагают только интерфейс командной строки (CLI). Даже если вы не используете эти системы на основе интерфейса командной строки, иногда, когда вы устраняете проблему, вам необходимо переключить систему в режим командной строки. Что делать, если есть необходимость доступа в Интернет, когда ваша система работает в режиме командной строки? Существуют
Microsoft Excel против Google Sheets: раскрытие таблицы
Каждый бизнес использует электронные таблицы. Годами, Майкрософт Эксель был очевидный выбор, но как программное обеспечение мигрирует в облако, Google Sheets появился как достойный противник. Некоторые из вещей, для

Комментарии

А теперь я спрошу по-другому: как насчет инструкций по охране труда и технике безопасности, которые содержат больше очков, чем упомянутые выше?
А теперь я спрошу по-другому: как насчет инструкций по охране труда и технике безопасности, которые содержат больше очков, чем упомянутые выше? Кроме того, есть в них, например, Общие комментарии; Основные условия безопасности; Запрещенные действия; Заключительные замечания. Многие производители на рынке используют расширенную структуру. Эти инструкции будут выполняться в соответствии с законом, поскольку в дополнение к 4 основным
11. Как насчет заказов, которые не были выполнены?
11. Как насчет заказов, которые не были выполнены? Не обработанные заказы можно отменить или повторить, связавшись со службой поддержки по телефону или идентификатору заказа. Средства за отмененные заказы автоматически возвращаются на баланс пользователя с возможностью повторного использования, или в случае клиентов по подписке отмененные заказы не включаются в расчет. В случае, если курьер прибывает после посылки, и она не будет подготовлена, заказ будет отменен, и вам придется подать
Или это были основные карты, которые снижают существующую производительность по более низким ценам?
Или это были основные карты, которые снижают существующую производительность по более низким ценам? Это был вопрос, который я, по общему признанию, должен был остановиться и задуматься. Но, в конце концов, настолько же увлекательным, как и высококлассные карты - и таким же увлекательным, как покупки в витринах, - мой ответ на этот вопрос заключался в том, что основные карты были более важными. Это основные карты, которые могут позволить себе больше игроков, и, судя по тенденциям продаж мониторов,
Какие устройства необходимы и каковы практические дополнения, которые оценят все сотрудники компании?
Какие устройства необходимы и каковы практические дополнения, которые оценят все сотрудники компании? Оборудование и аксессуары, из которых состоит оргтехника: ПК для офиса
Будут ли они классическими производственными компаниями или, вернее, интернет-компаниями, которые будут использовать традиционные заводы в качестве внешних мастерских?
Будут ли они классическими производственными компаниями или, вернее, интернет-компаниями, которые будут использовать традиционные заводы в качестве внешних мастерских? У Германии есть шанс выиграть этот бой и возглавить соревнование », - сказала Ангела Меркель недавно на Конгрессе Центрального союза электротехнической промышленности (ZVEI). Несмотря на риторику риторики, канцлер в то же время признал, что успех немецких компаний вовсе не уверен. И она была права.
И есть некоторые пользователи, которые случайно нажали кнопку обновления, и мы можем просто остановить этот процесс?
И есть некоторые пользователи, которые случайно нажали кнопку обновления, и мы можем просто остановить этот процесс? На самом деле, мы рекомендуем вам не делать этого. Неправильная работа всегда приводит к зависанию устройств iOS и другим проблемам iOS, например Отключите Wi-Fi при обновлении; Поднимите кабель USB во время зарядки iPhone. Остановить iPhone XS / XS Max / XR / X / 8/7/7 Plus / SE / 6s / 6 / 5s / 5, напоминание об обновлении может быть легкой задачей для
Вещей, которые нужно проверить перед покупкой Стоит ли Smart TV в 2017 году?
И есть некоторые пользователи, которые случайно нажали кнопку обновления, и мы можем просто остановить этот процесс? На самом деле, мы рекомендуем вам не делать этого. Неправильная работа всегда приводит к зависанию устройств iOS и другим проблемам iOS, например Отключите Wi-Fi при обновлении; Поднимите кабель USB во время зарядки iPhone. Остановить iPhone XS / XS Max / XR / X / 8/7/7 Plus / SE / 6s / 6 / 5s / 5, напоминание об обновлении может быть легкой задачей для
Ну, некоторые ноты, которые вы играете на открытых струнах, а не на ладу, то есть, по сути, вы играете по другому шаблону, верно?
Ну, некоторые ноты, которые вы играете на открытых струнах, а не на ладу, то есть, по сути, вы играете по другому шаблону, верно? Секрет в том, чтобы не играть неправильные ноты для какой-либо клавиши, заключается не столько в обучении весам, сколько в ноте, а в том, чтобы выучить шаблоны ладов. Когда вы играете соло или просто простые мелодии из одной ноты, эта концепция шаблонов обучения учит вас, какие позиции раздражения в отношении того, какие струны
Так каково будущее Windows 10 на телефонах?
Так каково будущее Windows 10 на телефонах? Довольно интересно, когда речь идет о технических проблемах, в том числе уже протестированных возможность запуска классических приложений на процессорах ARM , Что, если общее число пользователей Windows 10 на телефонах уже выражено в нескольких миллионах, и все указывает на то, что оно будет только ухудшаться? Alcatel Idol 4 Pro - последний анонсированный

Но в чем истинная разница между NOC и SOC?
Знаете ли вы, что названия популярных брендов, таких как Google, Apple и Coca-Cola, были созданы случайно?
Но лучшие дизайнеры постоянно задают одни и те же вопросы, прежде чем что-то разрабатывать: какую проблему я решаю?
Кто пользователь, которого я обслуживаю?
Что этот пользователь хочет сделать?
Что я хочу от них?
Что делать, если есть необходимость доступа в Интернет, когда ваша система работает в режиме командной строки?
А теперь я спрошу по-другому: как насчет инструкций по охране труда и технике безопасности, которые содержат больше очков, чем упомянутые выше?
11. Как насчет заказов, которые не были выполнены?
11. Как насчет заказов, которые не были выполнены?

Новости