Where to put animation

Question

Balvir-255 OP

Created Mar ’22

Replies 1

Boosts 0

Participants 2

Hello everyone! Can someone tell me where to put animation when I use LazyVGrid, please? Here’s my code:

struct MyEmoji : Hashable {
    var char: String
    var num: Int
}

struct ContentView39: View {

    var emojis : [MyEmoji] = [MyEmoji(char: "🐶", num: 0), MyEmoji(char: "🐱", num: 1), MyEmoji(char: "🐱", num: 2), MyEmoji(char: "🦊", num: 3), MyEmoji(char: "🦁", num: 4), MyEmoji(char: "🐝", num: 5), MyEmoji(char: "🐼", num: 6), MyEmoji(char: "🐷", num: 7), MyEmoji(char: "🐮", num: 8)]

    var body: some View {
        LazyVGrid(columns: [GridItem(), GridItem(), GridItem()]) {
            ForEach(emojis, id: \.self, content: { emoji in
                emojiView(content: emoji.char)
            })
    }
}

Thanks in advance.

Boost

Answer 1

Claude31 OP

Mar ’22

You should add the animation as a modifier for LazyGrid.

Note: replacing num by id = UUID() simplifies a little bit.

I tested the following:

struct MyEmoji {
    var char: String
    var id = UUID()
}

struct ContentView: View {
    @State var amount = 1.0
    var emojis : [MyEmoji] = [MyEmoji(char: "🐶"), MyEmoji(char: "🐱"), MyEmoji(char: "🐱"), MyEmoji(char: "🦊"), MyEmoji(char: "🦁"), MyEmoji(char: "🐝"), MyEmoji(char: "🐼"), MyEmoji(char: "🐷"), MyEmoji(char: "🐮")]
    
    var body: some View {
        HStack {
            Spacer()

            Button(action: {
                self.amount += 0.1
            }) {
                Text("More")
            }

            Spacer()

            Button(action: {
                self.amount -= 0.1
            }) {
                Text("Less")
            }

            Spacer()
        }
            
        LazyVGrid(columns: [GridItem(), GridItem(), GridItem()]) {
                ForEach(emojis, id: \.id, content: { emoji in
                    emojiView(content: emoji.char)
                })
            }
            .scaleEffect(amount)
            .animation(.easeInOut(duration: 3), value: amount)
            //                .animation(.spring(), value: amount)  // another one
        }
}

struct emojiView: View {
    @State var isFaceUp: Bool = true

    var content: String = ""
    var body: some View {
        ZStack {
            let shape = RoundedRectangle(cornerRadius: 20.0)
            if isFaceUp {
                shape
                    .frame(width: 90, height: 120)
                    .foregroundColor(.yellow)
                Text(content).font(.largeTitle)
            } else {
                shape.frame(width: 90, height: 120)
                shape.fill()
            }
        }
        .rotation3DEffect(Angle(degrees: isFaceUp ? 180 : 0), axis: (x: 0, y: 1, z: 0))
        .animation(.easeIn(duration: 2), value: isFaceUp)
        .onTapGesture { isFaceUp = !isFaceUp }
    }
}

See other example here:

https://www.reddit.com/r/SwiftUI/comments/myvrmz/fun_stuff_with_lazyvgrid_and_spring_animation_for/

0