Expand the circle throughout the screen in SwiftUI

Question

Created Apr ’22

Replies 1

Boosts 0

Views 1.4k

Participants 2

Hi there! I'm trying to build something in SwiftUI and I need a help on it. I want the orange circle to scale and expand, and fill the entire screen, whenI click on it.

Here's my code:

import SwiftUI

struct ContentView: View {
    var body: some View {
       Circle()
            .frame(width: 120, height: 120)
            .foregroundColor(.orange)
    }
}

Thank you.

Answered by Claude31 in 709357022

Use a State var :

struct ContentView: View {

@State var scale : CGFloat = 1.0
var body: some View {
   Circle()
        .frame(width: 120 * scale, height: 120 * scale)
        .foregroundColor(.orange)
        .onTapGesture {
            scale += 0.5
        }
}

}

That's for a discreet increase (one at a time).

For a progressive growth:

struct ContentView: View {
    @State var scale : CGFloat = 1.0
    var body: some View {
       Circle()
            .frame(width: 120 * scale, height: 120 * scale)
            .foregroundColor(.orange)
            .onTapGesture {
                scale = 3    // Compute to find what is the scale for full screen
            }
            .animation(.easeInOut(duration: 3), value: scale)
        // For funny effect:
        // .animation(.interpolatingSpring(stiffness: 50, damping: 1), value: scale)

    }
}

Boost

Answer 1

Claude31 OP

Apr ’22

Accepted Answer

Use a State var :

struct ContentView: View {

@State var scale : CGFloat = 1.0
var body: some View {
   Circle()
        .frame(width: 120 * scale, height: 120 * scale)
        .foregroundColor(.orange)
        .onTapGesture {
            scale += 0.5
        }
}

}

That's for a discreet increase (one at a time).

For a progressive growth:

struct ContentView: View {
    @State var scale : CGFloat = 1.0
    var body: some View {
       Circle()
            .frame(width: 120 * scale, height: 120 * scale)
            .foregroundColor(.orange)
            .onTapGesture {
                scale = 3    // Compute to find what is the scale for full screen
            }
            .animation(.easeInOut(duration: 3), value: scale)
        // For funny effect:
        // .animation(.interpolatingSpring(stiffness: 50, damping: 1), value: scale)

    }
}

0