🅿️Animatable

SwiftUI ⟩ Animations ⟩ Animatable ⟩

⭐️ 重點

Animatable describes how to animate a view with respect to some change in the view's data. Use Animatable when you are unable to achieve the animation you want with animation(_:) or withAnimation(_:_:).

By conforming to Animatable, you are able to effectively decouple the animation of your view from the concept of duration, as you give SwiftUI the ability to interpolate arbitrarily between two different values for animatableData. This is also the reason why AnimatableData must conform to VectorArithmetic, which provides the runtime means to add, subtract and scale the animated values as necessary to generate data points for each frame of the animation over an arbitrary time interval.

• To expose two properties as animatable, wrap them in an AnimatablePair.

• nest AnimatablePairs inside each other to support any number of properties.

To examine how SwiftUI interpolates between different values during an animation, we can add log statements to the setter of animatableData or the body method of the animatable modifier.

related protocol: `Animatable`

• `animatableData`: computed property (with default implementation by doing nothing)

• `Shape` conforms to `Animatable`

• `AnimatablePair<First, Second>`: animate ove 2 parameters

• `Animatable`: Angle, CGPoint, CGRect, CGSize, EdgeInsets, StrokeStyle, UnitPoint.

• `VectorArithmetic`: AnimatablePair, CGFloat, Double, EmptyAnimatableData, Float.

• When you use the animation(_:) modifier on an equatable view, SwiftUI animates any changes to animatable properties of the view. A view’s color, opacity, rotation, size, and other properties are all animatable.

• When the view isn’t equatable, you can use the animation(_:value:) modifier to start animations when the specified value changes.

💾 程式

👉 Polygon

// ⭐️ 二維的 `animatableData` (AnimatablePair)
public var animatableData: AnimatablePair<CGFloat, CGFloat> {
    get { AnimatablePair(sides, scale) }
    set {                        // ⭐️ set new animation value
        sides = newValue.first
        scale = newValue.second
    }
}

// ⭐️ 一維的 `animatableData`
var animatableData: CGFloat {
    get { return sides }
    set { sides = newValue }    // ⭐️ set new animation value
}

animatableData 並不是 State 屬性，所以如果在 view 中使用類似：

Text("\(animatableData)")

這樣的寫法，並不會產生任何動畫❗️

💈範例

• Vehicle - tap to animate.

• MGE ⟩ animation - matched geometry effect.

• Polygon

📜 協定

📗 參考

• SwiftUI Lab ⟩ Advanced SwiftUI Animations ⟩

  • Part 1: Paths

  • Part 2: GeometryEffect

  • Part 3: AnimatableModifier

• QVIK ⟩ Basics of SwiftUI Animation #todo

• Hacking with Swift ⟩ Customizing animations in SwiftUI

• Zak ⟩ Mastering transitions in SwiftUI

• Big Mountain Studio ⟩ Trapezium - Part 3: Animating - animating Shape.

• SwiftUI Animations Mastery (iOS 14)

📘 手冊

• SwiftOnTap ⟩ Animatable ⭐️

• SwiftUI Tutorials ⟩ Animating Views & Transitions ⟩

  • Add Animations to Individual Views

• SwiftUI ⟩

  • Animations ⟩

    • Animatable (protocol)

      • animatableData - conforms to VectorArithmetic (protocol).

    • AnimatablePair (struct)

  • Drawing and Animation ⟩

    • Animation (struct)

    • withAnimation(::)

  • View ⟩ Graphics and Rendering ⟩

    • .animation(_:) - applied to equatable view

    • .animation(_:value:) - applied to equatable value (non-equatable view)

👥 相關

• Shape can be animated. (👉 Mark)

• Drawing

• Animatable Modifiers is animatable.

• Animations ⟩ examples - use animatableData.