Animasi di SwiftUI — CompileDaily Study

Penjelasan

SwiftUI membuat animasi jadi deklaratif juga: kamu tidak perlu menghitung frame demi frame, cukup beri tahu SwiftUI 'saat state berubah, animasikan perubahannya'. Ada dua pendekatan utama. Pertama, withAnimation(...) { ... } membungkus blok kode yang MENGUBAH state — semua perubahan tampilan akibat perubahan state di dalam blok itu akan dianimasikan. Kedua, modifier .animation(_:value:) ditempel pada View tertentu, memberi tahu SwiftUI untuk otomatis menganimasikan setiap kali value yang ditentukan berubah. SwiftUI menyediakan beberapa kurva animasi bawaan seperti .easeInOut, .spring(), dan .linear, masing-masing bisa diberi durasi. Untuk View yang muncul/hilang lewat kondisi if/else, tambahkan .transition() supaya proses insert/remove-nya juga beranimasi, bukan langsung muncul/hilang mendadak.

Contoh Konsep

import SwiftUI

struct AnimasiView: View {
    @State private var membesar = false

    var body: some View {
        VStack(spacing: 24) {
            Circle()
                .fill(Color.orange)
                .frame(width: membesar ? 150 : 80, height: membesar ? 150 : 80)
                .animation(.spring(), value: membesar)

            Button("Toggle Ukuran") {
                withAnimation(.easeInOut(duration: 0.4)) {
                    membesar.toggle()
                }
            }
        }
    }
}

Praktikum

Buat @State private var terbuka = false. Buat Rectangle dengan opacity 0 jika tertutup dan 1 jika terbuka (pakai .opacity), lalu Button yang mengubah terbuka di dalam withAnimation(.easeInOut).

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Kalau animasi terasa tidak terjadi sama sekali, cek apakah perubahan state benar-benar terjadi di dalam blok withAnimation, atau apakah modifier .animation(value:) menunjuk ke property yang tepat — animasi hanya terpicu saat NILAI yang diawasi benar-benar berbeda dari sebelumnya.