Animasyon sa mobile development: ano ito, anong mga uri at kung paano gamitin

Animasyon sa Android: Property Animation at View Animation

Ang Android ay nagbibigay ng dalawang pangunahing sistema ng animation: View Animation (luma) at Property Animation (moderno). Ang View Animation (o Tween Animation) ay gumagana lamang sa visual na representasyon — binabago nito ang display ng View ngunit hindi ang aktwal nitong mga katangian (halimbawa, ang mga coordinate ng click ay nananatili sa lugar). Ang Property Animation, na ipinakilala sa Android 3.0, ay nagbabago ng tunay na katangian ng bagay sa pamamagitan ng Animator — ValueAnimator, ObjectAnimator o AnimatorSet.

ObjectAnimator at ValueAnimator

ObjectAnimator ay ang pinakasikat na klase ng Property Animation. Nag-a-animate ito ng isang partikular na katangian ng bagay (halimbawa, translationX, alpha, scaleY) sa isang tinukoy na oras na may ibinigay na Interpolator.

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

Ang ValueAnimator ay hindi nakatali sa isang partikular na bagay — bumubuo ito ng mga halaga na maaaring magamit para sa anumang katangian o custom na lohika.

View Animation at XML Animasyon

View Animation ay inilalarawan sa mga XML file na res/anim/. Apat na uri ang sinusuportahan: scale, translate, rotate, alpha. Ang disadvantage ay hindi binabago ng animation ang tunay na mga parameter ng View. Para sa mga simpleng epekto (pagkurap, pag-ikot) ang View Animation ay naaangkop pa rin, ngunit para sa mga bagong proyekto ay inirerekomenda ang Property Animation.

Animasyon sa Jetpack Compose

Ang Jetpack Compose ay nag-aalok ng modernong API ng animation: animateAsState, Animatable, AnimatedVisibility at AnimatedContent. Ang animation sa Compose ay reaktibo: kapag nagbago ang estado, awtomatikong magsisimula ang animation.

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

Animasyon sa iOS: Core Animation at UIView.animate

Ang iOS ay nagbibigay ng isang malakas na stack ng animation batay sa Core Animation — isang mababang antas na framework na gumagana sa CALayer. Ang UIKit ay binuo sa ibabaw ng Core Animation na may maginhawang pamamaraan ng UIView.animate at UIViewPropertyAnimator.

UIView.animate

UIView.animate ay ang pinakasimpleng paraan upang mag-animate sa iOS. Pinapayagan nito ang pag-animate ng frame, alpha, transform, backgroundColor at iba pang mga katangian ng 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 — isang framework para sa pisikal na animation: gravity, banggaan, spring, pwersa ng pag-akit. Pinapayagan nitong lumikha ng makatotohanang pag-uugali ng bagay nang walang manu-manong pagkalkula ng pisika. Ginagamit para sa custom na transition, animated na menu at elemento ng laro.

CAAnimation at Core Animation

Core Animation (CAAnimation, CABasicAnimation, CAKeyframeAnimation) — isang mababang antas na API para sa animation ng CALayer. Sinusuportahan ang 3D transformations, path animation (keyframe), masking at komposisyon. Ginagamit ng SwiftUI ang Core Animation sa ilalim ng hood sa pamamagitan ng mga modifier na animation at 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")

Para sa karamihan ng mga proyekto sa iOS, ginagamit ang SwiftUI kasama ang built-in na animation nito. Halimbawa, ang withAnimation binalot ang mga pagbabago ng estado sa isang animated na konteksto.

Vector Animation: Lottie at Rive

Ang mga kumplikadong animation (character, transition, loader) ay mahirap ipatupad gamit ang code. Ang Lottie at Rive ay lumulutas sa problemang ito sa pamamagitan ng pagpapahintulot sa mga designer na lumikha ng animation sa visual na editor at sa mga developer na i-embed ito sa app bilang isang handa nang component.

Lottie

Lottie — isang library mula sa Airbnb (ngayon ay LottieFiles) na nagre-render ng mga animation mula sa Adobe After Effects na na-export sa JSON format. Sinusuportahan sa Android, iOS, Flutter, React Native at Web. Ang mga animation ng Lottie ay vector, nag-scale nang walang pagkawala ng kalidad at maaaring i-customize nang programmatically (bilis, progreso, kulay).

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

