# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lochiwei.gitbook.io/ios/swiftui/anim.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.