Easing: esensya, mga function ng paglambot sa mobile animation

Ano ang Easing?

Easing (function ng paglambot) — isang mathematical function na f(t) na nagmamapa ng linear na takbo ng oras t ∈ [0,1] sa isang non-linear na halaga ng animation. Kung ang animation ay nagbabago ng posisyon ng isang bagay mula A hanggang B sa loob ng 500 ms, tinutukoy ng easing kung paano gumagalaw ang bagay sa pagitan ng mga puntong ito sa bawat sandali ng oras. Ang linear easing (f(t) = t) ay nangangahulugang pare-pareho ang bilis — ang bagay ay gumagalaw nang mekanikal. Ang non-linear easing — natural: ang bagay ay bumibilis (ease-in), bumagal (ease-out), o may makinis na simula at wakas (ease-in-out).

Ang mga function ng easing ay inilalarawan ng cubic Bézier curves (Cubic Bézier), kung saan ang X axis ay normalized na oras at ang Y axis ay normalized na pag-unlad. Dalawang control point (P1, P2) ang tumutukoy sa hugis ng curve. Ang mga standard curve ay itinakda ng CSS specification: ease (0.25, 0.1, 0.25, 1.0), ease-in (0.42, 0.0, 1.0, 1.0), ease-out (0.0, 0.0, 0.58, 1.0), ease-in-out (0.42, 0.0, 0.58, 1.0). Ang parehong mga halaga ay ginagamit sa CAMediaTimingFunction sa iOS at PathInterpolator sa Android. Ayon sa mga alituntunin ng Material Design Motion, ang mga easing curve ay dapat tumugma sa konteksto: para sa paglitaw — ease-out (mabilis na simula), para sa paglaho — ease-in (mabilis na wakas).

Easing sa iOS: CAMediaTimingFunction

Sa iOS, ang pangunahing gawain sa easing ay ginagawa sa pamamagitan ng klase na CAMediaTimingFunction mula sa Core Animation. Ito ay tumatanggap ng cubic Bézier curve sa anyo ng dalawang control point (c1x, c1y, c2x, c2y) at inilalapat sa CAAnimation (CABasicAnimation, CAKeyframeAnimation). Ang CAMediaTimingFunction ay sumusuporta sa 5 paunang natukoy na function: linear, easeIn, easeOut, easeInEaseOut, at default (katumbas ng easeInEaseOut).

Ang CAMediaTimingFunction ay gumagana sa antas ng CALayer — ang animation ay isinasagawa sa isang hiwalay na proseso, ang render server, na ginagarantiyahan ang 60fps kahit na sa mga kumplikadong pagbabago. Para sa animation ng mga property ng UIView (frame, alpha, transform), ang UIKit ay gumagamit ng UIView.animate na may parameter na options: .curveEaseInOut, na sa loob din ay lumilikha ng CAMediaTimingFunction na may kaukulang curve. Sa iOS 17+, idinagdag ang UIViewAnimationCurve.custom na may BlockParameters para sa custom na Bézier — inaalis nito ang pangangailangan na magsulat ng sariling CAAnimation. Ang CAMediaTimingFunction ay ginagamit din sa UIKit Dynamics at UIScrollView para sa deceleration (UIScrollViewDecelerationRate).

Easing sa SwiftUI

Sa SwiftUI, ang easing ay tinutukoy sa pamamagitan ng istraktura na Animation na may mga modifier na .easeIn, .easeOut, .easeInOut, .spring at .interpolatingSpring. Hindi tulad ng UIKit kung saan ang animation ay procedural (beginAnimations/commitAnimations), ang SwiftUI ay gumagamit ng declarative approach: ang animation ay isang property ng estado na nagbabago at ang framework mismo ang tumutukoy kung paano i-animate ang paglipat.

Ang modifier na .timingCurve(c0x, c0y, c1x, c1y) ay direktang tumatanggap ng mga control point ng cubic Bézier — ito ang kumpletong analogo ng CAMediaTimingFunction. Ang SwiftUI Animation ay sumusuporta sa paunang natukoy na mga curve bilang static properties: ang Animation.easeInOut ay katumbas ng ease-in-out (0.42, 0.0, 0.58, 1.0). Para sa spring animation, ginagamit ang Animation.spring(response:dampingFraction:blendDuration), kung saan ang dampingFraction < 1 ay lumilikha ng spring effect na may paghina. Sa WWDC 2023, ipinakilala ng Apple ang Animation.keyframes — frame-by-frame animation na may custom na easing sa bawat key frame, na nagbibigay ng buong kontrol sa trajectory.

Easing sa Android: PathInterpolator

Sa Android, ang easing ay ipinapatupad sa pamamagitan ng PathInterpolator (API 21+) — isang klase na tumatanggap ng Path object na may cubic Bézier curve. Ang mga control point ay tinutukoy sa pamamagitan ng Path.cubicTo(x1, y1, x2, y2, x3, y3), kung saan ang (x1,y1) ay unang control point, (x2,y2) ay pangalawa, (x3,y3) ay endpoint (palaging 1,1). Ang PathInterpolator ay kinakailangan kung kailangan ng custom na curve; para sa mga standard na sitwasyon, available ang AccelerateDecelerateInterpolator (ease-in-out), AccelerateInterpolator (ease-in), at DecelerateInterpolator (ease-out).

