🔰Matched Geometry Effect

SwiftUI ⟩ Drawing ⟩ Matched Geometry Effect ⟩

類似 Keynote 的 "Magic Move"

🔸 定義

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

💈範例

• MGE ⟩ animation - matched geometry effect with or without animation.

• selected button with underline.

📘 手冊

• SwiftUI ⟩

  • Drawing and Graphics ⟩

    • Namespace (strut)

    • MatchedGeometryProperties (strut)

  • Graphics and Rendering Modifiers ⟩ .matchedGeometryEffect()

📗 參考

• Thinking in SwiftUI

  • 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)

  • Part 2

• AppCoda ⟩ Using matchedGeometryEffect to Create View Animations in iOS 14

• objc.io ⟩ Matched Geometry Effect (Part 1)

• Design+Code ⟩ Matched Geometry Effect

👥 相關

• Namespace is property wrapper.