Overlapping objects

Question

Created Apr ’22

Replies 1

Boosts 0

Participants 2

Hello everyone!
I'm having a problem with my code and I don't know how to fix it. In fact, when I click the green circle, it gets bigger by wiping out the others, but the purple overlaps. Is there a way to get the purple away too?
Another problem: I have a warning where it says .animation(.spring()) and the warning says "'animation' was deprecated in iOS 15.0: Use withAnimation or animation(_:value:) instead."

import SwiftUI

struct ContentView: View {
        var body: some View {
            LazyVGrid(columns: [GridItem(), GridItem(), GridItem()]) {
                createCircle()
                    .foregroundColor(.blue)
                createCircle()
                    .foregroundColor(.green)
                createCircle()
                    .foregroundColor(.purple)
                createCircle()
                    .foregroundColor(.orange)
                createCircle()
                    .foregroundColor(.yellow)
        }
}

struct createCircle: View {
    @State var scale : CGFloat = 0.25
    var body: some View {
        ZStack {
            Circle()
                 .frame(width: 500 * scale, height: 500 * scale)
                 .onTapGesture {
                     scale = 5
                 }
                 .animation(.spring()) // WARNING: 'animation' was deprecated in iOS 15.0: Use withAnimation or animation(_:value:) instead.
                 .animation(.interpolatingSpring(stiffness: 50, damping: 1), value: scale)

        }
    }
}
}

Can anyone help me?

Boost

Answer 1

Claude31 OP

Apr ’22

I would play it differently, with everything in the ContentView:

struct ContentView: View {
    @State var scale : CGFloat = 0.25
    @State var shiftOther : CGFloat = 0.0
    
    var body: some View {
        LazyVGrid(columns: [GridItem(), GridItem(), GridItem()]) {
            Circle()
                .frame(width: 125, height: 125)
                .foregroundColor(.blue)
                .offset(x: -shiftOther, y: 0)
                .animation(.easeInOut(duration: 10), value: scale)
            Circle()
                .frame(width: 500 * scale, height: 500 * scale)
                .foregroundColor(.green)
                .onTapGesture {
                    scale = 2
                    shiftOther = 200 * (scale - 0.25)
                }
                .animation(.easeInOut(duration: 10), value: scale)
            Circle()
                .frame(width: 125, height: 125)
                .foregroundColor(.purple)
                .offset(x: shiftOther, y: 0)
                .animation(.easeInOut(duration: 10), value: scale)
            Circle()
                .frame(width: 125, height: 125)
                .foregroundColor(.orange)
            Circle()
                .frame(width: 125, height: 125)
                .foregroundColor(.yellow)
        }
    }
    
}

.

.animation(.spring()) // WARNING: 'animation' was deprecated in iOS 15.0: Use withAnimation or animation(_:value:) instead.

Did you try:

                    .animation(.spring(), value: scale)

You can also move the others below (tune the duration and delay to get best effect:

struct ContentView: View {
    @State var scale : CGFloat = 0.25
    @State var shiftX : CGFloat = 0.0
    @State var shiftY : CGFloat = 0.0

    var body: some View {
        LazyVGrid(columns: [GridItem(), GridItem(), GridItem()]) {
            Circle()
                .frame(width: 125, height: 125)
                .foregroundColor(.blue)
                .offset(x: -shiftX, y: 0)
                .animation(.easeInOut(duration: 10), value: scale)
            Circle()
                .frame(width: 500 * scale, height: 500 * scale)
                .foregroundColor(.green)
                .onTapGesture {
                    scale = 2
                    shiftX = 200 * (scale - 0.25)
                    shiftY = 180 * (scale - 0.25)
                }
                .animation(.easeInOut(duration: 10), value: scale)
            Circle()
                .frame(width: 125, height: 125)
                .foregroundColor(.purple)
                .offset(x: shiftX, y: 0)
                .animation(.easeInOut(duration: 10), value: scale)
            Circle()
                .frame(width: 125, height: 125)
                .foregroundColor(.orange)
                .offset(x: 0, y: shiftY)
                .animation(.easeInOut(duration: 11).delay(1), value: scale)
            Circle()
                .frame(width: 125, height: 125)
                .foregroundColor(.yellow)
                .offset(x: 0, y: shiftY)
                .animation(.easeInOut(duration: 11.5).delay(0.5), value: scale)
        }
    }
    
}

0