Easing: mohiyati, mobil animatsiyada yumshatish funksiyalari

Easing nima?

Easing (yumshatish funksiyasi) — t ∈ [0,1] vaqtning chiziqli borishini animatsiyaning chiziqli bo'lmagan qiymatiga aks ettiruvchi matematik f(t) funksiyasi. Agar animatsiya ob'ektning holatini A dan B gacha 500 ms ichida o'zgartirsa, easing ob'ektning har bir vaqt momentida bu nuqtalar orasida qanday harakatlanishini belgilaydi. Chiziqli easing (f(t) = t) doimiy tezlikni anglatadi — ob'ekt mexanik harakat qiladi. Chiziqli bo'lmagan easing — tabiiy: ob'ekt tezlashadi (ease-in), sekinlashadi (ease-out) yoki silliq boshlanish va tugashga ega (ease-in-out).

Easing funksiyalari kubik Bézier egri chiziqlari (Cubic Bézier) bilan tavsiflanadi, bu erda X o'qi normallashtirilgan vaqt, Y o'qi normallashtirilgan taraqqiyotdir. Ikki nazorat nuqtasi (P1, P2) egri chiziq shaklini belgilaydi. Standart egri chiziqlar CSS spetsifikatsiyasi bilan belgilangan: 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). Xuddi shu qiymatlar iOS-da CAMediaTimingFunction va Android-da PathInterpolator da ishlatiladi. Material Design Motion ko'rsatmalariga ko'ra, easing egri chiziqlari kontekstga mos kelishi kerak: paydo bo'lish uchun — ease-out (tez boshlanish), yo'qolish uchun — ease-in (tez tugash).

iOS-da Easing: CAMediaTimingFunction

iOS-da easing bilan asosiy ish Core Animation dan CAMediaTimingFunction sinfi orqali amalga oshiriladi. U ikki nazorat nuqtasi (c1x, c1y, c2x, c2y) ko'rinishidagi kubik Bézier egri chizig'ini qabul qiladi va CAAnimation (CABasicAnimation, CAKeyframeAnimation) ga qo'llaniladi. CAMediaTimingFunction 5 oldindan belgilangan funksiyani qo'llab-quvvatlaydi: linear, easeIn, easeOut, easeInEaseOut va default (easeInEaseOut ekvivalenti).

CAMediaTimingFunction CALayer darajasida ishlaydi — animatsiya render server deb nomlangan alohida jarayonda bajariladi, bu hatto murakkab transformatsiyalarda ham 60fps ni kafolatlaydi. UIView xususiyatlarining (frame, alpha, transform) animatsiyasi uchun UIKit UIView.animate dan options: .curveEaseInOut parametri bilan foydalanadi, bu ichki ravishda tegishli egri chiziq bilan CAMediaTimingFunction yaratadi. iOS 17+ da maxsus Bézier uchun BlockParameters bilan UIViewAnimationCurve.custom qo'shilgan — bu o'z CAAnimation yozish zaruratini bartaraf qiladi. CAMediaTimingFunction shuningdek UIKit Dynamics va UIScrollView da sekinlashish (UIScrollViewDecelerationRate) uchun ishlatiladi.

SwiftUI-da Easing

SwiftUI-da easing Animation strukturasi orqali .easeIn, .easeOut, .easeInOut, .spring va .interpolatingSpring modifikatorlari bilan belgilanadi. UIKit-da animatsiya protsedural bo'lgan holda (beginAnimations/commitAnimations), SwiftUI deklarativ yondashuvdan foydalanadi: animatsiya o'zgaruvchan holat xususiyatidir va freymvork o'tishni qanday animatsiya qilishni o'zi belgilaydi.

.timingCurve(c0x, c0y, c1x, c1y) modifikatori to'g'ridan-to'g'ri kubik Bézier nazorat nuqtalarini qabul qiladi — bu CAMediaTimingFunction ning to'liq analogidir. SwiftUI Animation oldindan belgilangan egri chiziqlarni statik xususiyatlar sifatida qo'llab-quvvatlaydi: Animation.easeInOut ease-in-out (0.42, 0.0, 0.58, 1.0) ga ekvivalentdir. Bahor animatsiyasi uchun Animation.spring(response:dampingFraction:blendDuration) ishlatiladi, bu erda dampingFraction < 1 so'nish bilan bahor effektini yaratadi. WWDC 2023 da Apple Animation.keyframes — har bir asosiy kadrda maxsus easing bilan kadr animatsiyasini taqdim etdi, bu traektoriya ustida to'liq nazorat beradi.

