> 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/animatable/geometryeffect.md).

# GeometryEffect

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %}
When an [animatable modifier](/ios/swiftui/anim/animatable/animatable-modifiers.md) animates something that can be expressed as an <mark style="color:orange;">**affine transformation**</mark> (2D/3D), we can also use <mark style="color:purple;">**GeometryEffect**</mark> instead of [Animatable Modifiers](/ios/swiftui/anim/animatable/animatable-modifiers.md).
{% endhint %}
{% endtab %}

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

```swift
struct ShakeEffect: GeometryEffect {

    var times: CGFloat = 0 
    let amplitude: CGFloat = 10 
    
    // ⭐️ 🅿️ Animatable
    var animatableData: CGFloat { 
        get { times } 
        set { times = newValue } 
    }
    
    // ⭐️ 🅿️ GeometryEffect
    func effectValue(size: CGSize) -> ProjectionTransform { 
        ProjectionTransform(CGAffineTransform( 
            translationX: sin(times * .pi * 2) * amplitude, y: 0 
        )) 
    }
}
```

{% endtab %}

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

* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩&#x20;
  * [Drawing and Graphics](https://developer.apple.com/documentation/swiftui/drawing-and-graphics) ⟩ [ProjectionTransform](https://developer.apple.com/documentation/swiftui/projectiontransform) (<mark style="color:red;">**struct**</mark>) - 3x3 matrix.
  * [Animations](https://developer.apple.com/documentation/swiftui/animations) ⟩ [GeometryEffect](https://developer.apple.com/documentation/swiftui/geometryeffect) (<mark style="color:orange;">**protocol**</mark>)
    * [.effectValue(size:)](https://developer.apple.com/documentation/swiftui/geometryeffect/effectvalue\(size:\)) - required instance method.
      {% endtab %}

{% tab title="📜 協定" %}
![](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5-JmwCZMKh_d7RfBaN%2F-MIddqEpjbhO15myOPEj%2F-MIde6Y5WyCqSBMj0SNd%2FAnimatable%20protocol.png?alt=media\&token=336ebcb8-8b17-40e8-b62b-f9533958767b)
{% endtab %}

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

* SwiftUI Lab ⟩ Advanced SwiftUI Animations ⟩
  * [ ] [Part 2: GeometryEffect](https://swiftui-lab.com/swiftui-animations-part2/)
    {% endtab %}
    {% endtabs %}