Easing: موبائل اینیمیشن میں ہموار کرنے کے افعال

Easing کیا ہے؟

Easing (ہموار کرنے کا فعل) ایک ریاضیاتی فعل f(t) ہے جو لکیری وقت t ∈ [0,1] کو غیر لکیری اینیمیشن ویلیو میں نقش کرتا ہے۔ اگر کوئی اینیمیشن 500 ms میں کسی چیز کی پوزیشن کو A سے B میں تبدیل کرتی ہے، تو ایزنگ اس بات کا تعین کرتی ہے کہ چیز وقت کے ہر لمحے میں ان پوائنٹس کے درمیان کیسے حرکت کرتی ہے۔ لکیری ایزنگ (f(t) = t) کا مطلب ہے مستقل رفتار — چیز مشینی طور پر حرکت کرتی ہے۔ غیر لکیری ایزنگ قدرتی لگتی ہے: چیز تیز ہوتی ہے (ease-in)، سست ہوتی ہے (ease-out) یا اس کا آغاز اور اختتام ہموار ہوتا ہے (ease-in-out)۔

ایزنگ کے افعال مکعب بیزیئر منحنی خطوط سے بیان کیے جاتے ہیں، جہاں X-axis معیاری وقت ہے اور Y-axis معیاری پیش رفت ہے۔ دو کنٹرول پوائنٹس (P1, P2) منحنی خط کی شکل کا تعین کرتے ہیں۔ معیاری منحنی خطوط CSS تصریح کے ذریعے طے شدہ ہیں: 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)۔ یہی قدریں iOS میں CAMediaTimingFunction اور Android میں PathInterpolator میں استعمال ہوتی ہیں۔ Material Design حرکت کے رہنما اصولوں کے مطابق، ایزنگ منحنی خطوط کو سیاق و سباق سے مطابقت رکھنا چاہیے: ظاہر ہونے کے لیے — ease-out (تیز آغاز)، غائب ہونے کے لیے — ease-in (تیز اختتام)۔

iOS میں Easing: CAMediaTimingFunction

iOS میں، ایزنگ بنیادی طور پر Core Animation کے CAMediaTimingFunction کلاس کے ذریعے کام کرتی ہے۔ یہ دو کنٹرول پوائنٹس (c1x, c1y, c2x, c2y) کے طور پر ایک مکعب بیزیئر منحنی خط قبول کرتا ہے اور CAAnimation (CABasicAnimation, CAKeyframeAnimation) پر لاگو ہوتا ہے۔ CAMediaTimingFunction 5 پہلے سے طے شدہ افعال کی حمایت کرتا ہے: linear، easeIn، easeOut، easeInEaseOut اور default (easeInEaseOut کے ہم معنیٰ)۔

CAMediaTimingFunction CALayer سطح پر کام کرتا ہے — اینیمیشن ایک علیحدہ رینڈر سرور کے عمل میں چلتی ہے، جو پیچیدہ تبدیلیوں پر بھی 60fps کی ضمانت دیتی ہے۔ UIView خصوصیات (frame, alpha, transform) کی اینیمیشن کے لیے، UIKit options پیرامیٹر .curveEaseInOut کے ساتھ UIView.animate استعمال کرتا ہے، جو اندرونی طور پر متعلقہ منحنی خط کے ساتھ CAMediaTimingFunction بھی بناتا ہے۔ iOS 17+ میں، حسب ضرورت بیزیئر کے لیے UIViewAnimationCurve.custom کو BlockParameters کے ساتھ شامل کیا گیا — یہ حسب ضرورت CAAnimation لکھنے کی ضرورت کو ختم کرتا ہے۔ CAMediaTimingFunction UIKit Dynamics اور UIScrollView میں سستی (UIScrollViewDecelerationRate) کے لیے بھی استعمال ہوتا ہے۔

SwiftUI میں Easing

SwiftUI میں، ایزنگ Animation ڈھانچے کے ذریعے .easeIn، .easeOut، .easeInOut، .spring اور .interpolatingSpring موڈیفائرز کے ساتھ ترتیب دیا جاتا ہے۔ UIKit کے برعکس، جہاں اینیمیشن طریقہ کار پر مبنی ہے (beginAnimations/commitAnimations)، SwiftUI ایک اعلانیہ طریقہ استعمال کرتا ہے: اینیمیشن ایک حالت کی خصوصیت ہے جو تبدیل ہوتی ہے، اور فریم ورک خود طے کرتا ہے کہ منتقلی کو کیسے متحرک کرنا ہے۔

.timingCurve(c0x, c0y, c1x, c1y) موڈیفائر براہ راست مکعب بیزیئر کنٹرول پوائنٹس قبول کرتا ہے — یہ CAMediaTimingFunction کا مکمل مشابہ ہے۔ SwiftUI Animation پہلے سے طے شدہ منحنی خطوط کو جامد خصوصیات کے طور پر سپورٹ کرتا ہے: Animation.easeInOut ease-in-out (0.42, 0.0, 0.58, 1.0) کے ہم معنیٰ ہے۔ اسپرنگ اینیمیشن کے لیے، Animation.spring(response:dampingFraction:blendDuration) استعمال کیا جاتا ہے، جہاں dampingFraction < 1 نم ہونے کے ساتھ اسپرنگ اثر پیدا کرتا ہے۔ WWDC 2023 میں، ایپل نے Animation.keyframes متعارف کرایا — ہر کلیدی فریم پر حسب ضرورت ایزنگ کے ساتھ فریم بہ فریم اینیمیشن، جو رفتار پر مکمل کنٹرول دیتا ہے۔

Android میں Easing: PathInterpolator

