# Animation

[SwiftUI](..) ⟩ [animations]() ⟩ Animation (`struct`)

{% tabs %}
{% tab title="🔴 主題" %}
* [animate state changes](../view/state/animate)
{% endtab %}

{% tab title="code" %}
:point\_right: [Sec. 5: Compose Animations for Complex Effects](https://developer.apple.com/tutorials/swiftui/animating-views-and-transitions#Compose-Animations-for-Complex-Effects) - Step 3.

```swift
extension Animation {
    /// `Animation.ripple()`
    /// - Returns: `Animation`
    static func ripple() -> Animation {
        Animation
            /// ⭐️ a reduced damping fraction makes the views hop.
            .spring(dampingFraction: 0.5)
            /// ⭐️ speed up the animation, to shorten the time
            ///    it takes to move to its new position.
            .speed(2)
            /// ⭐️ add a delay to each animation based on
            ///    the view's `index` on the graph.
            .delay(0.03 * Double(index))
    }
}

MyView().animation(.ripple())
```
{% endtab %}

{% tab title="📘 手冊" %}
* SwiftUI Tutorials ⟩ [Animating Views & Transitions](https://developer.apple.com/tutorials/swiftui/animating-views-and-transitions) ⟩
  * [Sec. 5: Compose Animations for Complex Effects](https://developer.apple.com/tutorials/swiftui/animating-views-and-transitions#Compose-Animations-for-Complex-Effects) - Step 3.
* [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 %}
{% endtabs %}
