> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/swiftui/anim.md).

# animations

[SwiftUI](/ios/swiftui.md) ⟩ [animations](/ios/swiftui/anim.md) ⟩

{% embed url="<https://youtu.be/38_BFPaIcG4>" %}

{% tabs %}
{% tab title="🔴 主題" %}

* :small\_orange\_diamond: [implicit vs. explicit](/ios/swiftui/anim/implicit-vs.-explicit.md)
* :parking: [Animatable](/ios/swiftui/anim/animatable.md)
* :parking: [GeometryEffect](/ios/swiftui/anim/animatable/geometryeffect.md)
* :package: [Animation](/ios/swiftui/anim/animation.md)
* :small\_orange\_diamond: [Animation Curves](/ios/swiftui/anim/animation-curves.md)
  {% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="success" %}
To animate values, SwiftUI uses the <mark style="color:purple;">**Animatable**</mark> protocol, which has only one requirement: the <mark style="color:purple;">**animatableData**</mark> property with a type that conforms to the <mark style="color:purple;">**VectorArithmetic**</mark> protocol.
{% endhint %}

{% hint style="info" %}

* When you use the <mark style="color:red;">**animation(\_:)**</mark> modifier on an <mark style="color:red;">**equatable**</mark> view, SwiftUI animates any changes to <mark style="color:red;">**animatable**</mark> properties of the view. A view’s **color**, **opacity**, **rotation**, **size**, and other properties are all animatable.&#x20;
* When the view <mark style="color:red;">**isn’t equatable**</mark>, you can use the <mark style="color:red;">**animation(\_:value:)**</mark> modifier to start animations when the **specified value changes**.
  {% endhint %}

{% hint style="success" %}
**Animation** vs. **transition**:

* <mark style="color:red;">**animation**</mark>: animate a view onscreen <mark style="color:orange;">**from one state to another**</mark>.&#x20;
* <mark style="color:red;">**transition**</mark>: animate the <mark style="color:orange;">**insertion**</mark> of a new view or the <mark style="color:orange;">**removal**</mark> of an existing view.
  {% endhint %}

{% hint style="info" %}
When <mark style="color:red;">**repeating**</mark> an animation, the <mark style="color:orange;">**first**</mark> repeat animates in the <mark style="color:red;">**forward direction**</mark>, the <mark style="color:orange;">**second**</mark> repeat in the <mark style="color:red;">**reverse direction**</mark>, and so on. We can turn this behavior off by passing <mark style="color:purple;">**false**</mark> to the the <mark style="color:purple;">**autoreverses**</mark> parameter of <mark style="color:purple;">**repeatCount**</mark>.
{% endhint %}
{% endtab %}

{% tab title="💈範例" %}

* [Animations ⟩ examples](/ios/swiftui/anim/examples.md)
  * [Loading Indicators](/ios/swiftui/anim/examples/loading-indicators.md)
  * [Spinner](/ios/swiftui/anim/examples/spinner.md)
  * [Wheel of Fortune](/ios/swiftui/anim/examples/wheel.md)
* use [Timer](/ios/swift/scope/framework/built-in-frameworks/combine/timer.md) to animate a [View](/ios/swiftui/view/view.md).
  * [TimerView](/ios/swift/scope/framework/built-in-frameworks/combine/timer/timerview.md) - use Timer.publish()
  * [TimerView (scheduledTimer)](/ios/swift/scope/framework/built-in-frameworks/combine/timer/timerview-scheduledtimer.md)
