CSS и JS анимации

Завьялов Александр

CSS и JS анимации

Александр Завьялов

Доклад о том:

Основы

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

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

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

Композитинг

Jank («лаг»)

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

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

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

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

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

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

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

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

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

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

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

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

GPU Accelerated Compositing in Chrome

Слои

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

Paint

Composite

Слои

Условия создания слоя:

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

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

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

CSS анимации

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 анимации

JS анимации

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

JS анимации: GSAP

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

JS анимации

JS анимации: rAF

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

JS анимации: rAF

(xxx Hz)
(xxx ms)     

JS анимации

CSS vs JS

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

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

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

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

DevTools State of the Union

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

CSS и JS

Отдельный поток Контроль Синхронизация
CSS + * - +
JS - + +**

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

Еще варианты?

Web Animations

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

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. Поддержка

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 });
        

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

Анимируй с нами.
Анимируй как мы.
Анимируй лучше нас!
Завьялов Александр @ihannky