0Pricing
Swift Academy · Ders

Özel AnimatableModifier ve Animatable

Animatable ve AnimatableModifier protokollerine uyarak özel çizilmiş içeriği canlandırın.

Özel AnimatableModifier ve Animatable, CoddyKit'te ücretsiz bir Swift Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Swift Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Swift Academy kursu toplamda 4 dersten oluşur.

Animatable Protokolü

Animatable, SwiftUI'ye bir türün animasyon sırasında nasıl aradeğerleştirileceğini bildirir. Şekiller bu protokole otomatik olarak uyar.

struct Wave: Shape, Animatable {
  var amplitude: Double
  var animatableData: Double {
    get { amplitude }
    set { amplitude = newValue }
  }
  func path(in rect: CGRect) -> Path { Path() }
}

animatableData Özelliği

SwiftUI, başlangıç ve bitiş değerleri arasında aradeğerleme yapmak için her animasyon karesinde animatableData özelliğini okur ve yazar.

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))
  }
}

Birden Çok Değer için AnimatablePair

İki bağımsız değeri aynı anda canlandırmak için AnimatablePair kullanın.

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

Bir ViewModifier türünü Animatable protokolüne uydurmak, keyfi görsel efektleri canlandırmanızı sağlar.

struct Shake: ViewModifier, Animatable {
  var animatableData: Double = 0
  func body(content: Content) -> some View {
    content.offset(x: sin(animatableData * .pi * 4) * 8)
  }
}

Animasyonu Yürütme

Animasyonlanabilir değeri withAnimation içinde değiştirin; SwiftUI aradeğerlemeyi animatableData aracılığıyla gerçekleştirir.

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 (kullanımdan kaldırıldı) ve Animatable + ViewModifier

AnimatableModifier, sonraki SDK sürümlerinde kullanımdan kaldırılmıştır. Bunun yerine ViewModifier'ınızı doğrudan Animatable protokolüne uydurmayı tercih edin.

// Modern approach:
struct MyMod: ViewModifier, Animatable { ... }
// Avoid (deprecated):
// struct MyMod: AnimatableModifier { ... }

animatableData Olarak Özel Sayı Türleri

VectorArithmetic protokolüne uyan her tür animatableData olabilir. Swift'in CGFloat, Double ve AnimatablePair türlerinin tümü bu koşulu karşılar.

extension MyColor: VectorArithmetic {
  static func += (lhs: inout MyColor, rhs: MyColor) { ... }
  mutating func scale(by rhs: Double) { ... }
  var magnitudeSquared: Double { ... }
}

İlerleme Tabanlı Değiştirici

Yaygın bir desen, bir progress değerini 0'dan 1'e canlandırmak ve görsel özellikleri değiştiricinin içinde hesaplamaktır.

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))
  }
}

.animation ile Zincirleme

Durum değişikliklerinde animasyonlanabilir değiştiricinin ilerleme değerini otomatik olarak sürmek için değiştiriciye bir animasyon ekleyin.

Text("Loading")
  .modifier(FillModifier(progress: isLoaded ? 1 : 0))
  .animation(.easeInOut(duration: 1.0), value: isLoaded)

Özel Şekilleri Canlandırma

En güçlü kullanım alanı, kontrol noktalarını animatableData aracılığıyla aradeğerleyerek iki yol şekli arasında dönüşüm yapmaktır.

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()
  }
}

Performans

SwiftUI, her animasyon karesinde değiştiricinin body özelliğini çağırır. Akıcı 60/120 fps için body içindeki hesaplamaları en aza indirin.

// OK: simple math in body
// AVOID: network calls, heavy computation in animated body

Kısa Kontrol

Özel bir animasyonlanabilir türü aradeğerlemek için SwiftUI her animasyon karesinde neyi okur ve yazar?

Ders Özeti

Şekilleri veya görünüm değiştiricilerini Animatable protokolüne uydurun ve bir VectorArithmetic değeri olan animatableData özelliğini sunun. SwiftUI bu değeri her karede aradeğerler. İki değer için AnimatablePair kullanın. Animasyonu withAnimation veya .animation ile başlatın.

Sıkça Sorulan Sorular

“Özel AnimatableModifier ve Animatable” dersi ücretsiz mi?

Evet — “Özel AnimatableModifier ve Animatable” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Swift Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Swift Academy kursu toplamda 4 dersten oluşur.

“Özel AnimatableModifier ve Animatable” dersinde ne öğreneceğim?

Animatable ve AnimatableModifier protokollerine uyarak özel çizilmiş içeriği canlandırın. Swift Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Swift Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Swift Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Özel AnimatableModifier ve Animatable” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Swift Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Swift Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Örtük ve Açık Animasyonlar
  2. Kahraman Geçişleri için matchedGeometryEffect
  3. Özel AnimatableModifier ve Animatable
  4. Yüksek Başarımlı Çizim için TimelineView ve Canvas
← Swift Academy Sayfasına Dön