# Transitions

[SwiftUI](..) ⟩ [Animations]() ⟩ Transitions

{% tabs %}
{% tab title="💈範例" %}
* [scale](transitions/scale "mention")
{% endtab %}

{% tab title="📗 參考" %}
* [ ] objc.io ⟩ [Transitions in SwiftUI](https://www.objc.io/blog/2022/04/14/transitions/) ⭐️
* [ ] SwiftUI Lab ⟩ [Advanced SwiftUI Transitions](https://swiftui-lab.com/advanced-transitions/)
* [ ] Mastering SwiftUI, Ch. 9: Animations & Transitions
* [ ] Zak ⟩ [Mastering transitions in SwiftUI](https://nerdyak.tech/development/2020/10/12/transitions-in-swiftui.html)
{% endtab %}

{% tab title="⭐️ 重點" %}
{% 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="danger" %}
the <mark style="color:red;">**transition**</mark> should be associated with an <mark style="color:orange;">**animation**</mark>, otherwise, it <mark style="color:red;">**won't work on its own**</mark>.
{% endhint %}

{% hint style="info" %}
By default, views **transition** on/offscreen by <mark style="color:red;">**fading**</mark>**&#x20;in/out**. You can customize this by using <mark style="color:red;">**transition(\_:)**</mark>.
{% endhint %}
{% endtab %}

{% tab title="📘 手冊" %}
* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩&#x20;
  * View ⟩[Graphics and Rendering Modifiers](https://developer.apple.com/documentation/swiftui/view-graphics-and-rendering) ⟩ [.transition(\_:)](https://developer.apple.com/documentation/swiftui/view/transition\(_:\))
  * [Animations](https://developer.apple.com/documentation/swiftui/animations) ⟩ [AnyTransition](https://developer.apple.com/documentation/swiftui/anytransition) (<mark style="color:red;">**struct**</mark>) - .opacity, .offset, .move, .slide, .scale ...
{% endtab %}

{% tab title="🖥️ 影片" %}
{% embed url="https://youtu.be/AuUz_LA2ap4" %}
tundsdev ⟩ Transitions in SwiftUI
{% endembed %}
{% endtab %}
{% endtabs %}
