🏎️Animations

SwiftUI ⟩ Animations ⟩

🔴 主題

• 🔸 implicit vs. explicit

• 🅿️ Animatable

• 🅿️ GeometryEffect

• 📦 Animation

• 🔸 Animation Curves

⭐️ 重點

To animate values, SwiftUI uses the Animatable protocol, which has only one requirement: the animatableData property with a type that conforms to the VectorArithmetic protocol.

• 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.

Animation vs. transition:

• animation: animate a view onscreen from one state to another.

• transition: animate the insertion of a new view or the removal of an existing view.

When repeating an animation, the first repeat animates in the forward direction, the second repeat in the reverse direction, and so on. We can turn this behavior off by passing false to the the autoreverses parameter of repeatCount.

💈範例

• Animations ⟩ examples

  • Loading Indicators

  • Spinner

  • Wheel of Fortune

• use Timer to animate a View.

  • TimerView - use Timer.publish()

  • TimerView (scheduledTimer)

• Animatable (use animatableData to animate)

  • Vehicle - tap to animate.

  • MGE ⟩ animation - matched geometry effect.

  • Polygon

📗 參考

• objc.io ⟩

  • Transactions and Animations

  • Thinking in SwiftUI, Ch. 6: Animations

• 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.

• YouTube ⟩

  • iOS Academy ⟩ Twitter Launch Animation

📘 手冊

• Core Animation ⟩ Core Animation Data Types ⟩

  • CAMediaTimingFunctionName - timing functions, e.g. easeIn ...

• SwiftUI Tutorials ⟩ Animating Views & Transitions ⟩

  • Add Animations to Individual Views

• SwiftUI ⟩

  • Drawing and Animation ⟩

    • Animation (struct)

    • Animatable (protocol) - describes how to animate a property of a view

    • withAnimation(::)

  • View ⟩ Graphics and Rendering ⟩

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

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

📙 書籍

• SwiftUI Animations Mastery (iOS 14)

👥 相關

• Shape can be animated. (👉 Mark)