Easing: mahiyyəti, mobil animasiyada yumşaltma funksiyaları

Easing nədir?

Easing (yumşaltma funksiyası) — xətti zaman gedişini t ∈ [0,1] qeyri-xətti animasiya dəyərinə çevirən riyazi f(t) funksiyası. Əgər animasiya obyektin mövqeyini A-dan B-yə 500 ms ərzində dəyişirsə, easing obyektin bu nöqtələr arasında hər bir zaman anında necə hərəkət etdiyini təyin edir. Xətti easing (f(t) = t) sabit sürət deməkdir — obyekt mexaniki hərəkət edir. Qeyri-xətti easing — təbii: obyekt sürətlənir (ease-in), yavaşlayır (ease-out) və ya hamar başlanğıc və sona malikdir (ease-in-out).

Easing funksiyaları kubik Bézier əyriləri (Cubic Bézier) ilə təsvir olunur, burada X oxu normallaşdırılmış vaxt, Y oxu normallaşdırılmış irəliləyişdir. İki nəzarət nöqtəsi (P1, P2) əyrinin formasını təyin edir. Standart əyrilər CSS spesifikasiyası ilə müəyyən edilmişdir: 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). Eyni dəyərlər iOS-da CAMediaTimingFunction və Android-də PathInterpolator-da istifadə olunur. Material Design Motion təlimatlarına görə, easing əyriləri kontekstə uyğun olmalıdır: görünmə üçün — ease-out (sürətli başlanğıc), yox olma üçün — ease-in (sürətli son).

iOS-da Easing: CAMediaTimingFunction

iOS-da easing ilə əsas iş Core Animation-dan CAMediaTimingFunction sinfi vasitəsilə aparılır. O, iki nəzarət nöqtəsi (c1x, c1y, c2x, c2y) şəklində kubik Bézier əyrisini qəbul edir və CAAnimation-a (CABasicAnimation, CAKeyframeAnimation) tətbiq olunur. CAMediaTimingFunction 5 əvvəlcədən təyin edilmiş funksiyanı dəstəkləyir: linear, easeIn, easeOut, easeInEaseOut və default (easeInEaseOut-un ekvivalenti).

CAMediaTimingFunction CALayer səviyyəsində işləyir — animasiya render server adlanan ayrıca prosesdə icra olunur, bu da mürəkkəb transformasiyalarda belə 60fps təmin edir. UIView xüsusiyyətlərinin (frame, alpha, transform) animasiyası üçün UIKit UIView.animate-dən options: .curveEaseInOut parametri ilə istifadə edir, bu da daxili olaraq müvafiq əyri ilə CAMediaTimingFunction yaradır. iOS 17+-də fərdi Bézier üçün BlockParameters ilə UIViewAnimationCurve.custom əlavə edilib — bu, öz CAAnimation yazmaq ehtiyacını aradan qaldırır. CAMediaTimingFunction həmçinin UIKit Dynamics və UIScrollView-də deselerasiya üçün (UIScrollViewDecelerationRate) istifadə olunur.

SwiftUI-də Easing

SwiftUI-də easing Animation strukturu vasitəsilə .easeIn, .easeOut, .easeInOut, .spring və .interpolatingSpring modifikatorları ilə təyin edilir. UIKit-də animasiya prosedural olduğu halda (beginAnimations/commitAnimations), SwiftUI deklarativ yanaşmadan istifadə edir: animasiya dəyişən vəziyyət xüsusiyyətidir və framework keçidi necə animasiya edəcəyini özü müəyyən edir.

.timingCurve(c0x, c0y, c1x, c1y) modifikatoru birbaşa kubik Bézier nəzarət nöqtələrini qəbul edir — bu, CAMediaTimingFunction-in tam analoqudur. SwiftUI Animation əvvəlcədən təyin edilmiş əyriləri statik xüsusiyyətlər kimi dəstəkləyir: Animation.easeInOut ease-in-out (0.42, 0.0, 0.58, 1.0) ekvivalentidir. Yay animasiyası üçün Animation.spring(response:dampingFraction:blendDuration) istifadə olunur, burada dampingFraction < 1 sönümləmə ilə yay effekti yaradır. WWDC 2023-də Apple Animation.keyframes — hər bir əsas kadrda fərdi easing ilə kadr animasiyasını təqdim etdi ki, bu da trayektoriya üzərində tam nəzarət verir.

Android-də Easing: PathInterpolator

