Matched Geometry animated selection SwiftUI

EmojisAnimatedView.swift

//
//  EmojisAnimatedView.swift
//
//
//  Created by Moussa on 3/4/2024.
//

import Foundation
import SwiftUI


struct ContentView: View {
    var body: some View {
        EmojisAnimatedView()
    }
}

struct EmojisAnimatedView: View {
    @Namespace var ns
    @State private var selection: Int = 1
    
    var body: some View {
        VStack(spacing: 20) {
            LazyVGrid(columns: Array(repeating: GridItem(), count: 3), content: {
                ForEach(0..<30) {  emojiId in
                    EmojiView(selection: $selection, emoji: emojiId)
                        .matchedGeometryEffect(id: emojiId, in: ns)
                }
            })
        }.background(
            RoundedRectangle(cornerRadius: 8).stroke(Color.cyan, lineWidth: 3)
                .matchedGeometryEffect(id: selection, in: ns, isSource: false)
        )
    }
    
    struct EmojiView: View {
        @Binding var selection: Int
        let emojis = ["🌿", "🌎", "🔥", "🌻", "🪐", "🌊", "😁", "🌸", "🌌", "🌲", "😄", "🌠", "🌺", "🌅", "🍉", "🌵", "🌝", "🌄", "😃", "🌕", "🌼", "🌱", "🌞", "🌧️", "🌲", "🌑", "🌾", "😋", "🌔", "😎"]
        let emoji: Int

        
        var body: some View {
            Text(emojis[emoji])
                .font(.largeTitle)
                .padding(10)
                .onTapGesture {
                    withAnimation(.easeInOut(duration: 0.40)) {
                        self.selection = emoji
                    }
                }
        }
    }
}