Анимация в мобильной разработке: что это, какие бывает и как использовать

Анимация в Android: Property Animation и View Animation

Android предоставляет две основные системы анимации: View Animation (устаревшая) и Property Animation (современная). View Animation (или Tween Animation) работает только с визуальным представлением — она меняет отображение View, но не его фактические свойства (например, координаты кликов остаются на месте). Property Animation, представленная в Android 3.0, изменяет реальные свойства объекта через Animator — ValueAnimator, ObjectAnimator или AnimatorSet.

ObjectAnimator и ValueAnimator

ObjectAnimator — самый популярный класс Property Animation. Он анимирует конкретное свойство объекта (например, translationX, alpha, scaleY) за указанное время с заданным Interpolator.

ObjectAnimator.ofFloat(myView, "translationX", 0f, 300f).apply {
    duration = 500
    interpolator = FastOutSlowInInterpolator()
    startDelay = 200
}.start()

ValueAnimator не привязан к конкретному объекту — он генерирует значения, которые можно использовать для любого свойства или кастомной логики.

View Animation и XML-анимации

View Animation описывается в XML-файлах res/anim/. Поддерживаются четыре типа: scale, translate, rotate, alpha. Недостаток — анимация не меняет реальные параметры View. Для простых эффектов (моргание, вращение) View Animation всё ещё применима, но для новых проектов рекомендуется Property Animation.

Анимация в Jetpack Compose

Jetpack Compose предлагает современный API анимации: animateAsState, Animatable, AnimatedVisibility и AnimatedContent. Анимация в Compose реактивна: при изменении состояния анимация запускается автоматически.

var expanded = remember { mutableStateOf(false) }
val size = animateAsState(
    if (expanded) 200f else 50f
)
Box(
    modifier = Modifier
        .size(size.value, size.value)
        .clickable { expanded = !expanded }
        .background(Color.Blue)
)

Анимация в iOS: Core Animation и UIView.animate

iOS предоставляет мощный стек анимации на основе Core Animation — низкоуровневого фреймворка, работающего с CALayer. UIKit надстраивает над Core Animation удобные методы UIView.animate и UIViewPropertyAnimator.

UIView.animate

UIView.animate — самый простой способ анимации в iOS. Позволяет анимировать frame, alpha, transform, backgroundColor и другие свойства UIView.

UIView.animate(
    withDuration: 0.5,
    delay: 0.2,
    usingSpringWithDamping: 0.6,
    initialSpringVelocity: 1.0,
    options: [.curveEaseInOut]
) {
    myView.frame.origin.x += 300
    myView.alpha = 0.5
}

UIKit Dynamics

UIKit Dynamics — фреймворк для физической анимации: гравитация, столкновения, пружины, силы притяжения. Позволяет создавать реалистичное поведение объектов без ручного расчёта физики. Используется для кастомных переходов, анимированных меню и игровых элементов.

CAAnimation и Core Animation

Core Animation (CAAnimation, CABasicAnimation, CAKeyframeAnimation) — низкоуровневый API для анимации CALayer. Поддерживает трёхмерные трансформации, анимацию пути (keyframe), маскирование и композицию. SwiftUI использует Core Animation под капотом через модификаторы animation и withAnimation.

let animation = CABasicAnimation(keyPath: "transform.rotation.z")
animation.fromValue = 0
animation.toValue = CGFloat.pi * 2
animation.duration = 1.0
animation.repeatCount = .infinity
myLayer.add(animation, forKey: "rotation")

Для большего числа проектов на iOS используется SwiftUI с его встроенной анимацией. Например, withAnimation блокируют изменения состояния в анимированный контекст.

Векторная анимация: Lottie и Rive

Сложные анимации (персонажи, переходы, лоадеры) сложно реализовать кодом. Lottie и Rive решают эту проблему, позволяя дизайнерам создавать анимацию в визуальных редакторах, а разработчикам — встраивать её в приложение как готовый компонент.

