Анимация в мобилната разработка: какво е, какви видове има и как да се използва

Анимация в 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. Поддържа 3D трансформации, анимация по път (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.