Easing: मोबाइल एनिमेशन में स्मूथिंग फ़ंक्शन

Easing क्या है?

Easing (स्मूथिंग फ़ंक्शन) एक गणितीय फ़ंक्शन f(t) है जो रैखिक समय t ∈ [0,1] को एक गैर-रैखिक एनिमेशन मान में मैप करता है। यदि कोई एनिमेशन किसी वस्तु की स्थिति को A से B में 500 ms में बदलता है, तो easing निर्धारित करता है कि वस्तु समय के प्रत्येक क्षण में इन बिंदुओं के बीच कैसे चलती है। रैखिक easing (f(t) = t) का अर्थ है स्थिर गति — वस्तु यांत्रिक रूप से चलती है। गैर-रैखिक easing स्वाभाविक लगता है: वस्तु तेज़ होती है (ease-in), धीमी होती है (ease-out), या शुरुआत और अंत सुगम होता है (ease-in-out)।

Easing फ़ंक्शन क्यूबिक बेज़ियर वक्रों द्वारा वर्णित किए जाते हैं, जहाँ X-अक्ष सामान्यीकृत समय है और Y-अक्ष सामान्यीकृत प्रगति है। दो नियंत्रण बिंदु (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 Motion Guidelines के अनुसार, easing वक्र संदर्भ से मेल खाने चाहिए: प्रकट होने के लिए — ease-out (तेज़ शुरुआत), गायब होने के लिए — ease-in (तेज़ अंत)।

iOS में Easing: CAMediaTimingFunction

iOS में, easing मुख्य रूप से 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 पैरामीटर के साथ UIView.animate का उपयोग करता है: .curveEaseInOut, जो आंतरिक रूप से संबंधित वक्र के साथ एक CAMediaTimingFunction भी बनाता है। iOS 17+ में, कस्टम बेज़ियर के लिए UIViewAnimationCurve.custom को BlockParameters के साथ जोड़ा गया — यह कस्टम CAAnimation लिखने की आवश्यकता को समाप्त करता है। CAMediaTimingFunction का उपयोग UIKit Dynamics और UIScrollView में मंदन (UIScrollViewDecelerationRate) के लिए भी किया जाता है।

SwiftUI में Easing

SwiftUI में, easing को 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 में, Apple ने Animation.keyframes प्रस्तुत किया — प्रत्येक मुख्य फ्रेम पर कस्टम easing के साथ फ्रेम-दर-फ्रेम एनिमेशन, जो प्रक्षेपवक्र पर पूर्ण नियंत्रण देता है।

Android में Easing: PathInterpolator

Android में, easing को 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 में, easing को androidx.compose.animation पैकेज से Easing ऑब्जेक्ट के माध्यम से सेट किया जाता है। FastOutSlowInEasing, LinearOutSlowInEasing, FastOutLinearInEasing, साथ ही CubicBezierEasing के माध्यम से कस्टम Easing उपलब्ध हैं। Compose Easing animate*AsState, AnimatedVisibility और AnimatedContent में लागू होता है। View सिस्टम से मुख्य अंतर: Compose Kotlin पक्ष पर easing को इंटरपोलेट करता है (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 में एक कस्टम easing एनिमेशन बनाता है। पैरामीटर 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 में, easing को समान नियंत्रण बिंदुओं के साथ 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 के माध्यम से कस्टम वक्र ब्रांडेड एनिमेशन के लिए पूर्ण नियंत्रण देते हैं।