AnimatableModifier dan Animatable Kustom
Menganimasikan konten gambar kustom dengan memenuhi Animatable dan AnimatableModifier.
AnimatableModifier dan Animatable Kustom adalah pelajaran Swift Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Swift Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Swift Academy mencakup 4 pelajaran total.
Protokol Animatable
Animatable memberi tahu SwiftUI cara melakukan interpolasi pada suatu tipe selama animasi. Shape secara otomatis mengadopsinya.
struct Wave: Shape, Animatable {
var amplitude: Double
var animatableData: Double {
get { amplitude }
set { amplitude = newValue }
}
func path(in rect: CGRect) -> Path { Path() }
}Properti animatableData
SwiftUI membaca dan menulis animatableData pada setiap frame animasi untuk melakukan interpolasi antara nilai awal dan akhir.
struct GrowingCircle: Shape {
var radius: Double
var animatableData: Double {
get { radius }
set { radius = newValue }
}
func path(in rect: CGRect) -> Path {
Path(ellipseIn: CGRect(x: rect.midX-radius, y: rect.midY-radius, width: radius*2, height: radius*2))
}
}AnimatablePair untuk Beberapa Nilai
Gunakan AnimatablePair untuk menganimasikan dua nilai independen secara bersamaan.
struct Sector: Shape {
var startAngle: Double, endAngle: Double
var animatableData: AnimatablePair<Double, Double> {
get { AnimatablePair(startAngle, endAngle) }
set { startAngle = newValue.first; endAngle = newValue.second }
}
func path(in rect: CGRect) -> Path { Path() }
}ViewModifier + Animatable
Dengan mengadopsi Animatable pada ViewModifier, Anda dapat menganimasikan berbagai efek visual.
struct Shake: ViewModifier, Animatable {
var animatableData: Double = 0
func body(content: Content) -> some View {
content.offset(x: sin(animatableData * .pi * 4) * 8)
}
}Menggerakkan Animasi
Ubah nilai yang dapat dianimasikan di dalam withAnimation, lalu SwiftUI melakukan interpolasi melalui animatableData.
struct ShakeView: View {
@State private var shakes = 0.0
var body: some View {
Text("Hello")
.modifier(Shake(animatableData: shakes))
.onTapGesture {
withAnimation(.linear(duration: 0.5)) { shakes += 1 }
}
}
}AnimatableModifier (usang) vs Animatable + ViewModifier
AnimatableModifier sudah usang pada SDK yang lebih baru. Sebaiknya adopsi Animatable langsung pada ViewModifier Anda.
// Modern approach:
struct MyMod: ViewModifier, Animatable { ... }
// Avoid (deprecated):
// struct MyMod: AnimatableModifier { ... }Tipe Angka Kustom sebagai animatableData
Tipe apa pun yang mengadopsi VectorArithmetic dapat digunakan sebagai animatableData. CGFloat, Double, dan AnimatablePair milik Swift semuanya memenuhi syarat.
extension MyColor: VectorArithmetic {
static func += (lhs: inout MyColor, rhs: MyColor) { ... }
mutating func scale(by rhs: Double) { ... }
var magnitudeSquared: Double { ... }
}Modifier Berbasis Kemajuan
Pola yang umum: animasikan nilai progress dari 0 hingga 1, lalu hitung properti visual di dalam modifier.
struct FillModifier: ViewModifier, Animatable {
var progress: Double
var animatableData: Double { get { progress } set { progress = newValue } }
func body(content: Content) -> some View {
content.overlay(Color.blue.opacity(progress))
}
}Merangkai dengan .animation
Tambahkan animasi untuk menggerakkan nilai kemajuan modifier yang dapat dianimasikan secara otomatis saat status berubah.
Text("Loading")
.modifier(FillModifier(progress: isLoaded ? 1 : 0))
.animation(.easeInOut(duration: 1.0), value: isLoaded)Menganimasikan Shape Kustom
Penggunaan yang paling kuat adalah mengubah bentuk di antara dua path dengan melakukan interpolasi pada titik kontrol melalui animatableData.
struct Blob: Shape, Animatable {
var bulge: Double
var animatableData: Double { get { bulge } set { bulge = newValue } }
func path(in rect: CGRect) -> Path {
// compute bezier with bulge-adjusted control points
Path()
}
}Performa
SwiftUI memanggil body modifier pada setiap frame animasi. Minimalkan perhitungan di dalam body agar animasi tetap lancar pada 60/120 fps.
// OK: simple math in body
// AVOID: network calls, heavy computation in animated bodyPemeriksaan Singkat
Apa yang dibaca dan ditulis SwiftUI pada setiap frame animasi untuk melakukan interpolasi pada tipe kustom yang dapat dianimasikan?
Ringkasan Pelajaran
Adopsi Animatable pada shape atau modifier tampilan, lalu sediakan animatableData (nilai VectorArithmetic). SwiftUI melakukan interpolasi terhadapnya pada setiap frame. Gunakan AnimatablePair untuk dua nilai. Gerakkan dengan withAnimation atau .animation.
Belajar Swift dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 122
- Pelajaran
- 409
Pertanyaan yang Sering Diajukan
Apakah pelajaran “AnimatableModifier dan Animatable Kustom” gratis?
Ya — teks lengkap “AnimatableModifier dan Animatable Kustom” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Swift Academy, upgrade ke CoddyKit PRO. Kursus Swift Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “AnimatableModifier dan Animatable Kustom”?
Menganimasikan konten gambar kustom dengan memenuhi Animatable dan AnimatableModifier. Kamu berlatih Swift Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Swift Academy?
Tidak diperlukan pengalaman sebelumnya. Swift Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “AnimatableModifier dan Animatable Kustom” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Swift Academy ini?
Ya. Setiap pelajaran Swift Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Animasi Implisit vs Eksplisit
- matchedGeometryEffect untuk Transisi Hero
- AnimatableModifier dan Animatable Kustom
- TimelineView dan Canvas untuk Gambar Berkinerja Tinggi