Animace v mobilním vývoji: co to je, jaké jsou typy a jak je používat

Animace v Android: Property Animation a View Animation

Android poskytuje dva hlavní animační systémy: View Animation (zastaralý) a Property Animation (moderní). View Animation (neboli Tween Animation) pracuje pouze s vizuální reprezentací — mění zobrazení Pohledu, ale ne jeho skutečné vlastnosti (například souřadnice kliknutí zůstávají na místě). Property Animation, představená v Android 3.0, mění reálné vlastnosti objektu pomocí Animator — ValueAnimator, ObjectAnimator nebo AnimatorSet.

ObjectAnimator a ValueAnimator

ObjectAnimator je nejoblíbenější třída Property Animation. Animuje konkrétní vlastnost objektu (například translationX, alpha, scaleY) po určenou dobu s daným Interpolatorem.

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

ValueAnimator není vázán na konkrétní objekt — generuje hodnoty, které lze použít pro jakoukoli vlastnost nebo vlastní logiku.

View Animation a XML animace

View Animation je popsána v XML souborech res/anim/. Podporovány jsou čtyři typy: scale, translate, rotate, alpha. Nevýhodou je, že animace nemění reálné parametry Pohledu. Pro jednoduché efekty (blikání, otáčení) je View Animation stále použitelná, ale pro nové projekty se doporučuje Property Animation.

Animace v Jetpack Compose

Jetpack Compose nabízí moderní API pro animace: animateAsState, Animatable, AnimatedVisibility a AnimatedContent. Animace v Compose je reaktivní: když se změní stav, animace se spustí automaticky.

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)
)

Animace v iOS: Core Animation a UIView.animate

iOS poskytuje výkonný animační stack založený na Core Animation — nízkoúrovňovém frameworku pracujícím s CALayer. UIKit staví na Core Animation s pohodlnými metodami UIView.animate a UIViewPropertyAnimator.

UIView.animate

UIView.animate je nejjednodušší způsob animace v iOS. Umožňuje animovat frame, alpha, transform, backgroundColor a další vlastnosti 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 — framework pro fyzikální animaci: gravitace, kolize, pružiny, přitažlivé síly. Umožňuje vytvářet realistické chování objektů bez ručního výpočtu fyziky. Používá se pro vlastní přechody, animovaná menu a herní prvky.

CAAnimation a Core Animation

Core Animation (CAAnimation, CABasicAnimation, CAKeyframeAnimation) — nízkoúrovňové API pro animaci CALayer. Podporuje 3D transformace, animaci cesty (keyframe), maskování a kompozici. SwiftUI používá Core Animation pod kapotou prostřednictvím modifikátorů animation a 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")

Pro většinu iOS projektů se používá SwiftUI s jeho vestavěnou animací. Například withAnimation obaluje změny stavu do animovaného kontextu.

Vektorová animace: Lottie a Rive

Složité animace (postavy, přechody, načítače) je obtížné implementovat kódem. Lottie a Rive řeší tento problém tím, že umožňují designérům vytvářet animace ve vizuálních editorech a vývojářům je vkládat do aplikace jako hotovou komponentu.

Lottie

Lottie — knihovna od Airbnb (nyní LottieFiles), která vykresluje animace z Adobe After Effects exportované ve formátu JSON. Podporována na Android, iOS, Flutter, React Native a Web. Lottie animace jsou vektorové, škálují se bez ztráty kvality a lze je programově přizpůsobit (rychlost, průběh, barvy).

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

Rive

Rive (dříve 2Dimensions) — pokročilejší nástroj pro vektorovou animaci. Na rozdíl od Lottie, Rive podporuje interaktivní animaci: stavy, spouštěče, přechody. Animace se vytváří v Rive Editor a v aplikaci se ovládá pomocí State Machine. Rive je vhodný pro herní rozhraní, animované ikony a složité přechody se zpětnou vazbou.

V IT Sectr používáme Lottie pro dekorativní animace (načítače, úspěšné operace, prázdné stavy) a Rive pro interaktivní prvky onboardingových obrazovek. To zkracuje dobu vývoje animací o 60% ve srovnání s ruční implementací na UIKit nebo Canvas.

Shared Element Transition a Hero Animation

Shared Element Transition — animace, při které se prvek (obrázek, text, karta) plynule pohybuje a transformuje při přechodu mezi obrazovkami. To vytváří iluzi kontinuity: uživatel "nepřechází" na novou obrazovku, ale "propadává se" do prvku.

Android Shared Element Transition

V Android je přechod implementován pomocí ActivityOptionsCompat a atributů transitionName. FragmentTransaction podporuje addSharedElement pro přechody v rámci Activity. Compose používá SharedTransitionLayout s SharedContentState.

iOS Hero Transition

iOS nemá vestavěný Hero Transition, ale knihovna Hero (od Luke Zhao) implementuje tento vzor na UIKit. Jednoduše přiřaďte id prvkům na obou obrazovkách — Hero automaticky vytvoří plynulý přechod. V SwiftUI je přechodová animace vestavěna přes NavigationStack a matchedGeometryEffect.

Flutter Hero

Flutter má vestavěný widget Hero s parametrem tag. Když dvě stránky obsahují Hero se stejným tagem, Flutter automaticky animuje přechod mezi nimi. To je jeden z nejjednodušších způsobů implementace složité animace v mobilní aplikaci.

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

Spring Animation, Interpolator a Easing

Aby animace vypadala přirozeně, používají se křivky rychlosti — Interpolator v Android a Easing v iOS. Určují, jak se rychlost animace mění od začátku do konce.

Android Interpolators

Android podporuje několik vestavěných Interpolatorů: LinearInterpolator (rovnoměrně), AccelerateDecelerateInterpolator (pomalu-rychle-pomalu), FastOutSlowInInterpolator (Material Design), OvershootInterpolator (s přestřelem) a BounceInterpolator (s odskokem). Vlastní Interpolator lze vytvořit pomocí XML nebo třídy TimeInterpolator.

Spring Animation

Spring Animation (pružinová animace) modeluje fyziku pružiny s parametry tlumení (damping) a tuhosti (stiffness). Tlumení 0 — nekonečné oscilace, 1 — bez oscilací. Tuhost určuje rychlost návratu. Spring Animation je k dispozici v iOS (UIViewPropertyAnimator s UISpringTimingParameters), Android (SpringAnimation z physics2) a SwiftUI (spring()).

Dokumentace Spring Animation v Android obsahuje podrobné příklady konfigurace.

Časová osa animace

Timeline (časová osa) — přístup, kdy je animace rozdělena na snímky v čase. Používá se pro složité sekvence, kde AnimationSet nebo skupinová animace nejsou dostatečně flexibilní. Android podporuje AnimatorSet, iOS — CAAnimationGroup, Flutter — Interval v AnimationController.