Анімація в мобільній розробці: що це, які бувають види та як використовувати

Анімація в 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.