# animations

[SwiftUI]() ⟩ [animations](anim) ⟩

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

{% tabs %}
{% tab title="🔴 主題" %}
* :small\_orange\_diamond: [implicit-vs.-explicit](anim/implicit-vs.-explicit "mention")
* :parking: [animatable](anim/animatable "mention")
* :parking: [geometryeffect](anim/animatable/geometryeffect "mention")
* :package: [animation](anim/animation "mention")
* :small\_orange\_diamond: [animation-curves](anim/animation-curves "mention")
{% 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;">**ﬁrst**</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 oﬀ 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="💈範例" %}
* [examples](anim/examples "mention")
  * [loading-indicators](anim/examples/loading-indicators "mention")
  * [spinner](anim/examples/spinner "mention")
  * [wheel](anim/examples/wheel "mention")
* use [timer](../swift/scope/framework/built-in-frameworks/combine/timer "mention") to animate a [view](view/view "mention").
  * [timerview](../swift/scope/framework/built-in-frameworks/combine/timer/timerview "mention") - use Timer.publish()
  * [timerview-scheduledtimer](../swift/scope/framework/built-in-frameworks/combine/timer/timerview-scheduledtimer "mention")
* [animatable](anim/animatable "mention") (use [animatableData](https://developer.apple.com/documentation/swiftui/animatable/animatabledata-swift.property-6nydg) to animate)
  * [vehicle](shapes/shape/sports-car-in-sunset/vehicle "mention") - tap to animate.
  * [animation](shapes/matched-geometry-effect/animation "mention") - matched geometry effect.
  * [polygon](shapes/shape/polygon "mention")
{% 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](shapes/shape "mention").
* [ ] 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](shapes/shape "mention") 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 %}
