Published on: Monday, March 2, 2026

Aniq animatsiyalar — withAnimation

Authors

Name
ShoxruxC
@iOSdasturchi

7.1-darsda .animation() ni to'g'ridan to'g'ri ko'rinishga biriktirgansiz. Bu ma'lum bir ko'rinish ma'lum bir qiymat o'zgarganda animatsiya qilishi kerak bo'lganda yaxshi ishlaydi. Lekin butun ekranga ta'sir qiladigan bitta tugma bosilishi haqida nima deyish mumkin? Masalan: tugma bosilishi kengaytirilgan ko'rinishni, yo'q bo'lib ketuvchi sarlavhani va siljib kiruvchi tugmalar qatorini ishga tushiradi. Barcha uchala ko'rinishga .animation() biriktirish noqulaydir va ular bir vaqtda koordinatsiyalangan holda harakat qilmasligi ham mumkin.

Aynan shu yerda withAnimation yordamga keladi. Ko'rinishga animatsiya ko'rsatmasini qo'yish o'rniga, holat o'zgarishini o'rab olasiz — va o'sha holat o'zgarishidan ta'sirlangan har qanday ko'rinish animatsiya qilinadi.

Bu yondashuv bitta foydalanuvchi amali bir nechta viewlar bo'ylab o'zgarishlarni keltirib chiqaradigan hollarda ko'proq nazorat beradi va afzal pattern hisoblanadi.

Swift•

ContentView.swift

import SwiftUI

struct ContentView: View {
// UI ni boshqaruvchi ikki holat o'zgaruvchisi
@State private var ochiqmi = false
@State private var tugmaKorinmoqda = true

  var body: some View {
      VStack(spacing: 20) {
          // Kengaytiriladigan karta — balandligi ochiqmi ga bog'liq
          RoundedRectangle(cornerRadius: 12)
              .fill(Color.blue.opacity(0.2))
              .frame(height: ochiqmi ? 200 : 80)

          // Qo'shimcha tugmalar — faqat kengaytirilganda ko'rinadi
          if ochiqmi {
              HStack(spacing: 12) {
                  Button("Tahrirlash") { }
                      .buttonStyle(.bordered)
                  Button("O'chirish") { }
                      .buttonStyle(.bordered)
                      .tint(.red)
              }
          }

          // Yagona tugma withAnimation bilan holat o'zgarishini o'rab oladi
          Button(ochiqmi ? "Yig'ish" : "Kengaytirish") {
              withAnimation(.easeInOut(duration: 0.4)) {
                  // Bu blok ichidagi barcha o'zgarishlar birga animatsiya qilinadi
                  ochiqmi.toggle()
                  tugmaKorinmoqda.toggle()
              }
          }
          .buttonStyle(.borderedProminent)
      }
      .padding()
  }

}

Qator	Vazifasi
`withAnimation(.easeInOut(duration: 0.4)) { }`	Bu — aniq animatsiya o'rami. Jingalak qavslar ichidagi har qanday holat o'zgarishi ta'sirlangan viewlarni ko'rsatilgan animatsiya egri chizig'i yordamida animatsiya qildiradi.
`ochiqmi.toggle()`	Holat o'zgarishi blok ichida sodir bo'ladi. SwiftUI oldin va keyin holatlarni ushlab, farqni animatsiya qiladi.
`tugmaKorinmoqda.toggle()`	Ikkinchi holat o'zgarishi — avtomatik ravishda animatsiya qilinadi. Bu `.animation()` bilan yoritish qiyin bo'lar edi.

`withAnimation` vs `.animation()` — qaysi birini tanlash kerak?

.animation(value:) ni qo'llanish kerak: ko'rinish ma'lum bir qiymat o'zgarganda har doim animatsiya qilishi kerak bo'lganda. Masalan, "like" holati o'zgarganda yurak doimo animatsiya qilishi kerak.

withAnimation { } ni qo'llanish kerak: bitta foydalanuvchi amali bir nechta xil viewlardagi o'zgarishlarni keltirib chiqaradigan bo'lsa. Masalan, tugma bosish bitta holat o'zgaruvchisini almashtirib, uch xil ko'rinishni yangilaydi.

// .animation() usuli — ko'rinishga biriktirilgan
Circle()
    .scaleEffect(yoqilganmi ? 1.5 : 1.0)
    .animation(.spring(), value: yoqilganmi)  // faqat Circle uchun

// withAnimation usuli — holat o'zgarishini o'rab oladi
Button("Bosing") {
    withAnimation(.spring()) {
        yoqilganmi.toggle()  // barcha ta'sirlangan viewlar animatsiya qilinadi
    }
}

Animatsiya egri chiziqlari

// Standart — prujina animatsiyasi bilan
withAnimation { }

// Nazorat qilinadigan easing bilan
withAnimation(.easeInOut(duration: 0.3)) { }

// Prujina fizikasi bilan
withAnimation(.spring(duration: 0.4)) { }

// Doimiy tezlik bilan
withAnimation(.linear(duration: 0.5)) { }

Animatsiyani kechiktirish

// 0.5 soniyadan keyin boshlanadigan animatsiya
withAnimation(.easeOut(duration: 0.3).delay(0.5)) {
    korinmoqda.toggle()
}

Animatsiyani takrorlash

// 3 marta takrorlanadigan animatsiya
withAnimation(.easeInOut(duration: 0.5).repeatCount(3)) {
    belgilandi.toggle()
}

// To'xtamaydigan (loop) animatsiya — odatda .animation() bilan ishlatiladi
Circle()
    .scaleEffect(pulsingmi ? 1.2 : 1.0)
    .animation(.easeInOut(duration: 0.8).repeatForever(autoreverses: true), value: pulsingmi)

Tezkor ma'lumotnoma

Sintaksis	Vazifasi
`withAnimation { }`	Blok ichidagi barcha holat o'zgarishlarini standart animatsiya bilan animatsiya qiladi
`withAnimation(.spring()) { }`	Blokdagi barcha o'zgarishlar uchun prujina animatsiyasi ishlatadi
`withAnimation(.easeInOut(duration: 0.4)) { }`	Ko'rsatilgan tezlik va davomiylik bilan animatsiya
`withAnimation(.linear.delay(0.2)) { }`	Animatsiyadan oldin kechikish
`withAnimation(.easeIn.repeatCount(3)) { }`	Animatsiyani 3 marta takrorlash

🎯 Topshiriq: koordinatsiyalangan panel animatsiyasi

withAnimation yordamida bitta toggle tugmasi uchta xil o'zgarishni boshqaradigan ko'rinish yarating: balandligi o'zgaruvchi karta (frame animation), karta balandligi o'zgarganda ko'rinadigan (yoki yo'q bo'ladigan) mazmun (if bloki), va o'qning kengayish/yig'ilish holati bo'ylab aylanadigan chevron (rotationEffect). Barchasini yagona withAnimation bloki bilan boshqaring — alohida .animation() ishlatmang.