Rive

Rive (dating 2Dimensions) — isang mas advanced na tool para sa vector animation. Hindi tulad ng Lottie, sinusuportahan ng Rive ang interactive na animation: estado, trigger, transition. Ang animation ay nilikha sa Rive Editor at kinokontrol sa app sa pamamagitan ng State Machine. Ang Rive ay angkop para sa mga interface ng laro, animated na icon at kumplikadong transition na may feedback.

Sa IT Sectr ginagamit namin ang Lottie para sa mga dekoratibong animation (loader, matagumpay na operasyon, walang laman na estado) at Rive para sa mga interactive na elemento ng onboarding screen. Binabawasan nito ang oras ng pag-develop ng animation ng 60% kumpara sa manu-manong pagpapatupad sa UIKit o Canvas.

Shared Element Transition at Hero Animation

Shared Element Transition — animation kung saan ang isang elemento (larawan, teksto, card) ay maayos na gumagalaw at nag-transform kapag lumilipat sa pagitan ng mga screen. Lumilikha ito ng ilusyon ng pagpapatuloy: ang gumagamit ay hindi "pumupunta" sa isang bagong screen, ngunit "nahuhulog" sa elemento.

Android Shared Element Transition

Sa Android ang transition ay ipinatutupad sa pamamagitan ng ActivityOptionsCompat at mga atributo ng transitionName. Sinusuportahan ng FragmentTransaction ang addSharedElement para sa mga transition sa loob ng Activity. Gumagamit ang Compose ng SharedTransitionLayout na may SharedContentState.

iOS Hero Transition

Ang iOS ay walang built-in na Hero Transition, ngunit ang library na Hero (ni Luke Zhao) ay nagpapatupad ng pattern na ito sa UIKit. Magtalaga lang ng id sa mga elemento sa parehong screen — awtomatikong gagawa ang Hero ng maayos na transition. Sa SwiftUI, ang animation ng transition ay built-in sa pamamagitan ng NavigationStack at matchedGeometryEffect.

Flutter Hero

Ang Flutter ay may built-in na widget na Hero na may parameter na tag. Kapag ang dalawang page ay naglalaman ng Hero na may parehong tag, awtomatikong ian-animate ng Flutter ang transition sa pagitan ng mga ito. Ito ay isa sa mga pinakasimpleng paraan upang ipatupad ang kumplikadong animation sa isang mobile application.

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

Spring Animation, Interpolator at Easing

Upang maging natural ang hitsura ng animation, ginagamit ang mga curve ng bilis — Interpolator sa Android at Easing sa iOS. Tinutukoy nila kung paano nagbabago ang bilis ng animation mula simula hanggang katapusan.

Android Interpolators

Ang Android ay sumusuporta sa ilang built-in na Interpolator: LinearInterpolator (uniform), AccelerateDecelerateInterpolator (mabagal-mabilis-mabagal), FastOutSlowInInterpolator (Material Design), OvershootInterpolator (may overshoot) at BounceInterpolator (may bounce). Ang isang custom na Interpolator ay maaaring malikha sa pamamagitan ng XML o ng TimeInterpolator class.

Spring Animation

Spring Animation (animation ng spring) ay nagmomodelo ng physics ng spring na may mga parameter na damping (pagpigil) at stiffness (tigas). Damping 0 — walang katapusang oscillations, 1 — walang oscillations. Tinutukoy ng stiffness ang bilis ng pagbabalik. Ang Spring Animation ay available sa iOS (UIViewPropertyAnimator na may UISpringTimingParameters), Android (SpringAnimation mula sa physics2) at SwiftUI (spring()).

Ang dokumentasyon Spring Animation sa Android ay naglalaman ng mga detalyadong halimbawa ng pagsasaayos.

Animasyon ng Timeline

Timeline (linya ng oras) — isang diskarte kung saan ang animation ay nahahati sa mga frame sa paglipas ng panahon. Ginagamit para sa mga kumplikadong sequence kung saan ang AnimationSet o Group animation ay hindi sapat na nababaluktot. Sinusuportahan ng Android ang AnimatorSet, iOS — CAAnimationGroup, Flutter — Interval sa AnimationController.