Android-də easing PathInterpolator (API 21+) — kubik Bézier əyrisi ilə Path obyektini qəbul edən sinif vasitəsilə həyata keçirilir. Nəzarət nöqtələri Path.cubicTo(x1, y1, x2, y2, x3, y3) vasitəsilə təyin edilir, burada (x1,y1) birinci nəzarət nöqtəsi, (x2,y2) ikinci, (x3,y3) son nöqtədir (həmişə 1,1). Fərdi əyri lazım olduqda PathInterpolator məcburidir; standart ssenarilər üçün AccelerateDecelerateInterpolator (ease-in-out), AccelerateInterpolator (ease-in) və DecelerateInterpolator (ease-out) mövcuddur.

Jetpack Compose-da easing androidx.compose.animation paketindən Easing obyekti vasitəsilə təyin edilir. FastOutSlowInEasing, LinearOutSlowInEasing, FastOutLinearInEasing, həmçinin CubicBezierEasing vasitəsilə fərdi Easing mövcuddur. Compose Easing animate*AsState, AnimatedVisibility və AnimatedContent-də tətbiq olunur. View sistemindən əsas fərq: Compose easing-i Kotlin tərəfində (RenderNode-da deyil) interpolyasiya edir ki, bu da fərdi animasiyalar üçün daha çox çeviklik verir, lakin 120Hz displeylərdə optimallaşdırma tələb edir.

Kod nümunələri

iOS: CAMediaTimingFunction CABasicAnimation ilə

Fərdi ease-in-out əyrisi ilə təbəqə mövqeyinin əsas animasiyası. CAMediaTimingFunction hərəkətin hamar başlanğıcını və sonunu təyin edən kubik Bézier nəzarət nöqtələrini qəbul edir.

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

Nəzarət nöqtələri (0.42, 0.0, 0.58, 1.0) standart ease-in-out əyrisini təyin edir. SwiftUI Animation.easeInOut üçün eyni nöqtələrdən istifadə edir. Ease-in üçün (0.42, 0.0, 1.0, 1.0), ease-out üçün — (0.0, 0.0, 0.58, 1.0) tətbiq edin. Core Animation animasiyanı render server-də 60/120 fps tezliyi ilə icra edir.

SwiftUI: timingCurve ilə Easing

SwiftUI-də fərdi əyri və yay effekti ilə deklarativ animasiya. animation modifikatoru isAnimated dəyişikliyinə bağlanır.

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) modifikatoru SwiftUI-də fərdi easing animasiyası yaradır. value parametri animasiyanı konkret vəziyyətlə əlaqələndirir — isAnimated dəyişdikdə SwiftUI avtomatik olaraq əyrini tətbiq edir. Yay animasiyası üçün timingCurve əvəzinə .spring(response: 0.4, dampingFraction: 0.6) istifadə edin.

Android: PathInterpolator fərdi easing ilə

Android-də PathInterpolator vasitəsilə ease-in-out ekvivalenti. Nəzarət nöqtələri (0.42, 0.0, 0.58, 1.0) iOS-da olduğu kimi eyni əyrini təyin edir.

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

PathInterpolator (0.42, 0.0, 0.58, 1.0) nəzarət nöqtələri ilə iOS-da CAMediaTimingFunction ease-in-out ilə eynidir. Platformalararası layihələr üçün eyni nəzarət nöqtələrindən istifadə edin — bu, vizual olaraq eyni animasiya davranışını təmin edir. Material Design Android-spesifik interfeyslər üçün alternativ olaraq FastOutSlowInInterpolator (0.4, 0.0, 0.2, 1.0) tövsiyə edir.

Jetpack Compose: CubicBezierEasing ilə Easing

Compose-da easing eyni nəzarət nöqtələri ilə CubicBezierEasing vasitəsilə təyin edilir. Nəticə — şəffaflıq və yerdəyişmə ilə elementin hamar görünməsi.

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-da CubicBezierEasing eyni 4 nəzarət nöqtəsi parametrini qəbul edir. animateFloatAsState alpha dəyərini verilmiş əyri ilə avtomatik interpolyasiya edir. Müqayisə üçün: Compose-da FastOutSlowInEasing (0.4, 0.0, 0.2, 1.0) — Material Design 3 standart əyrisinə ekvivalentdir. CubicBezierEasing vasitəsilə fərdi əyrilər brend animasiyaları üçün tam nəzarət verir.