Веб-анимации в деталях

Всем Салют!

Меня зовут Алексей

Я веселый Front-end разработчик

Я верстаю сайты

и преподаю в

Зачем анимировать веб
Как работает анимация в браузере:
заглянем под капот
Методы анимации в вебе: CSS, JS, SVG
Какой метод анимации выбрать
Как правильно анимировать

О чем лекция

Зачем нам анимировать ВЕБ?

ФАКТЫ

ФАКТ 1

Красота сайта равна его удобству, реальной или потенциальной пользе для посетителя.

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

ФАКТ 2

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

ФАКТ 3

Интернет интегрирован в повседневную жизнь.

Мы ориентируемся на сайтах не хуже, чем в реальном мире.

Особенности виртуальности стали очевидными, как-будто так было всегда.

ЗАЧЕМ ЭТО НУЖНО?

Мы живем в реальном мире
Природность использования веба
Анимация - это часть хорошего UI
Запоминаемость вашего сайта
Это весело! ( не забываем про веселье :)

Анимация как часть интерфейса

Сравните эти два примера

Резкие изменения сложны для понимания пользователя.

Движение создает понимание

Но "напихав" кучу анимации, все не будет хорошо

Заглянем "под капот"

или

"В поисках утраченных FPS"

ЛАГ
(Jank)

Встречайте

(плохой парень)

JankFree.org

60

frames per second

16.7

ms per frame

Jank («лаг»)

Что делает браузер "за кулисами"

LOADING RENDERING PAINTING DISPLAYING

LOADING

RENDERING

Layout - компоновка

высчитывается геометрия
width/height, position и др

PAINTING

RENDERER PROCESS

MAIN THREAD

RASTER THREADS

COMPOSITOR THREAD

GPU PROCESS

GPU THREAD

DISPLAYING

УСПЕХ! *

Хорошая новость

LOADING RENDERING PAINTING DISPLAYING

RENDERING PAINTING DISPLAYING

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

больше FPS

REFLOWS

width
height
margin
padding
top
bottom
left
right
font-size
and more...

вызывается при

изменении геометрии

REPAINTS

color
background-color
box-shadow
background-position
border-radius
and more...

принуждают пиксели

перерисовываться

GPU ACCELERATED

transform filter* opacity

*за исключением blur и drop-shadow

IT'S DEMO TIME!

http://animation-workshop.herokuapp.com/

IT'S DEMO TIME!

http://animation-workshop.herokuapp.com/

РЫБНАЯ ВЕЧЕРИНКА!

x 1000

Это все можно глянуть на мобильном

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

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