Sa Jetpack Compose, ang easing ay tinutukoy sa pamamagitan ng object na Easing mula sa package na androidx.compose.animation. Available ang FastOutSlowInEasing, LinearOutSlowInEasing, FastOutLinearInEasing, pati na rin ang custom na Easing sa pamamagitan ng CubicBezierEasing. Ang Compose Easing ay inilalapat sa animate*AsState, AnimatedVisibility at AnimatedContent. Ang pangunahing pagkakaiba mula sa View system: Ang Compose ay nag-i-interpolate ng easing sa panig ng Kotlin (hindi sa RenderNode), na nagbibigay ng higit na flexibility para sa custom na animation, ngunit nangangailangan ng optimization sa mga 120Hz display.

Mga halimbawa ng code

iOS: CAMediaTimingFunction na may CABasicAnimation

Pangunahing animation ng posisyon ng layer na may custom na ease-in-out curve. Ang CAMediaTimingFunction ay tumatanggap ng mga control point ng cubic Bézier na tumutukoy sa makinis na simula at wakas ng paggalaw.

import UIKit

func animateLayerPosition() {
    let animation = CABasicAnimation(keyPath: "position")
    animation.fromValue = CGPoint(x: 0, y: 0)
    animation.toValue = CGPoint(x: 300, y: 400)
    animation.duration = 0.8

    let easing = CAMediaTimingFunction(
        controlPoints: 0.42, 0.0, 0.58, 1.0
    )
    animation.timingFunction = easing
    animation.fillMode = .forwards
    animation.isRemovedOnCompletion = false

    layer.add(animation, forKey: "positionAnimation")
}

Ang mga control point (0.42, 0.0, 0.58, 1.0) ay tumutukoy sa standard na ease-in-out curve. Ginagamit ng SwiftUI ang parehong mga punto para sa Animation.easeInOut. Para sa ease-in, gamitin ang (0.42, 0.0, 1.0, 1.0), para sa ease-out — (0.0, 0.0, 0.58, 1.0). Isinasagawa ng Core Animation ang animation sa render server na may frequency na 60/120 fps.

SwiftUI: Easing na may timingCurve

Declarative animation sa SwiftUI na may custom na curve at spring effect. Ang modifier na animation ay nakatali sa pagbabago ng isAnimated.

import SwiftUI

struct EasingExampleView: View {
    @State private var isAnimated = false

    var body: some View {
        VStack {
            Circle()
                .fill(Color.blue)
                .frame(width: 60, height: 60)
                .offset(x: isAnimated ? 100 : 0, y: 0)
                .animation(
                    .timingCurve(0.42, 0.0, 0.58, 1.0, duration: 0.6),
                    value: isAnimated
                )

            Button("Toggle") {
                isAnimated.toggle()
            }
        }
    }
}

Ang modifier na .timingCurve(c0x, c0y, c1x, c1y, duration) ay lumilikha ng custom na easing animation sa SwiftUI. Ang parameter na value ay nag-uugnay ng animation sa isang partikular na estado — kapag nagbago ang isAnimated, awtomatikong inilalapat ng SwiftUI ang curve. Para sa spring animation, gamitin ang .spring(response: 0.4, dampingFraction: 0.6) sa halip na timingCurve.

Android: PathInterpolator na may custom na easing

Katumbas ng ease-in-out sa Android sa pamamagitan ng PathInterpolator. Ang mga control point (0.42, 0.0, 0.58, 1.0) ay tumutukoy sa parehong curve tulad ng sa iOS.

import android.animation.ObjectAnimator
import android.graphics.Path
import android.view.animation.PathInterpolator
import android.view.View

fun View.fadeInWithEase() {
    val path = Path().apply {
        cubicTo(0.42f, 0.0f, 0.58f, 1.0f, 1.0f, 1.0f)
    }
    val interpolator = PathInterpolator(path)

    ObjectAnimator.ofFloat(this, "alpha", 0f, 1f).apply {
        duration = 500
        interpolator = interpolator
        start()
    }
}

Ang PathInterpolator na may mga control point (0.42, 0.0, 0.58, 1.0) ay kapareho ng CAMediaTimingFunction ease-in-out sa iOS. Para sa cross-platform project, gamitin ang parehong mga control point — ito ay ginagarantiyahan ang biswal na kaparehong pag-uugali ng animation. Inirerekomenda ng Material Design ang FastOutSlowInInterpolator (0.4, 0.0, 0.2, 1.0) bilang alternatibo para sa Android-specific na interface.

Jetpack Compose: Easing na may CubicBezierEasing

Sa Compose, ang easing ay tinutukoy sa pamamagitan ng CubicBezierEasing na may parehong mga control point. Ang resulta — makinis na paglitaw ng elemento na may transparency at paglipat.

import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.CubicBezierEasing
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*

@Composable
fun EasingComposable() {
    var visible by remember { mutableStateOf(false) }
    val easing = CubicBezierEasing(0.42f, 0.0f, 0.58f, 1.0f)

    val alpha by animateFloatAsState(
        targetValue = if (visible) 1f else 0f,
        animationSpec = tween(durationMillis = 500, easing = easing)
    )

    Column {
        Button(onClick = { visible = !visible }) {
            Text("Toggle")
        }

        Box(
            modifier = Modifier
                .size(100.dp)
                .graphicsLayer(alpha = alpha)
                .background(MaterialTheme.colorScheme.primary)
        )
    }
}

Ang CubicBezierEasing sa Compose ay tumatanggap ng parehong 4 na parameter ng control point. Awtomatikong ini-interpolate ng animateFloatAsState ang halaga ng alpha na may ibinigay na curve. Para sa paghahambing: ang FastOutSlowInEasing sa Compose ay katumbas ng (0.4, 0.0, 0.2, 1.0) — ang standard curve ng Material Design 3. Ang mga custom na curve sa pamamagitan ng CubicBezierEasing ay nagbibigay ng buong kontrol para sa brand animation.