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

  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-анимация, но без ограничений, но до тех пор планируйте свою анимацию так, чтобы она была гладкой и гладкой.

Новости

Социальные сети в России, зима 2015-2016 Цифры, тренды, прогнозы | Блог Brand Analуtics — все о бренд мониторинге и социальной аналитике
Представляем данные регулярного исследования активной аудитории социальных сетей в России, зима 2015-2016. В исследовании представлены данные по аудитории, возрасту, полу и региональному распределению

SMM маркетинг от А до Я
Развитие социальных сетей породило новую огромную бизнес отрасль — СММ маркетинг. Это когда мы приходим с нашим продуктом в какую-нибудь соцсеть, находим там нашу целевую аудиторию, и предлагаем ей наш

Полезно знать
20.02.2014 Что такое Pinterest. Визуальный PR и маркетинг Pinterest или ПИНТЕРЕСТ – социальная сеть, использующая вместо текстов картинки и изображения, которые можно добавлять в аккаунт,

Фейсбук Моя страница: ВХОД на свою страницу Facebook
Фейсбук (Facebook) Моя страница — это личная страница каждого зарегистрированного пользователя самой большой в мире социальной сети.  Фейсбук даёт возможность людям с разных уголков Земли общаться между

Анализ социальных сетей
АНАЛИЗ СОЦИАЛЬНЫХ СЕТЕЙ (social network analysis) - новое направление структурного подхода, основными целями которого являются исследование взаимодействий между социальными объектами и выявление условий

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

ВРЕДНОЕ ВЛИЯНИЕ СОЦИАЛЬНЫХ СЕТЕЙ НА ЗДОРОВЬЕ ЧЕЛОВЕКА - VI Студенческий научный форум (15 февраля - 31 марта 2014 года)
ВРЕДНОЕ ВЛИЯНИЕ СОЦИАЛЬНЫХ СЕТЕЙ НА ЗДОРОВЬЕ ЧЕЛОВЕКА Гущина Н. В., Люлина Н.В. С распространением всемирной паутины рост социальных сетей по всему миру стал глобальным явлением. С каждым

Влияние социальных сетей на подростков. Пропаганда суицида в сетях
Почему мы любим интернет? Почему молодым людям, подросткам сказать «Привет» стало проще, познакомившись в интернете, чем просто подойти в реальности? Почему все «сидят» в социальных сетях? Социальные сети

Маркетинг в социальных сетях (SMM) для продвижения компании
Деятельность в социальных сетях, на блогах и форумах по повышению лояльности клиентов получила название SMM — от аббревиатуры английского звучания этого термина – Social Media Marketing. Аудитория

Фейсбук (Facebook) - что это за сеть: как пользоваться ФБ
Фейсбук — это самая популярная и большая социальная сеть в мире. Если Вам интересно узнать больше о Facebook, про то как пользоваться сетью и о некоторых «фишках» ФБ — этот материал именно для вас!