Animáció a mobilfejlesztésben: mi ez, milyen típusai vannak és hogyan használjuk

Animáció Androidon: Property Animation és View Animation

Az Android két fő animációs rendszert kínál: View Animation (örökölt) és Property Animation (modern). A View Animation (vagy Tween Animation) csak a vizuális megjelenítéssel működik — megváltoztatja a Nézet megjelenését, de nem a tényleges tulajdonságait (például a kattintási koordináták a helyükön maradnak). A Property Animation, amely az Android 3.0-ban jelent meg, az objektum valós tulajdonságait változtatja meg az Animator — ValueAnimator, ObjectAnimator vagy AnimatorSet segítségével.

ObjectAnimator és ValueAnimator

ObjectAnimator a Property Animation legnépszerűbb osztálya. Egy adott objektumtulajdonságot animál (például translationX, alpha, scaleY) meghatározott időtartam alatt egy adott Interpolator segítségével.

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

A ValueAnimator nincs egy adott objektumhoz kötve — értékeket generál, amelyek bármely tulajdonsághoz vagy egyedi logikához használhatók.

View Animation és XML animációk

View Animation XML fájlokban (res/anim/) írható le. Négy típus támogatott: scale, translate, rotate, alpha. Hátránya, hogy az animáció nem változtatja meg a Nézet valós paramétereit. Egyszerű effektekhez (villogás, forgatás) a View Animation még mindig alkalmazható, de új projektekhez a Property Animation ajánlott.

Animáció a Jetpack Compose-ban

A Jetpack Compose modern animációs API-t kínál: animateAsState, Animatable, AnimatedVisibility és AnimatedContent. A Compose-ban az animáció reaktív: amikor az állapot változik, az animáció automatikusan elindul.

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

Animáció iOS-en: Core Animation és UIView.animate

Az iOS egy hatékony animációs vermet biztosít a Core Animation alapján — egy alacsony szintű keretrendszer, amely a CALayer-rel dolgozik. A UIKit a Core Animation tetejére épül a kényelmes UIView.animate és UIViewPropertyAnimator metódusokkal.

UIView.animate

UIView.animate a legegyszerűbb módja az animációnak iOS-en. Lehetővé teszi a frame, alpha, transform, backgroundColor és más UIView tulajdonságok animálását.

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 — egy keretrendszer fizikai animációhoz: gravitáció, ütközések, rugók, vonzóerők. Lehetővé teszi valósághű objektumviselkedés létrehozását kézi fizikai számítás nélkül. Egyéni átmenetekhez, animált menükhöz és játékelemekhez használják.

CAAnimation és Core Animation

Core Animation (CAAnimation, CABasicAnimation, CAKeyframeAnimation) — egy alacsony szintű API a CALayer animációjához. Támogatja a 3D transzformációkat, útvonal animációt (keyframe), maszkolást és kompozíciót. A SwiftUI a Core Animation-t használja a motorháztető alatt az animation és withAnimation módosítók révén.

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

A legtöbb iOS projekt esetében a SwiftUI-t használják a beépített animációjával. Például a withAnimation állapotváltozásokat csomagol egy animált kontextusba.

Vektoros animáció: Lottie és Rive

Az összetett animációkat (karakterek, átmenetek, betöltők) nehéz kóddal megvalósítani. A Lottie és a Rive megoldja ezt a problémát azáltal, hogy lehetővé teszi a tervezők számára animációk készítését vizuális szerkesztőkben, a fejlesztőknek pedig kész komponensként történő beágyazását az alkalmazásba.

Lottie

Lottie — egy könyvtár az Airbnb-től (jelenleg LottieFiles), amely JSON formátumba exportált Adobe After Effects animációkat renderel. Támogatott Androidon, iOS-en, Flutterben, React Native-ben és Weben. A Lottie-animációk vektorosak, minőségveszteség nélkül méretezhetők és programozottan testreszabhatók (sebesség, haladás, színek).

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

Rive