Android-da Easing: PathInterpolator

Android-da easing PathInterpolator (API 21+) — kubik Bézier egri chizig'i bilan Path ob'ektini qabul qiluvchi sinf orqali amalga oshiriladi. Nazorat nuqtalari Path.cubicTo(x1, y1, x2, y2, x3, y3) orqali belgilanadi, bu erda (x1,y1) birinchi nazorat nuqtasi, (x2,y2) ikkinchi, (x3,y3) oxirgi nuqta (har doim 1,1). Maxsus egri chiziq kerak bo'lganda PathInterpolator majburiy; standart stsenariylar uchun AccelerateDecelerateInterpolator (ease-in-out), AccelerateInterpolator (ease-in) va DecelerateInterpolator (ease-out) mavjud.

Jetpack Compose-da easing androidx.compose.animation paketidan Easing ob'ekti orqali belgilanadi. FastOutSlowInEasing, LinearOutSlowInEasing, FastOutLinearInEasing, shuningdek CubicBezierEasing orqali maxsus Easing mavjud. Compose Easing animate*AsState, AnimatedVisibility va AnimatedContent da qo'llaniladi. View tizimidan asosiy farq: Compose easing ni Kotlin tomonida (RenderNode da emas) interpolyatsiya qiladi, bu maxsus animatsiyalar uchun ko'proq moslashuvchanlik beradi, ammo 120Hz displeylarda optimallashtirishni talab qiladi.

Kod misollari

iOS: CAMediaTimingFunction CABasicAnimation bilan

Maxsus ease-in-out egri chizig'i bilan qatlam holatining asosiy animatsiyasi. CAMediaTimingFunction harakatning silliq boshlanishi va tugashini belgilovchi kubik Bézier nazorat nuqtalarini qabul qiladi.

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

Nazorat nuqtalari (0.42, 0.0, 0.58, 1.0) standart ease-in-out egri chizig'ini belgilaydi. SwiftUI Animation.easeInOut uchun xuddi shu nuqtalardan foydalanadi. Ease-in uchun (0.42, 0.0, 1.0, 1.0), ease-out uchun — (0.0, 0.0, 0.58, 1.0) qo'llang. Core Animation animatsiyani render server da 60/120 fps chastotasi bilan bajaradi.

SwiftUI: timingCurve bilan Easing

SwiftUI-da maxsus egri chiziq va bahor effekti bilan deklarativ animatsiya. animation modifikatori isAnimated o'zgarishiga bog'lanadi.

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) modifikatori SwiftUI-da maxsus easing animatsiyasini yaratadi. value parametri animatsiyani aniq holat bilan bog'laydi — isAnimated o'zgarganda SwiftUI avtomatik ravishda egri chiziqni qo'llaydi. Bahor animatsiyasi uchun timingCurve o'rniga .spring(response: 0.4, dampingFraction: 0.6) dan foydalaning.

Android: PathInterpolator maxsus easing bilan

Android-da PathInterpolator orqali ease-in-out ekvivalenti. Nazorat nuqtalari (0.42, 0.0, 0.58, 1.0) iOS-da bo'lgani kabi bir xil egri chiziqni belgilaydi.

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) nazorat nuqtalari bilan iOS-dagi CAMediaTimingFunction ease-in-out bilan bir xil. Platformalararo loyihalar uchun bir xil nazorat nuqtalaridan foydalaning — bu vizual bir xil animatsiya xatti-harakatini kafolatlaydi. Material Design Android-spesifik interfeyslar uchun muqobil sifatida FastOutSlowInInterpolator (0.4, 0.0, 0.2, 1.0) ni tavsiya qiladi.

Jetpack Compose: CubicBezierEasing bilan Easing

Compose-da easing bir xil nazorat nuqtalari bilan CubicBezierEasing orqali belgilanadi. Natija — shaffoflik va siljish bilan elementning silliq paydo bo'lishi.

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 bir xil 4 nazorat nuqtasi parametrini qabul qiladi. animateFloatAsState alpha qiymatini berilgan egri chiziq bilan avtomatik interpolyatsiya qiladi. Taqqoslash uchun: Compose-da FastOutSlowInEasing (0.4, 0.0, 0.2, 1.0) — Material Design 3 standart egri chizig'iga ekvivalent. CubicBezierEasing orqali maxsus egri chiziqlar brend animatsiyalari uchun to'liq nazorat beradi.