Animacja w rozwoju mobilnym: co to jest, jakie są rodzaje i jak jej używać

Animacja w Android: Property Animation i View Animation

Android zapewnia dwa główne systemy animacji: View Animation (przestarzały) i Property Animation (nowoczesny). View Animation (lub Tween Animation) działa tylko na reprezentacji wizualnej — zmienia wyświetlanie Widoku, ale nie jego rzeczywiste właściwości (na przykład współrzędne kliknięcia pozostają na miejscu). Property Animation, wprowadzona w Android 3.0, zmienia rzeczywiste właściwości obiektu poprzez Animator — ValueAnimator, ObjectAnimator lub AnimatorSet.

ObjectAnimator i ValueAnimator

ObjectAnimator to najpopularniejsza klasa Property Animation. Animuje konkretną właściwość obiektu (na przykład translationX, alpha, scaleY) przez określony czas z zadanym Interpolatorem.

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

ValueAnimator nie jest powiązany z konkretnym obiektem — generuje wartości, które mogą być używane dla dowolnej właściwości lub niestandardowej logiki.

View Animation i animacje XML

View Animation jest opisana w plikach XML res/anim/. Obsługiwane są cztery typy: scale, translate, rotate, alpha. Wadą jest to, że animacja nie zmienia rzeczywistych parametrów Widoku. Dla prostych efektów (miganie, obracanie) View Animation jest nadal stosowana, ale dla nowych projektów zaleca się Property Animation.

Animacja w Jetpack Compose

Jetpack Compose oferuje nowoczesne API animacji: animateAsState, Animatable, AnimatedVisibility i AnimatedContent. Animacja w Compose jest reaktywna: gdy zmienia się stan, animacja uruchamia się automatycznie.

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

Animacja w iOS: Core Animation i UIView.animate

iOS zapewnia potężny stos animacji oparty na Core Animation — niskopoziomowym frameworku pracującym z CALayer. UIKit nadbudowuje się na Core Animation z wygodnymi metodami UIView.animate i UIViewPropertyAnimator.

UIView.animate

UIView.animate to najprostszy sposób animowania w iOS. Umożliwia animowanie frame, alpha, transform, backgroundColor i innych właściwości 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 do fizycznej animacji: grawitacja, kolizje, sprężyny, siły przyciągania. Umożliwia tworzenie realistycznego zachowania obiektów bez ręcznego obliczania fizyki. Używany do niestandardowych przejść, animowanych menu i elementów gry.

CAAnimation i Core Animation

Core Animation (CAAnimation, CABasicAnimation, CAKeyframeAnimation) — niskopoziomowe API do animacji CALayer. Obsługuje transformacje 3D, animację ścieżki (keyframe), maskowanie i kompozycję. SwiftUI używa Core Animation pod maską poprzez modyfikatory animation i 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")

Dla większości projektów iOS używa się SwiftUI z jego wbudowaną animacją. Na przykład withAnimation otacza zmiany stanu w animowanym kontekście.

Animacja wektorowa: Lottie i Rive

Złożone animacje (postacie, przejścia, ładowarki) są trudne do zaimplementowania w kodzie. Lottie i Rive rozwiązują ten problem, umożliwiając projektantom tworzenie animacji w edytorach wizualnych, a programistom osadzanie ich w aplikacji jako gotowego komponentu.

Lottie

Lottie — biblioteka od Airbnb (obecnie LottieFiles), która renderuje animacje z Adobe After Effects wyeksportowane w formacie JSON. Obsługiwana na Android, iOS, Flutter, React Native i Web. Animacje Lottie są wektorowe, skalują się bez utraty jakości i mogą być dostosowywane programowo (prędkość, postęp, kolory).

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

Rive

Rive (dawniej 2Dimensions) — bardziej zaawansowane narzędzie do animacji wektorowej. W przeciwieństwie do Lottie, Rive obsługuje animację interaktywną: stany, wyzwalacze, przejścia. Animacja jest tworzona w Rive Editor, a w aplikacji sterowana przez State Machine. Rive nadaje się do interfejsów gier, animowanych ikon i złożonych przejść ze sprzężeniem zwrotnym.

W IT Sectr używamy Lottie do dekoracyjnych animacji (ładowarki, udane operacje, puste stany) i Rive do interaktywnych elementów ekranów onboardingu. To skraca czas tworzenia animacji o 60% w porównaniu z ręczną implementacją w UIKit lub Canvas.

Shared Element Transition i Hero Animation

Shared Element Transition — animacja, w której element (obraz, tekst, karta) płynnie przesuwa się i transformuje podczas przejścia między ekranami. Tworzy to iluzję ciągłości: użytkownik nie "przechodzi" do nowego ekranu, ale "zanurza się" w elemencie.

Android Shared Element Transition

W Android przejście jest implementowane przez ActivityOptionsCompat i atrybuty transitionName. FragmentTransaction obsługuje addSharedElement dla przejść wewnątrz Activity. Compose używa SharedTransitionLayout z SharedContentState.

iOS Hero Transition

iOS nie ma wbudowanego Hero Transition, ale biblioteka Hero (od Luke Zhao) implementuje ten wzorzec na UIKit. Po prostu przypisz id do elementów na obu ekranach — Hero automatycznie utworzy płynne przejście. W SwiftUI animacja przejścia jest wbudowana przez NavigationStack i matchedGeometryEffect.

Flutter Hero

Flutter ma wbudowany widget Hero z parametrem tag. Gdy dwie strony zawierają Hero z tym samym tagiem, Flutter automatycznie animuje przejście między nimi. To jeden z najprostszych sposobów implementacji złożonej animacji w aplikacji mobilnej.

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

Spring Animation, Interpolator i Easing

Aby animacja wyglądała naturalnie, używa się krzywych prędkości — Interpolator w Android i Easing w iOS. Określają one, jak zmienia się prędkość animacji od początku do końca.

Interpolatory Android

Android obsługuje kilka wbudowanych Interpolatorów: LinearInterpolator (jednostajny), AccelerateDecelerateInterpolator (wolno-szybko-wolno), FastOutSlowInInterpolator (Material Design), OvershootInterpolator (z przestrzeleniem) i BounceInterpolator (z odbiciem). Niestandardowy Interpolator można utworzyć przez XML lub klasę TimeInterpolator.

Spring Animation

Spring Animation (animacja sprężyny) modeluje fizykę sprężyny z parametrami tłumienia (damping) i sztywności (stiffness). Tłumienie 0 — nieskończone oscylacje, 1 — bez oscylacji. Sztywność określa prędkość powrotu. Spring Animation jest dostępna w iOS (UIViewPropertyAnimator z UISpringTimingParameters), Android (SpringAnimation z physics2) i SwiftUI (spring()).

Dokumentacja Spring Animation w Android zawiera szczegółowe przykłady konfiguracji.

Animacja osi czasu

Timeline (oś czasu) — podejście, w którym animacja jest dzielona na klatki w czasie. Używane do złożonych sekwencji, gdzie AnimationSet lub animacja grupowa nie są wystarczająco elastyczne. Android obsługuje AnimatorSet, iOS — CAAnimationGroup, Flutter — Interval w AnimationController.