Published on: Tuesday, March 3, 2026

Animatsiya egri chiziqlari va prujinalar

Authors

Name
ShoxruxC
@iOSdasturchi

Siz hozirgacha yozgan barcha animatsiyalar .easeInOut va .spring() kabi so'zlardan foydalangan, lekin ularning nimani anglatishi haqida ko'p tushuntirish bermagan. Ushbu darsda siz animatsiya egri chiziqlarini qanday farqlashni va qaysi vaziyatda qaysi birini tanlashni o'rganasiz.

Egri chiziq vaqt o'tishi bilan o'zgarish tezligini tavsiflaydi. Avtomobil qanday harakatlanishini tasavvur qiling: to'xtash joyidan tezlashadi, bir tezlikda harakat qiladi, so'ngra sekinlashadi. Ko'pchilik UI harakati ham shu patternga o'xshaydi. .linear esa boshqacha — bu avtomobil bir zumda to'liq tezlikka erishib, bir xil tezlikda to'xtash joyiga yetib keladigan holat.

Prujinalar egri chiziqlardan farq qiladi. Oldindan belgilangan matematik yo'l o'rniga, prujina animatsiyasi jismoniy harakat qiladi. Ob'ekt maqsad nuqtasini biroz o'tib ketadi, keyin qaytadi va to'xtaydi. Bu overshoot (ortiqcha o'tish) aynan prujinani hayotiy ko'rinadigan qiladigan narsa.

Swift•

EgriChiziqSolishtirishKorinishi.swift

import SwiftUI

struct EgriChiziqSolishtirishKorinishi: View {
@State private var siljitilganmi = false

  var body: some View {
      VStack(spacing: 24) {
          // Har bir qator har xil egri chiziqni ko'rsatadi
          EgriChiziqQatori(sarlavha: "linear",
                           siljitilganmi: siljitilganmi,
                           animatsiya: .linear(duration: 0.6))

          EgriChiziqQatori(sarlavha: "easeInOut",
                           siljitilganmi: siljitilganmi,
                           animatsiya: .easeInOut(duration: 0.6))

          EgriChiziqQatori(sarlavha: "easeIn",
                           siljitilganmi: siljitilganmi,
                           animatsiya: .easeIn(duration: 0.6))

          EgriChiziqQatori(sarlavha: "easeOut",
                           siljitilganmi: siljitilganmi,
                           animatsiya: .easeOut(duration: 0.6))

          EgriChiziqQatori(sarlavha: "spring",
                           siljitilganmi: siljitilganmi,
                           animatsiya: .spring(duration: 0.6))

          Button("Sinash") {
              withAnimation {
                  siljitilganmi.toggle()
              }
          }
          .buttonStyle(.borderedProminent)
      }
      .padding()
  }

}

struct EgriChiziqQatori: View {
let sarlavha: String
let siljitilganmi: Bool
let animatsiya: Animation

  var body: some View {
      HStack {
          Text(sarlavha).font(.caption).frame(width: 80, alignment: .leading)
          Circle()
              .frame(width: 24, height: 24)
              .foregroundStyle(.blue)
              .offset(x: siljitilganmi ? 200 : 0)
              .animation(animatsiya, value: siljitilganmi)
          Spacer()
      }
  }

}

Qator	Vazifasi
`.linear(duration: 0.6)`	Boshidan oxirigacha doimiy tezlik. Masofa bir tekis bosib o'tiladi. Mexanik his beradi — UI harakati uchun kamdan kam ishlatiladi, lekin yuklanish progress bar kabi narsalar uchun yaxshi.
`.easeInOut(duration: 0.6)`	Sekin boshlanadi, o'rtada tezlashadi, so'ngra sekinlashadi. Jismoniy ob'ektlar aslida qanday harakat qilishiga mos keladi. Aksariyat UI o'tishlari uchun eng tabiiy his beruvchi egri chiziq.
`.easeIn(duration: 0.6)`	Sekin boshlanadi, to'liq tezlikda tugaydi — viewlar ekrandan chiqib ketayotgan hollarda yaxshi: tezlashib chiqib ketish tabiiy ko'rinadi.
`.easeOut(duration: 0.6)`	Tez boshlanadi, sekinlashadi — viewlar kirganida yaxshi: ma'lum bir joyda ushlanib qolayotgandek.

Prujina parametrlari

// Ortiqcha o'tishsiz — tez va silliq
.spring(duration: 0.4, bounce: 0.0)

// Oz miqdorda sakrash — tabiiy his
.spring(duration: 0.4, bounce: 0.3)

// Ko'p miqdorda sakrash — o'yinchoq kabi
.spring(duration: 0.4, bounce: 0.6)

duration — prujina o'z holatiga qancha tez yetib borishini (soniyalarda) boshqaradi
bounce — qancha miqdorda overshoot bo'lishini boshqaradi: 0.0 = ortiqcha o'tish yo'q, 1.0 = juda kuchli sakrash

Qaysi birini tanlash kerak?

// Ko'pincha: easeInOut — fizik ob'ektlarning harakat qilish uslubiga mos
.easeInOut(duration: 0.3)

// Kirish uchun: easeOut — yangi joy ushlab olayotgandek
.easeOut(duration: 0.25)

// Chiqish uchun: easeIn — tezlashib ketayotgandek
.easeIn(duration: 0.2)

// Tezkor va jonli: spring() — Apple o'z interfeysi uchun shu patterndan foydalanadi
.spring(duration: 0.4, bounce: 0.25)

// Kechikish bilan: bitta animatsiya tugaganda boshqasini boshlash uchun
.easeOut(duration: 0.3).delay(0.1)

Murakkab prujina nazorati

// Interaktiv prujina — juda sezgir va jonli (iOS 17+)
.spring(.interactive)

// Qattiq prujina — mos qattiqlik bilan tezkor
.spring(.stiff)

// Yumshoq prujina — ko'proq davomiylik bilan sekin harakatlanadi
.spring(.soft)

Tezkor ma'lumotnoma

Sintaksis	Vazifasi
`.linear(duration: 0.4)`	Doimiy tezlik — yuklovchilar uchun mexanik his
`.easeIn(duration: 0.4)`	Tezlashadi — ekrandan chiqish uchun eng yaxshi
`.easeOut(duration: 0.4)`	Sekinlashadi — kirish uchun eng yaxshi
`.easeInOut(duration: 0.4)`	Sekin boshlanib sekin tugaydi — aksariyat UI o'tishlari uchun
`.spring()`	Prujina fizikasi — tabiiy va jonli
`.spring(bounce: 0.3)`	Biroz sakrash bilan prujina
`.spring(duration: 0.4, bounce: 0.5)`	Nazorat qilinadigan prujina

🎯 Topshiriq: egri chiziq taqqoslagichini qurish

Bitta tugma bosilib, barcha to'rtta egri chiziqni (linear, easeIn, easeOut, easeInOut) va prujinani (spring) bir vaqtda namoyish etadigan ko'rinish yarating. Har bir egri chiziq uchun alohida doira yoki to'rtburchak qo'shing. Har qaysi element bir xil masofani bosib o'tsin — lekin farqli tezlik profili bilan. Bu sizga ko'zingiz bilan har bir egri chiziqning o'zini qanday tutishini ko'rishga imkon beradi.