Animazione nello sviluppo mobile: cos'è, quali tipi esistono e come usarli

Animazione in Android: Property Animation e View Animation

Android fornisce due sistemi di animazione principali: View Animation (legacy) e Property Animation (moderno). View Animation (o Tween Animation) funziona solo con la rappresentazione visiva — modifica la visualizzazione della View ma non le sue proprietà reali (ad esempio, le coordinate del clic rimangono al loro posto). Property Animation, introdotta in Android 3.0, modifica le proprietà reali dell'oggetto tramite Animator — ValueAnimator, ObjectAnimator o AnimatorSet.

ObjectAnimator e ValueAnimator

ObjectAnimator è la classe più popolare di Property Animation. Anima una proprietà specifica dell'oggetto (ad esempio, translationX, alpha, scaleY) per un tempo determinato con un dato Interpolator.

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

ValueAnimator non è legato a un oggetto specifico — genera valori che possono essere utilizzati per qualsiasi proprietà o logica personalizzata.

View Animation e animazioni XML

View Animation viene descritta in file XML res/anim/. Sono supportati quattro tipi: scale, translate, rotate, alpha. Lo svantaggio è che l'animazione non modifica i parametri reali della View. Per effetti semplici (lampeggio, rotazione) View Animation è ancora applicabile, ma per i nuovi progetti si raccomanda Property Animation.

Animazione in Jetpack Compose

Jetpack Compose offre un'API di animazione moderna: animateAsState, Animatable, AnimatedVisibility e AnimatedContent. L'animazione in Compose è reattiva: quando lo stato cambia, l'animazione si avvia automaticamente.

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

Animazione in iOS: Core Animation e UIView.animate

iOS fornisce un potente stack di animazione basato su Core Animation — un framework di basso livello che lavora con CALayer. UIKit si basa su Core Animation con i comodi metodi UIView.animate e UIViewPropertyAnimator.

UIView.animate

UIView.animate è il modo più semplice per animare in iOS. Permette di animare frame, alpha, transform, backgroundColor e altre proprietà di 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 — un framework per l'animazione fisica: gravità, collisioni, molle, forze di attrazione. Permette di creare comportamenti realistici degli oggetti senza calcolo manuale della fisica. Utilizzato per transizioni personalizzate, menu animati ed elementi di gioco.

CAAnimation e Core Animation

Core Animation (CAAnimation, CABasicAnimation, CAKeyframeAnimation) — un'API di basso livello per l'animazione di CALayer. Supporta trasformazioni 3D, animazione di percorso (keyframe), mascheratura e composizione. SwiftUI utilizza Core Animation internamente attraverso i modificatori animation e 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")

Per la maggior parte dei progetti iOS si utilizza SwiftUI con la sua animazione integrata. Ad esempio, withAnimation racchiude i cambiamenti di stato in un contesto animato.

Animazione vettoriale: Lottie e Rive

Le animazioni complesse (personaggi, transizioni, caricatori) sono difficili da implementare con il codice. Lottie e Rive risolvono questo problema consentendo ai designer di creare animazioni in editor visivi e agli sviluppatori di integrarle nell'app come componente pronto.

Lottie

Lottie — una libreria di Airbnb (ora LottieFiles) che renderizza animazioni da Adobe After Effects esportate in formato JSON. Supportata su Android, iOS, Flutter, React Native e Web. Le animazioni Lottie sono vettoriali, si ridimensionano senza perdita di qualità e possono essere personalizzate a livello di codice (velocità, progresso, colori).

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

Rive

Rive (precedentemente 2Dimensions) — uno strumento più avanzato per l'animazione vettoriale. A differenza di Lottie, Rive supporta l'animazione interattiva: stati, trigger, transizioni. L'animazione viene creata in Rive Editor e controllata nell'app tramite State Machine. Rive è adatto per interfacce di gioco, icone animate e transizioni complesse con feedback.

In IT Sectr usiamo Lottie per animazioni decorative (caricatori, operazioni riuscite, stati vuoti) e Rive per elementi interattivi delle schermate di onboarding. Questo riduce il tempo di sviluppo delle animazioni del 60% rispetto all'implementazione manuale con UIKit o Canvas.

Shared Element Transition e Hero Animation

Shared Element Transition — un'animazione in cui un elemento (immagine, testo, scheda) si muove e si trasforma dolcemente durante la transizione tra schermate. Questo crea l'illusione di continuità: l'utente non "va" verso una nuova schermata, ma "si immerge" nell'elemento.

Android Shared Element Transition

In Android la transizione viene implementata tramite ActivityOptionsCompat e attributi transitionName. FragmentTransaction supporta addSharedElement per le transizioni all'interno di un'Activity. Compose utilizza SharedTransitionLayout con SharedContentState.

iOS Hero Transition

iOS non ha una Hero Transition integrata, ma la libreria Hero (di Luke Zhao) implementa questo modello su UIKit. Basta assegnare un ID agli elementi su entrambe le schermate — Hero creerà automaticamente una transizione fluida. In SwiftUI, l'animazione di transizione è integrata tramite NavigationStack e matchedGeometryEffect.

Flutter Hero

Flutter ha un widget Hero integrato con un parametro tag. Quando due pagine contengono Hero con lo stesso tag, Flutter anima automaticamente la transizione tra di esse. Questo è uno dei modi più semplici per implementare animazioni complesse in un'applicazione mobile.

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

Spring Animation, Interpolator e Easing

Per far sì che un'animazione appaia naturale, si utilizzano curve di velocità — Interpolator in Android e Easing in iOS. Determinano come la velocità dell'animazione cambia dall'inizio alla fine.

Interpolator di Android

Android supporta diversi Interpolator integrati: LinearInterpolator (uniforme), AccelerateDecelerateInterpolator (lento-veloce-lento), FastOutSlowInInterpolator (Material Design), OvershootInterpolator (con superamento) e BounceInterpolator (con rimbalzo). Un Interpolator personalizzato può essere creato tramite XML o la classe TimeInterpolator.

Spring Animation

Spring Animation (animazione a molla) modella la fisica della molla con i parametri di smorzamento (damping) e rigidità (stiffness). Smorzamento 0 — oscillazioni infinite, 1 — senza oscillazioni. La rigidità determina la velocità di ritorno. Spring Animation è disponibile in iOS (UIViewPropertyAnimator con UISpringTimingParameters), Android (SpringAnimation da physics2) e SwiftUI (spring()).

La documentazione Spring Animation in Android contiene esempi dettagliati di configurazione.

Animazione temporale

Timeline (linea temporale) — un approccio in cui l'animazione viene suddivisa in fotogrammi nel tempo. Utilizzata per sequenze complesse dove AnimationSet o l'animazione di gruppo non sono abbastanza flessibili. Android supporta AnimatorSet, iOS — CAAnimationGroup, Flutter — Interval in AnimationController.