Android میں، ایزنگ PathInterpolator (API 21+) کے ذریعے نافذ کیا جاتا ہے — ایک کلاس جو مکعب بیزیئر منحنی خط کے ساتھ Path آبجیکٹ قبول کرتی ہے۔ کنٹرول پوائنٹس Path.cubicTo(x1, y1, x2, y2, x3, y3) کے ذریعے متعین کیے جاتے ہیں، جہاں (x1,y1) پہلا کنٹرول پوائنٹ ہے، (x2,y2) دوسرا، اور (x3,y3) آخری نقطہ ہے (ہمیشہ 1,1)۔ اگر حسب ضرورت منحنی خط کی ضرورت ہو تو PathInterpolator لازمی ہے؛ معیاری منظرناموں کے لیے، AccelerateDecelerateInterpolator (ease-in-out)، AccelerateInterpolator (ease-in) اور DecelerateInterpolator (ease-out) دستیاب ہیں۔

Jetpack Compose میں، ایزنگ androidx.compose.animation پیکیج سے Easing آبجیکٹ کے ذریعے ترتیب دیا جاتا ہے۔ FastOutSlowInEasing، LinearOutSlowInEasing، FastOutLinearInEasing، نیز CubicBezierEasing کے ذریعے حسب ضرورت Easing دستیاب ہے۔ Compose Easing animate*AsState، AnimatedVisibility اور AnimatedContent میں لاگو ہوتا ہے۔ View سسٹم سے کلیدی فرق: Compose Kotlin کی طرف ایزنگ کو انٹرپولیٹ کرتا ہے (RenderNode میں نہیں)، جو حسب ضرورت اینیمیشنز کے لیے زیادہ لچک دیتا ہے لیکن 120Hz ڈسپلے پر اصلاح کی ضرورت ہوتی ہے۔

کوڈ کی مثالیں

iOS: CABasicAnimation کے ساتھ CAMediaTimingFunction

حسب ضرورت ease-in-out منحنی خط کے ساتھ بنیادی پرت پوزیشن اینیمیشن۔ CAMediaTimingFunction مکعب بیزیئر کنٹرول پوائنٹس قبول کرتا ہے جو حرکت کے ہموار آغاز اور اختتام کی وضاحت کرتے ہیں۔

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

کنٹرول پوائنٹس (0.42, 0.0, 0.58, 1.0) معیاری ease-in-out منحنی خط کی وضاحت کرتے ہیں۔ SwiftUI Animation.easeInOut کے لیے ایک ہی پوائنٹس استعمال کرتا ہے۔ ease-in کے لیے (0.42, 0.0, 1.0, 1.0) استعمال کریں؛ ease-out کے لیے — (0.0, 0.0, 0.58, 1.0)۔ Core Animation رینڈر سرور میں 60/120 fps پر اینیمیشن انجام دیتا ہے۔

SwiftUI: timingCurve کے ساتھ Easing

حسب ضرورت منحنی خط اور اسپرنگ اثر کے ساتھ SwiftUI میں اعلانیہ اینیمیشن۔ اینیمیشن موڈیفائر 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()
            }
        }
    }
}

موڈیفائر .timingCurve(c0x, c0y, c1x, c1y, duration) SwiftUI میں ایک حسب ضرورت ایزنگ اینیمیشن بناتا ہے۔ value پیرامیٹر اینیمیشن کو ایک مخصوص حالت سے منسلک کرتا ہے — جب isAnimated تبدیل ہوتا ہے، SwiftUI خود بخود منحنی خط لاگو کرتا ہے۔ اسپرنگ اینیمیشن کے لیے، timingCurve کی جگہ .spring(response: 0.4, dampingFraction: 0.6) استعمال کریں۔

Android: حسب ضرورت Easing کے ساتھ PathInterpolator

PathInterpolator کے ذریعے Android میں ease-in-out کا ہم معنیٰ۔ کنٹرول پوائنٹس (0.42, 0.0, 0.58, 1.0) 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()
    }
}

کنٹرول پوائنٹس (0.42, 0.0, 0.58, 1.0) کے ساتھ PathInterpolator iOS پر CAMediaTimingFunction ease-in-out جیسا ہی ہے۔ کراس پلیٹ فارم پروجیکٹس کے لیے، ایک ہی کنٹرول پوائنٹس استعمال کریں — یہ بصری طور پر یکساں اینیمیشن رویے کی ضمانت دیتا ہے۔ Material Design Android کے مخصوص انٹرفیس کے لیے متبادل کے طور پر FastOutSlowInInterpolator (0.4, 0.0, 0.2, 1.0) کی سفارش کرتا ہے۔

Jetpack Compose: CubicBezierEasing کے ساتھ Easing

Compose میں، ایزنگ ایک ہی کنٹرول پوائنٹس کے ساتھ CubicBezierEasing کے ذریعے ترتیب دیا جاتا ہے۔ نتیجہ شفافیت اور آفسیٹ کے ساتھ ایک ہموار عنصر کا ظہور ہے۔

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

Compose میں CubicBezierEasing ایک ہی 4 کنٹرول پوائنٹ پیرامیٹرز قبول کرتا ہے۔ animateFloatAsState متعین کردہ منحنی خط کے ساتھ alpha قدر کو خود بخود انٹرپولیٹ کرتا ہے۔ موازنہ کے لیے: Compose میں FastOutSlowInEasing (0.4, 0.0, 0.2, 1.0) — معیاری Material Design 3 منحنی خط — کے ہم معنیٰ ہے۔ CubicBezierEasing کے ذریعے حسب ضرورت منحنی خطوط برانڈڈ اینیمیشنز کے لیے مکمل کنٹرول دیتے ہیں۔