Lottie

Lottie — библиотека от Airbnb (ныне LottieFiles), которая отрисовывает анимации из Adobe After Effects, экспортированные в JSON-формат. Поддерживается на Android, iOS, Flutter, React Native и Web. Lottie-анимации векторные, масштабируются без потери качества и могут настраиваться программно (скорость, прогресс, цвета).

// Android
import com.airbnb.lottie.LottieAnimationView
val lottieView = findViewById<LottieAnimationView>(R.id.lottieView)
lottieView.setAnimation(R.raw.loading_animation)
lottieView.playAnimation()

Rive

Rive (ранее 2Dimensions) — более продвинутый инструмент для векторной анимации. В отличие от Lottie, Rive поддерживает интерактивную анимацию: состояния, триггеры, переходы. Анимация создаётся в Rive Editor, а в приложении управляется через State Machine. Rive подходит для игровых интерфейсов, анимированных иконок и сложных переходов с обратной связью.

В IT Sectr мы используем Lottie для декоративных анимаций (загрузчики, успешные операции, пустые состояния) и Rive — для интерактивных элементов onboarding-экранов. Это сокращает время разработки анимаций на 60% по сравнению с ручной реализацией на UIKit или Canvas.

Shared Element Transition и Hero Animation

Shared Element Transition — анимация, при которой элемент (изображение, текст, карточка) плавно перемещается и трансформируется при переходе между экранами. Это создаёт иллюзию непрерывности: пользователь не «переходит» на новый экран, а «проваливается» в элемент.

Android Shared Element Transition

В Android переход реализуется через ActivityOptionsCompat и атрибуты transitionName. FragmentTransaction поддерживает addSharedElement для переходов внутри Activity. Compose использует SharedTransitionLayout с SharedContentState.

iOS Hero Transition

В iOS нет встроенного Hero Transition, но библиотека Hero (от Luke Zhao) реализует этот паттерн на UIKit. Просто присвойте id элементам на обоих экранах — Hero автоматически создаст плавный переход. В SwiftUI анимация переходов встроена через NavigationStack и matchedGeometryEffect.

Flutter Hero

Flutter имеет встроенный виджет Hero с параметром tag. Когда две страницы содержат Hero с одинаковым tag, Flutter автоматически анимирует переход между ними. Это один из самых простых способов реализации сложной анимации в мобильном приложении.

Hero(
    tag: 'profile_avatar',
    child: CircleAvatar(
        backgroundImage: AssetImage('avatar.jpg'),
        radius: 50,
    ),
)

Spring Animation, Interpolator и Easing

Чтобы анимация выглядела естественно, используются кривые скорости — Interpolator в Android и Easing в iOS. Они определяют, как изменяется скорость анимации от начала до конца.

Android Interpolators

Android поддерживает несколько встроенных Interpolator: LinearInterpolator (равномерно), AccelerateDecelerateInterpolator (медленно-быстро-медленно), FastOutSlowInInterpolator (Material Design), OvershootInterpolator (с перелётом) и BounceInterpolator (с отскоком). Кастомный Interpolator можно создать через XML или класс TimeInterpolator.

Spring Animation

Spring Animation (пружинная анимация) моделирует физику пружины с параметрами damping (затухание) и stiffness (жёсткость). Damping 0 — бесконечные колебания, 1 — без колебаний. Stiffness определяет скорость возврата. Spring Animation доступна в iOS (UIViewPropertyAnimator с UISpringTimingParameters), Android (SpringAnimation из physics2) и SwiftUI (spring()).

Документация Spring Animation в Android содержит подробные примеры настройки.

Timeline-анимация

Timeline (временная шкала) — подход, при котором анимация разбивается на кадры во времени. Используется для сложных последовательностей, где AnimationSet или Group-анимация недостаточно гибки. Android поддерживает AnimatorSet, iOS — CAAnimationGroup, Flutter — Interval в AnimationController.