AnimatableModifier e Animatable personalizados

O protocolo Animatable

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

Propriedade animatableData

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 para vários valores

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

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

Controlando a animação

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 (obsoleto) versus Animatable + ViewModifier

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

Tipos numéricos personalizados como animatableData

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

Modificador baseado no progresso

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

Encadeando com .animation

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

Animando formas personalizadas

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

Desempenho

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

Verificação rápida

Recapitulação da lição