Published on: Friday, March 6, 2026

Bosqichli animatorlar va kadrlar ketma-ketligi

Authors

Name
ShoxruxC
@iOSdasturchi

Hozirgacha yaratgan barcha animatsiyalaringiz ikki holatga ega edi: boshlang'ich va tugash. Lekin ba'zi animatsiyalar bir nechta holatdan o'tishi kerak. Masalan: to'p tashlab yuboriladi, yuqoriga ko'tariladi, ushlab olinadi. Yoki ikonka o'ngga, keyin katta bo'lib, keyin o'z joyiga qaytadi. Bunday ketma-ket effektlarni standart .animation() yoki withAnimation bilan yaratish qiyin.

iOS 17 da kiritilgan PhaseAnimator tartibli qiymatlar — bosqichlar — ketma-ketligini belgilab berish imkonini beradi va SwiftUI ular orasida animatsiya qiladi. KeyframeAnimator esa yanada chuqurroq — u alohida animatsiya qilinishi mumkin bo'lgan xususiyatlar ustida aniq vaqt nuqtalarida nazorat qilish imkonini beradi.

Swift•

SakrovchiKorinish.swift

import SwiftUI

struct SakrovchiKorinish: View {
@State private var trigger = 0

  var body: some View {
      VStack(spacing: 40) {
          // PhaseAnimator bosqichlar massivi orqali o'tadi
          // trigger o'zgarganda ketma-ketlik qayta boshlanadi
          PhaseAnimator([0.0, -30.0, 0.0], trigger: trigger) { bosqich in
              Image(systemName: "star.fill")
                  .font(.largeTitle)
                  .foregroundStyle(.yellow)
                  // Bosqich yuqoriga (manfiy) va pastga (nol) offset beradi
                  .offset(y: bosqich)
          } animation: { _ in
              // Har bir bosqich o'tishi uchun prujina animatsiyasi
              .spring(duration: 0.3, bounce: 0.6)
          }

          Button("Sakratish") {
              trigger += 1
          }
          .buttonStyle(.borderedProminent)
      }
  }

}

Qator	Vazifasi
`PhaseAnimator([0.0, -30.0, 0.0], trigger: trigger)`	Massiv bosqichlarni ketma-ketlikda belgilaydi. `PhaseAnimator` ularni birin-ketin o'tadi. `trigger` o'zgarganda ketma-ketlik qayta boshlanadi — sonni ko'paytirish bu patternning qulay usuli.
`{ bosqich in ... }`	Ko'rinish mazmuni closure. `bosqich` — massivdan joriy qiymat (bu holda Double). Uni ko'rinish xususiyatlarini belgilash uchun ishlatasiz.
`animation: { _ in .spring(...) }`	Har bir bosqich o'tishi uchun qanday animatsiya ishlatilishini belgilaydi.

Trigger olmagan PhaseAnimator — doimiy loop

// Trigger olmagan — bosqichlar doimiy takrorlanadi
PhaseAnimator([1.0, 1.2, 1.0]) { bosqich in
    Image(systemName: "heart.fill")
        .foregroundStyle(.red)
        .scaleEffect(bosqich)
} animation: { _ in
    .easeInOut(duration: 0.6)
}

KeyframeAnimator — aniq kadr boshqaruvi

KeyframeAnimator PhaseAnimator dan farqlanadi: bu bir vaqtda bir nechta xususiyat uchun aniq kadrlar belgilash imkonini beradi.

// Animatsiya qilinadigan qiymatlarni saqlash uchun tuzilma
struct AnimatsiyaQiymatlari {
    var aylantirish = 0.0
    var masshtab = 1.0
    var ofsety = 0.0
}

Kadr turlari

// Doimiy tezlikda ma'lum qiymatga yetadi
LinearKeyframe(1.5, duration: 0.3)

// Prujina fizikasi bilan ma'lum qiymatga yetadi
SpringKeyframe(0, duration: 0.4, spring: .bouncy)

// CubicKeyframe — egri chiziqli interpolatsiya
CubicKeyframe(100, duration: 0.5)

// MoveKeyframe — animatsiyasiz darhol qiymatga o'tadi
MoveKeyframe(0)

PhaseAnimator amaliy patternlari

// Yuklash ko'rsatkichi — doimiy pulsatsiya
PhaseAnimator([0.8, 1.0, 0.8]) { bosqich in
    Circle()
        .frame(width: 20, height: 20)
        .foregroundStyle(.blue.opacity(bosqich))
        .scaleEffect(bosqich)
}

// Xato tebranishi — trigger orqali bir marta
PhaseAnimator([0.0, -10.0, 10.0, -5.0, 0.0], trigger: xatoTrigger) { bosqich in
    maydonKorinishi
        .offset(x: bosqich)
} animation: { _ in .linear(duration: 0.08) }

Tezkor ma'lumotnoma

Sintaksis	Vazifasi
`PhaseAnimator([...], trigger: t) { bosqich in }`	Qiymatlar massivi orqali o'tadi, trigger o'zgarganda qayta ishga tushadi
`PhaseAnimator([...]) { bosqich in }`	Trigger kerak bo'lmasdan doimiy takrorlanadi
`KeyframeAnimator(initialValue:trigger:) { qiymatlar in }`	Aniq kadr nazorati bilan ko'p xususiyatli animatsiya
`KeyframeTrack(\.xususiyat) { }`	Bitta animatsiya qilinishi mumkin bo'lgan xususiyat uchun kadrlar ketma-ketligi
`LinearKeyframe(qiymat, duration:)`	Doimiy tezlikdagi kadr
`SpringKeyframe(qiymat, duration:)`	Prujina fizikali kadr
`CubicKeyframe(qiymat, duration:)`	Egri chiziqli kadr
`MoveKeyframe(qiymat)`	Animatsiyasiz darhol o'tish

🎯 Topshiriq: "like" tugmasi animatsiyasi

Yugma (like) tugmasi yarating: bosilganda yurak ikonkasi uchun ko'p bosqichli animatsiya bo'lsin. PhaseAnimator yoki KeyframeAnimator dan foydalaning. Animatsiya quyidagi bosqichlardan iborat bo'lsin: katta bo'ladi → o'ngga engashadi → chapga engashadi → tabiiy holatiga qaytadi. Yurak rangi ham yoqilgan/o'chgan holatiga qarab o'zgarsin.