Animation i mobilutveckling: vad det är, vilka typer och hur man använder

Animation i Android: Property Animation och View Animation

Android tillhandahåller två huvudsakliga animationssystem: View Animation (äldre) och Property Animation (modern). View Animation (eller Tween Animation) fungerar endast med visuell representation — den ändrar visningen av Vyn men inte dess verkliga egenskaper (till exempel förblir klickkoordinater på plats). Property Animation, introducerad i Android 3.0, ändrar verkliga objektegenskaper via Animator — ValueAnimator, ObjectAnimator eller AnimatorSet.

ObjectAnimator och ValueAnimator

ObjectAnimator är den mest populära klassen i Property Animation. Den animerar en specifik objektegenskap (till exempel translationX, alpha, scaleY) under en angiven tid med en given Interpolator.

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

ValueAnimator är inte bunden till ett specifikt objekt — den genererar värden som kan användas för vilken egenskap som helst eller anpassad logik.

View Animation och XML-animationer

View Animation beskrivs i XML-filer res/anim/. Fyra typer stöds: scale, translate, rotate, alpha. Nackdelen är att animationen inte ändrar verkliga Vy-parametrar. För enkla effekter (blinkande, rotation) är View Animation fortfarande tillämplig, men för nya projekt rekommenderas Property Animation.

Animation i Jetpack Compose

Jetpack Compose erbjuder ett modernt animations-API: animateAsState, Animatable, AnimatedVisibility och AnimatedContent. Animation i Compose är reaktiv: när tillståndet ändras startar animationen automatiskt.

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

Animation i iOS: Core Animation och UIView.animate

iOS tillhandahåller en kraftfull animationsstack baserad på Core Animation — ett lågnivåramverk som arbetar med CALayer. UIKit bygger ovanpå Core Animation med bekväma UIView.animate- och UIViewPropertyAnimator-metoder.

UIView.animate

UIView.animate är det enklaste sättet att animera i iOS. Tillåter animering av frame, alpha, transform, backgroundColor och andra UIView-egenskaper.

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 — ett ramverk för fysisk animation: gravitation, kollisioner, fjädrar, attraktionskrafter. Möjliggör realistiskt objektbeteende utan manuell fysikberäkning. Används för anpassade övergångar, animerade menyer och spelelement.

CAAnimation och Core Animation

Core Animation (CAAnimation, CABasicAnimation, CAKeyframeAnimation) — ett lågnivå-API för CALayer-animation. Stöder 3D-transformeringar, sökvägsanimation (keyframe), maskering och komposition. SwiftUI använder Core Animation under huven genom modifierarna animation och 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")

För de flesta iOS-projekt används SwiftUI med dess inbyggda animation. Till exempel, withAnimation omsluter tillståndsändringar i en animerad kontext.

Vektoranimation: Lottie och Rive

Komplexa animationer (karaktärer, övergångar, laddare) är svåra att implementera med kod. Lottie och Rive löser detta problem genom att låta designers skapa animationer i visuella redigerare och utvecklare bädda in dem i appen som en färdig komponent.

Lottie

Lottie — ett bibliotek från Airbnb (nu LottieFiles) som renderar animationer från Adobe After Effects exporterade i JSON-format. Stöds på Android, iOS, Flutter, React Native och Web. Lottie-animationer är vektorbaserade, skalar utan kvalitetsförlust och kan anpassas programmatiskt (hastighet, framsteg, färger).

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

Rive

Rive (tidigare 2Dimensions) — ett mer avancerat verktyg för vektoranimation. Till skillnad från Lottie stöder Rive interaktiv animation: tillstånd, triggers, övergångar. Animation skapas i Rive Editor och styrs i appen via en State Machine. Rive passar för spelgränssnitt, animerade ikoner och komplexa övergångar med återkoppling.

Hos IT Sectr använder vi Lottie för dekorativa animationer (laddare, lyckade operationer, tomma tillstånd) och Rive för interaktiva element i onboarding-skärmar. Detta minskar utvecklingstiden för animationer med 60% jämfört med manuell implementering med UIKit eller Canvas.

Shared Element Transition och Hero Animation

Shared Element Transition — en animation där ett element (bild, text, kort) smidigt flyttas och transformeras vid övergång mellan skärmar. Detta skapar illusionen av kontinuitet: användaren "går" inte till en ny skärm, utan "faller ner i" elementet.

Android Shared Element Transition

I Android implementeras övergången via ActivityOptionsCompat och transitionName-attribut. FragmentTransaction stöder addSharedElement för övergångar inom en Activity. Compose använder SharedTransitionLayout med SharedContentState.

iOS Hero Transition

iOS har ingen inbyggd Hero Transition, men biblioteket Hero (av Luke Zhao) implementerar detta mönster på UIKit. Tilldela helt enkelt ett id till element på båda skärmarna — Hero skapar automatiskt en smidig övergång. I SwiftUI är övergångsanimation inbyggd via NavigationStack och matchedGeometryEffect.

Flutter Hero

Flutter har en inbyggd Hero-widget med en tag-parameter. När två sidor innehåller Hero med samma tag, animerar Flutter automatiskt övergången mellan dem. Detta är ett av de enklaste sätten att implementera komplex animation i en mobilapplikation.

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

Spring Animation, Interpolator och Easing

För att en animation ska se naturlig ut används hastighetskurvor — Interpolator i Android och Easing i iOS. De bestämmer hur animationshastigheten ändras från början till slut.

Android Interpolators

Android stöder flera inbyggda Interpolatorer: LinearInterpolator (jämn), AccelerateDecelerateInterpolator (långsam-snabb-långsam), FastOutSlowInInterpolator (Material Design), OvershootInterpolator (med överskridning) och BounceInterpolator (med studs). En anpassad Interpolator kan skapas via XML eller TimeInterpolator-klassen.

Spring Animation

Spring Animation (fjäderanimation) modellerar fjäderfysik med parametrarna dämpning (damping) och styvhet (stiffness). Dämpning 0 — oändliga svängningar, 1 — inga svängningar. Styvhet bestämmer återgångshastigheten. Spring Animation är tillgänglig i iOS (UIViewPropertyAnimator med UISpringTimingParameters), Android (SpringAnimation från physics2) och SwiftUI (spring()).

Dokumentationen Spring Animation i Android innehåller detaljerade konfigurationsexempel.

Tidslinjeanimation

Timeline (tidslinje) — ett tillvägagångssätt där animation delas upp i bildrutor över tid. Används för komplexa sekvenser där AnimationSet eller gruppanimation inte är tillräckligt flexibla. Android stöder AnimatorSet, iOS — CAAnimationGroup, Flutter — Interval i AnimationController.