> 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/shapes/matched-geometry-effect.md).

# Matched Geometry Effect

[SwiftUI](/ios/swiftui.md) ⟩ [Drawing](/ios/swiftui/shapes.md) ⟩ [Matched Geometry Effect](/ios/swiftui/shapes/matched-geometry-effect.md) ⟩ 

{% hint style="success" %}
類似 **Keynote** 的 "<mark style="color:red;">**Magic Move**</mark>"
{% endhint %}

{% tabs %}
{% tab title="🔸 定義" %}

```swift
func matchedGeometryEffect<ID>(
    id: ID,                        // group id of views
    in namespace: Namespace.ID,    // avoid id collision
    properties: MatchedGeometryProperties = .frame, 
    anchor    : UnitPoint                 = .center, 
    isSource  : Bool                      = true
) -> some View 
    where ID : Hashable
```

{% endtab %}

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

* [MGE ⟩ animation](/ios/swiftui/shapes/matched-geometry-effect/animation.md) - matched geometry effect with or without animation.
* [selected button with underline](/ios/swiftui/data-flow/preferences/examples/selected-button-with-underline.md).
  {% endtab %}

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

* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩&#x20;
  * [Drawing and Graphics](https://developer.apple.com/documentation/swiftui/drawing-and-graphics) ⟩&#x20;
    * [Namespace](https://developer.apple.com/documentation/swiftui/namespace) (<mark style="color:red;">**strut**</mark>)
    * [MatchedGeometryProperties](https://developer.apple.com/documentation/swiftui/matchedgeometryproperties/) (<mark style="color:red;">**strut**</mark>)
  * [Graphics and Rendering Modifiers](https://developer.apple.com/documentation/swiftui/view-graphics-and-rendering) ⟩ [.matchedGeometryEffect()](https://developer.apple.com/documentation/swiftui/view/matchedgeometryeffect\(id:in:properties:anchor:issource:\))
    {% endtab %}

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

* [ ] Thinking in SwiftUI&#x20;
  * [ ] Ch. 4 - Layout, Drawing methods, Matched Geometry Effect (p.72)
  * [ ] Ch. 5 - Custom Layout, Anchors (p.100)
  * [ ] Ch. 6 - Animations, Matched Geometry Effect (p.114)
* [ ] SwiftUI Lab ⟩ MatchedGeometryEffect
  * [ ] [Part 1 (Hero Animations)](https://swiftui-lab.com/matchedgeometryeffect-part1/)
  * [ ] [Part 2](https://swiftui-lab.com/matchedgeometryeffect-part2/)
* [ ] AppCoda ⟩ [Using matchedGeometryEffect to Create View Animations in iOS 14](https://www.appcoda.com/matchedgeometryeffect/)
* [ ] objc.io ⟩ Matched Geometry Effect ([Part 1](https://talk.objc.io/episodes/S01E257-matched-geometry-effect-part-1))
* [ ] Design+Code ⟩ [Matched Geometry Effect](https://designcode.io/swiftui-handbook-matched-geometry-effect)
  {% endtab %}

{% tab title="👥 相關" %}

* [Namespace](https://developer.apple.com/documentation/swiftui/namespace) is [property wrapper](/ios/swift/type/prop/wrapper.md).
  {% endtab %}
  {% endtabs %}