Rive (korábban 2Dimensions) — egy fejlettebb eszköz vektoros animációhoz. A Lottie-val ellentétben a Rive támogatja az interaktív animációt: állapotok, triggerek, átmenetek. Az animáció a Rive Editorban készül, és az alkalmazásban egy State Machine segítségével vezérelhető. A Rive játékfelületekhez, animált ikonokhoz és összetett, visszajelzéssel ellátott átmenetekhez alkalmas.

Az IT Sectr-nél a Lottie-t dekoratív animációkhoz (betöltők, sikeres műveletek, üres állapotok) használjuk, a Rive-ot pedig az onboarding képernyők interaktív elemeihez. Ez 60%-kal csökkenti az animációk fejlesztési idejét a kézi UIKit vagy Canvas implementációhoz képest.

Shared Element Transition és Hero Animation

Shared Element Transition — olyan animáció, ahol egy elem (kép, szöveg, kártya) simán mozog és átalakul a képernyők közötti átmenet során. Ez a folytonosság illúzióját kelti: a felhasználó nem "megy" egy új képernyőre, hanem "belezuhan" az elembe.

Android Shared Element Transition

Androidon az átmenet az ActivityOptionsCompat és a transitionName attribútumok segítségével valósul meg. A FragmentTransaction támogatja az addSharedElement-t az Activity-n belüli átmenetekhez. A Compose a SharedTransitionLayout-ot használja a SharedContentState-vel.

iOS Hero Transition

Az iOS-nek nincs beépített Hero Transition-je, de a Hero könyvtár (Luke Zhao-tól) megvalósítja ezt a mintát UIKit-en. Egyszerűen rendeljen hozzá egy azonosítót a mindkét képernyőn lévő elemekhez — a Hero automatikusan létrehoz egy sima átmenetet. SwiftUI-ben az átmenet animáció beépített a NavigationStack és a matchedGeometryEffect segítségével.

Flutter Hero

A Flutter beépített Hero widget-tel rendelkezik egy tag paraméterrel. Amikor két oldal ugyanazzal a tag-vel rendelkező Hero-t tartalmaz, a Flutter automatikusan animálja a köztük lévő átmenetet. Ez az egyik legegyszerűbb módja az összetett animáció megvalósításának egy mobilalkalmazásban.

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

Spring Animation, Interpolator és Easing

Ahhoz, hogy az animáció természetesnek tűnjön, sebességgörbéket használnak — Interpolator-t Androidon és Easing-et iOS-en. Ezek határozzák meg, hogy az animáció sebessége hogyan változik az elejétől a végéig.

Android Interpolator-ok

Az Android több beépített Interpolator-t támogat: LinearInterpolator (egyenletes), AccelerateDecelerateInterpolator (lassú-gyors-lassú), FastOutSlowInInterpolator (Material Design), OvershootInterpolator (túllövéssel) és BounceInterpolator (pattogással). Egyéni Interpolator hozható létre XML vagy a TimeInterpolator osztály segítségével.

Spring Animation

Spring Animation (rugó animáció) a rugó fizikáját modellezi csillapítási (damping) és merevségi (stiffness) paraméterekkel. Csillapítás 0 — végtelen rezgések, 1 — nincs rezgés. A merevség határozza meg a visszatérés sebességét. Spring Animation elérhető iOS-en (UIViewPropertyAnimator UISpringTimingParameters-szel), Androidon (SpringAnimation a physics2-ből) és SwiftUI-ben (spring()).

A Spring Animation Androidon dokumentáció részletes konfigurációs példákat tartalmaz.

Idővonal animáció

Timeline (idővonal) — egy megközelítés, ahol az animáció időben keretekre van osztva. Összetett szekvenciákhoz használják, ahol az AnimationSet vagy a csoportos animáció nem elég rugalmas. Az Android támogatja az AnimatorSet-et, az iOS — a CAAnimationGroup-ot, a Flutter — az Interval-t az AnimationController-ben.