* [Animatable](/ios/swiftui/anim/animatable.md) (use [animatableData](https://developer.apple.com/documentation/swiftui/animatable/animatabledata-swift.property-6nydg) to animate)
  * [Vehicle](/ios/swiftui/shapes/shape/sports-car-in-sunset/vehicle.md) - tap to animate.
  * [MGE ⟩ animation](/ios/swiftui/shapes/matched-geometry-effect/animation.md) - matched geometry effect.
  * [Polygon](/ios/swiftui/shapes/shape/polygon.md)
    {% endtab %}

{% tab title="📗 參考" %}

* [ ] objc.io ⟩&#x20;
  * [ ] [Transactions and Animations](https://www.objc.io/blog/2021/11/25/transactions-and-animations/)
  * [ ] Thinking in SwiftUI, Ch. 6: Animations
* [ ] SwiftUI Lab ⟩ Advanced SwiftUI Animations ⟩
  * [ ] [Part 1: Paths](https://swiftui-lab.com/swiftui-animations-part1/)
  * [ ] [Part 2: GeometryEffect](https://swiftui-lab.com/swiftui-animations-part2/)
  * [ ] [Part 3: AnimatableModifier](https://swiftui-lab.com/swiftui-animations-part3/)
* [ ] QVIK ⟩ [Basics of SwiftUI Animation](https://qvik.com/news/basics-of-swiftui-animation/) #todo
* [ ] Hacking with Swift ⟩ [Customizing animations in SwiftUI](https://www.hackingwithswift.com/books/ios-swiftui/customizing-animations-in-swiftui)
* [ ] Zak ⟩ [Mastering transitions in SwiftUI](https://nerdyak.tech/development/2020/10/12/transitions-in-swiftui.html)
* [ ] Big Mountain Studio ⟩ [Trapezium - Part 3: Animating](https://www.bigmountainstudio.com/view/courses/shapes/327908-episode-1-the-trapezium-shape/2556099-trapezium-part-3-animating-mp4) - animating [Shape](/ios/swiftui/shapes/shape.md).
* [ ] YouTube ⟩&#x20;
  * [ ] iOS Academy ⟩ [Twitter Launch Animation](https://youtu.be/4Ll6T1aqfqo)
    {% endtab %}

{% tab title="📘 手冊" %}

* [Core Animation ](https://developer.apple.com/documentation/quartzcore) ⟩ [Core Animation Data Types ](https://developer.apple.com/documentation/quartzcore/core_animation_data_types) ⟩&#x20;
  * [CAMediaTimingFunctionName](https://developer.apple.com/documentation/quartzcore/camediatimingfunctionname) - timing functions, e.g. easeIn ...
* SwiftUI Tutorials ⟩ [Animating Views & Transitions](https://developer.apple.com/tutorials/swiftui/animating-views-and-transitions) ⟩
  * [Add Animations to Individual Views](https://developer.apple.com/tutorials/swiftui/animating-views-and-transitions#Add-Animations-to-Individual-Views)
* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩&#x20;
  * [Drawing and Animation](https://developer.apple.com/documentation/swiftui/drawing-and-animation) ⟩
    * [Animation](https://developer.apple.com/documentation/swiftui/animation) (<mark style="color:red;">**struct**</mark>)
    * [Animatable](https://developer.apple.com/documentation/swiftui/animatable) (<mark style="color:red;">**protocol**</mark>) - describes how to animate a property of a view
    * [withAnimation(*:*:)](https://developer.apple.com/documentation/swiftui/withanimation\(_:_:\))
  * View ⟩ [Graphics and Rendering](https://developer.apple.com/documentation/swiftui/view-graphics-and-rendering) ⟩
    * [.animation(\_:)](https://developer.apple.com/documentation/swiftui/view/animation\(_:\)-7mq1i) - applied to <mark style="color:red;">**equatable**</mark> view
    * [.animation(\_:value:)](https://developer.apple.com/documentation/swiftui/view/animation\(_:value:\)) - applied to <mark style="color:red;">**equatable**</mark> value (<mark style="color:red;">**non-equatable view**</mark>)
      {% endtab %}

{% tab title="📙 書籍" %}

* [SwiftUI Animations Mastery (iOS 14)](https://www.bigmountainstudio.com/view/downloads/swiftui-animations)
  {% endtab %}

{% tab title="👥 相關" %}

* [Shape](/ios/swiftui/shapes/shape.md) can be animated. (👉 [Mark](https://www.bigmountainstudio.com/view/courses/shapes/327908-episode-1-the-trapezium-shape/2556099-trapezium-part-3-animating-mp4))
  {% endtab %}
  {% endtabs %}