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?

Похожие статьи:
Оператор мобильной связи «Билайн» в преддверии празднования 23 февраля или 8 марта предалагает воспользоваться возможностью...
Японская компания Sony объявила о пополнении её линейки компактных камер новой моделью – Sony DSC-HX80, оснащенной объектов с...
Влада Ізраїлю з 29 березня 2022 року запроваджує «зелену доріжку» для біженців з України та росії, які працюють...
Мобільний оператор «Київстар» подав заявку до Антимонопольного комітету України на придбання Uklon. Угоду...
Запрошуємо спільноту пройти опитування щодо книжок на ІТ (й суміжну) тематику. Останній схожий рейтинг...
Яндекс.Метрика