21 октября, Киев — Мастер-класс "Web Animations — taking performance to the edge", SmartMe University
Организатор: SmartMe University
Тренер: Швайка Алексей
Интерфейс становится плоским, а это означает что нужно находить новый тип интерактивного взаимодействия. Если раньше «глубину» и реалистичность элемента мог обеспечить скевоморфизм — объёмные кнопки, тени и текстуры, то при плоском дизайне такую роль исполняет анимация. В тренде уменьшение количества страниц (переходов) для выполнения конкретного действия. И тут огромную роль играет анимация. Мы можем прятать элементы по необходимости и использовать многослойность. Все для того, чтобы пользователь совершил все необходимые действия на одной странице.
На практике же случается так, что одни анимации проигрываются плавно, а другие — нет. Почему так происходит, почему теряются кадры, почему возникают «тормоза» на мобильных устройствах и как работают современные браузеры (repaint, reflow, composite, GPU acceleration) — эти вопросы мы подробно рассмотрим на мастер-классе. Также поговорим о новом способе управлениями анимациями — Web Animations API 1.0.
Уровень:
— Senior.
Что необходимо для участия в мастер-классе:
— умение верстать;
— хорошее понимание CSS3 transitions/animations;
— продвинутое знание Vanilla JS (ES6).
О тренере
Швайка Алексей
(Front End Engineer at Hackraft)
Спикер на многочисленных конференциях и митапах, ECMAScript theorist, активный участник dev-ua комьюнити, ментор и консультант.
План мастер-класса:
1. Как работают браузеры:
● Высокоуровневая архитектура браузера (вкладки, процессы)
● Парсинг HTML/CSS и построение DOM/CSSOM
● Построение RenderTree
2. Контекст наложения:
● Как работает z-index
● Stacking context edge cases
● Когда можно обойтись без z-index
● RenderLayer и RenderObject
3. Layout (reflow):
● Dirty bit system
● Глобальный и инкрементальный layout
● Синхронный и асинхронный layout
4. Paint:
● Глобальный и инкрементальный paint
● Порядок paint
● Blink Slimming Paint
5. Composite:
● Graphics terminology
● Blink compositor
● The GPU Process
● The Threaded Compositor
● Software compositor
6. Способы анимирования:
● CSS animation/transition
● SVG Animations (SMIL) и когда они нужны
● Почему requestAnimationFrame?
7. Web Animations API 1.0:
● AnimationPlayer и Timeline
● GroupEffects и SequenceEffects
● Motion Paths
8. Отладка анимаций:
● Chrome DevTools: FPS meter, composited layer borders, paint
● Firefox Developer Tools
9. GPU ускоренные анимации:
● GraphicsLayer и GraphicsContext
● Какие анимации работают быстро
● will-change и другие способы «активации» GraphicsLayer
● Чего следует опасаться при использовании GPU слоев
10. Обзор типичных проблем производительности:
● Как ограничиться лишь быстрыми анимациями
● Производительные аналоги border-color, background-{color,size,position}
● Are SVG filters fast yet?
.
