Animatie in mobiele ontwikkeling: wat het is, welke typen en hoe te gebruiken

Animatie in Android: Property Animation en View Animation

Android biedt twee belangrijke animatiesystemen: View Animation (verouderd) en Property Animation (modern). View Animation (of Tween Animation) werkt alleen met visuele weergave — het verandert de weergave van de View maar niet de werkelijke eigenschappen (bijvoorbeeld blijven klikcoördinaten op hun plaats). Property Animation, geïntroduceerd in Android 3.0, wijzigt echte objecteigenschappen via Animator — ValueAnimator, ObjectAnimator of AnimatorSet.

ObjectAnimator en ValueAnimator

ObjectAnimator is de populairste klasse van Property Animation. Het animeert een specifieke objecteigenschap (bijvoorbeeld translationX, alpha, scaleY) gedurende een bepaalde tijd met een bepaalde Interpolator.

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

ValueAnimator is niet gebonden aan een specifiek object — het genereert waarden die kunnen worden gebruikt voor elke eigenschap of aangepaste logica.

View Animation en XML-animaties

View Animation wordt beschreven in XML-bestanden res/anim/. Vier typen worden ondersteund: scale, translate, rotate, alpha. Het nadeel is dat de animatie de werkelijke View-parameters niet wijzigt. Voor eenvoudige effecten (knipperen, draaien) is View Animation nog steeds toepasbaar, maar voor nieuwe projecten wordt Property Animation aanbevolen.

Animatie in Jetpack Compose

Jetpack Compose biedt een moderne animatie-API: animateAsState, Animatable, AnimatedVisibility en AnimatedContent. Animatie in Compose is reactief: wanneer de status verandert, start de animatie automatisch.

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

Animatie in iOS: Core Animation en UIView.animate

iOS biedt een krachtige animatiestack gebaseerd op Core Animation — een low-level framework dat werkt met CALayer. UIKit bouwt voort op Core Animation met handige UIView.animate- en UIViewPropertyAnimator-methoden.

UIView.animate

UIView.animate is de eenvoudigste manier om te animeren in iOS. Maakt het mogelijk om frame, alpha, transform, backgroundColor en andere UIView-eigenschappen te animeren.

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 — een framework voor fysieke animatie: zwaartekracht, botsingen, veren, aantrekkingskrachten. Maakt het mogelijk realistisch objectgedrag te creëren zonder handmatige fysicaberekening. Gebruikt voor aangepaste overgangen, geanimeerde menu's en spelelementen.

CAAnimation en Core Animation

Core Animation (CAAnimation, CABasicAnimation, CAKeyframeAnimation) — een low-level API voor CALayer-animatie. Ondersteunt 3D-transformaties, padanimatie (keyframe), maskeren en compositie. SwiftUI gebruikt Core Animation onder de motorkap via de modifiers animation en 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")

Voor de meeste iOS-projecten wordt SwiftUI met zijn ingebouwde animatie gebruikt. Bijvoorbeeld, withAnimation omhult statuswijzigingen in een geanimeerde context.

Vectoranimatie: Lottie en Rive

Complexe animaties (personages, overgangen, laders) zijn moeilijk te implementeren met code. Lottie en Rive lossen dit probleem op door ontwerpers in staat te stellen animaties te maken in visuele editors en ontwikkelaars ze als kant-en-klaar onderdeel in de app in te embeden.

Lottie

Lottie — een bibliotheek van Airbnb (nu LottieFiles) die animaties uit Adobe After Effects weergeeft, geëxporteerd in JSON-formaat. Ondersteund op Android, iOS, Flutter, React Native en Web. Lottie-animaties zijn vector-gebaseerd, schalen zonder kwaliteitsverlies en kunnen programmatisch worden aangepast (snelheid, voortgang, kleuren).

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

Rive

Rive (voorheen 2Dimensions) — een geavanceerder hulpmiddel voor vectoranimatie. In tegenstelling tot Lottie ondersteunt Rive interactieve animatie: toestanden, triggers, overgangen. Animatie wordt gemaakt in Rive Editor en in de app aangestuurd via een State Machine. Rive is geschikt voor game-interfaces, geanimeerde pictogrammen en complexe overgangen met feedback.

Bij IT Sectr gebruiken we Lottie voor decoratieve animaties (laders, succesvolle operaties, lege toestanden) en Rive voor interactieve elementen van onboarding-schermen. Dit vermindert de ontwikkeltijd van animaties met 60% in vergelijking met handmatige implementatie met UIKit of Canvas.

Shared Element Transition en Hero Animation

Shared Element Transition — een animatie waarbij een element (afbeelding, tekst, kaart) soepel beweegt en transformeert bij de overgang tussen schermen. Dit creëert de illusie van continuïteit: de gebruiker "gaat" niet naar een nieuw scherm, maar "valt" in het element.

Android Shared Element Transition

In Android wordt de overgang geïmplementeerd via ActivityOptionsCompat en transitionName-attributen. FragmentTransaction ondersteunt addSharedElement voor overgangen binnen een Activity. Compose gebruikt SharedTransitionLayout met SharedContentState.

iOS Hero Transition

iOS heeft geen ingebouwde Hero Transition, maar de bibliotheek Hero (door Luke Zhao) implementeert dit patroon op UIKit. Ken eenvoudig een id toe aan elementen op beide schermen — Hero maakt automatisch een vloeiende overgang. In SwiftUI is de overgangsanimatie ingebouwd via NavigationStack en matchedGeometryEffect.

Flutter Hero

Flutter heeft een ingebouwde Hero-widget met een tag-parameter. Wanneer twee pagina's Hero met dezelfde tag bevatten, animeert Flutter automatisch de overgang ertussen. Dit is een van de eenvoudigste manieren om complexe animatie in een mobiele applicatie te implementeren.

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

Spring Animation, Interpolator en Easing

Om een animatie er natuurlijk uit te laten zien, worden snelheidscurven gebruikt — Interpolator in Android en Easing in iOS. Ze bepalen hoe de animatiesnelheid verandert van begin tot eind.

Android Interpolators

Android ondersteunt verschillende ingebouwde Interpolators: LinearInterpolator (uniform), AccelerateDecelerateInterpolator (langzaam-snel-langzaam), FastOutSlowInInterpolator (Material Design), OvershootInterpolator (met overschrijding) en BounceInterpolator (met stuiteren). Een aangepaste Interpolator kan worden gemaakt via XML of de TimeInterpolator-klasse.

Spring Animation

Spring Animation (veeranimatie) modelleert veerfysica met parameters damping (demping) en stiffness (stijfheid). Demping 0 — oneindige oscillaties, 1 — geen oscillaties. Stijfheid bepaalt de retour-snelheid. Spring Animation is beschikbaar in iOS (UIViewPropertyAnimator met UISpringTimingParameters), Android (SpringAnimation uit physics2) en SwiftUI (spring()).

De documentatie Spring Animation in Android bevat gedetailleerde configuratievoorbeelden.

Tijdlijn-animatie

Timeline (tijdlijn) — een benadering waarbij animatie wordt opgesplitst in frames in de tijd. Gebruikt voor complexe sequenties waar AnimationSet of Group-animatie niet flexibel genoeg zijn. Android ondersteunt AnimatorSet, iOS — CAAnimationGroup, Flutter — Interval in AnimationController.