CSS и JS анимации

Доклад о том:

• как браузеры реализуют анимации
• что такое композитный слой и зачем знать о его существовании
• в чем различия между CSS и JS анимациями
• какие инструменты помогут создать нужные эффекты
• почему некоторые анимации тормозят
• как Chrome DevTools позволяет управлять и профилировать анимации

Основы

• FPS (50...60)
• Новый кадр каждые ~16.6ms
• На что тратится время:
  

  Перерасчет стилей

  Компоновка

  Растеризация

  Композитинг

Перерасчет стилей

• Парсинг HTML (DOM)
• Парсинг CSS (CSSOM)
• DOM + CSSOM = RenderTree

Меняем CSS, браузер пересчитывает CSSOM

Растеризация

Композитинг

• Битмап - растровая картинка
• Вывод конечного изображения на экран

Jank («лаг»)

Меньше работы браузера - больше FPS

• jQuery анимация цвета фона

• CSS анимация opacity

Давным давно... один поток рендера

1. Визуализация страницы на CPU
2. Основной поток (main thread)

Сейчас. Два потока рендера

1. Визуализация с помощью видеокарты (GPU)
2. Основной поток (main thread)
3. Поток композитора (compositor thread)

Основной поток

• JS
• Перерасчет стилей
• Компоновка
• Растеризация (создание битмапа)
• Отправка битмапа в поток композитора

Основной поток может быть недоступен пользователю!

Поток композитора

• Сохранение битмапа
• Вывод на экран
• Композитинг при скроллинге

Всегда поддерживает заданную дисплеем частоту обновления экрана!

Ускоренный композитинг на видеокарте

1. Страница делится на слои
2. Слои растеризуются в битмапы
3. Битмапы загружаются в GPU
4. Compositor инструктирует GPU, как собрать конечное изображение

Ускоренный композитинг на видеокарте

GPU Accelerated Compositing in Chrome

Слои

Слой (композитный слой) - часть страницы, поддерево DOM. Отрисовывается независимо, компонуется в GPU. Может растягиваться, перемещаться, скрываться (через прозрачность) без отрисовки.

Paint

Composite

Слои

• 3D transform transform: translateZ(0)
• <video> с включенным h/a
• <canvas> с 3D или 2D с включенным h/a
• плагины (flash, silverlight)
• css анимации opacity или transform
• css фильтры
• элементы, вынесенные над композитным слоем

Слои для анимаций. Дружелюбный CSS

• Opacity
• Transform
• Filter

Все остальные могут вызвать обновление текстур

Хотите знать больше?

CSS анимации

• Keyframes
• Transitions

CSS анимации

• Просты

CSS анимации

            .b-red {}
            .b-red:hover {
             transform: rotate(360deg);
             transition: transform 1s;
            }
            

        

            .b-yellow:hover {
             animation: 1s rotate;
            }
            @keyframes rotate {
             to { transform: rotate(360deg); }
            }
        

CSS анимации

• Просты
• Свободны от основного потока
• Синхронизируются с частотой обновления экрана
• Неконтролируемые: только пауза и запуск
• Рассинхронизация

JS анимации

• jQuery
• Velocity
• GreenSock
• Canvas
• WebGL

JS анимации

• Полный контроль

JS анимации: GreenSock (GSAP)

• pause()
• play()
• seek()
• reverse()
• ratio()
• callback paradise (start, update, finish etc)
• tween, timeline
• plugins: css, svg, canvas

JS анимации: GSAP

            var tween = TweenLite.to(logo, 3, {
             left:"600px", rotation:"360deg", ease:Linear.easeNone });
        

JS анимации

• Полный контроль
• Синхронизируются с частотой обновления экрана

JS анимации: rAF

• window.requestAnimationFrame(callback)
• вызывается в момент обновления кадра на экране

                        function animate() {
                          ...do smth...
                          setTimeout(animate, 16);
                        }
                        animate();
                    

                        function animate() {
                          ...do smth...
                          requestAnimationFrame(animate);
                        }
                        animate();
                    

JS анимации: rAF

• синхронизация

• экономия ресурсов

JS анимации

• Полный контроль
• Синхронизируются с частотой обновления экрана
• Забивают основной поток

Производительность

Сравнение производительности анимаций CSS/JS
FPS при CSS анимациях замеряется нативным счетчиком FPS

Результат: CSS обеспечивает больший FPS и меньшую загруженность основного потока

Инструменты для профилирования

• chrome://inspect (подключение мобильных)
• Сhrome dev tools
  • frame layer (просмотр слоев)
  • paint debugger (процесс растеризации)
  • animations (контроль анимаций)
  • easing editor (редактирование типа анимации)

DevTools State of the Union

Инструменты для профилирования. Скоро

CSS и JS

* при анимации opacity, transform
** при использовании rAF

Web Animations

• Собственный поток (как в CSS)
• Полный контроль (как в JS)

Спецификация

Web Animations. Синтаксис

            var player = element.animate([
             {cssProperty: value0},
             {cssProperty: value1},
             {cssProperty: value2},
            //...
            ], {
             duration: timeInMs,
             iterations: iterationCount,
             delay: delayValue
            });
        

Web Animations. Синтаксис

            var animation = new Animation(target,
             [{transform: 'translateX(0)'}, {transform: 'translateX(240px)'}], 1000);
            var player = document.timeline.play(myAnimation);
            ...
            player.play();
            player.pause();
            player.finish();
            player.reverse();
            player.seek();
        

Web Animations. Поддержка

• Активная работа над стандартом
• Частичная поддержка в Chrome и FF (включение через флаги)
• Полифил: web-animations-js

Web Animations и GSAP

            // Web Animations
            var animation = new Animation(element, {"transform": "translate(100px, 200px)"}, 1500);
            // GSAP
            var animation = TweenMax(element, 1.5, { x: 100, y: 200 });
        

• GSAP - абстракция
• Поддержка старых браузеров, независимый transform, плагины и др.
• В будущем Web Animations под капотом GSAP

Подход к выбору методики