Уроки дизайна

Плавный свайп в After Effects

Покажем, как создать выразительную анимацию для приложения, которая в своё время вызвала большой интерес.

Эту анимацию мы впервые показали на Dribbble год назад и опубликовали исходный код на Swift в GitHub. Позже появились статьи о реализации похожего свайпа на React Native и Java.

Примером станет первое знакомство с приложением — онбординг. Именно его пользователь видит сначала, поэтому он помогает сразу привлечь внимание к продукту.

Анимация состоит из двух этапов. При движении пальца меняется кривая формы: мы экспортировали её из Figma в SVG и подобрали коэффициенты деформации. После отпускания форма колеблется по принципу пружинного маятника. Настройки пружины подбирали до совпадения с эффектом в After Effects.

Плавный свайп в After Effects — видео на YouTube

Есть идея?

Обсудим её