Sunday, August 14, 2022
HomeiOS Developmentios - SwiftUI animation: transfer up/down on press, spring on launch -...

ios – SwiftUI animation: transfer up/down on press, spring on launch – the best way to do the “transfer up” half


How can I get the blue circles to first transfer away from the inexperienced circle earlier than getting again to it?

The animation needs to be:

  • press and maintain:
    • the inexperienced circle scales down
    • the blue circles, whereas cutting down as nicely, first transfer “up” (away from their resting place, as if pushed away by the stress utilized) after which down (to the touch the inexperienced circle once more, as in the event that they have been pulled again by some gravitational pressure)
  • launch
    • all the pieces springs again into place
    • (bonus) ideally, the blue circles are ejected because the inexperienced circle springs up, and so they fall again down of their resting place (subsequent to the floor)

I received all the pieces working besides the blue circles shifting up half.

That is the present animation:
enter image description here

And its playground.

import SwiftUI
import PlaygroundSupport

struct DotsView: View {
    var diameter: CGFloat = 200
    var dimension: CGFloat = 25
    var isPressed: Bool = false

    var physique: some View {
        ZStack {
            ForEach(0...5, id: .self) { i in
                Circle()
                    .fill(Shade.blue)
                    .body(width: dimension, top: dimension)
                    .offset(x: 0, y: -(diameter)/2 - dimension/2)
                    .rotationEffect(.levels(CGFloat(i * 60)))
            }
        }
        .body(width: diameter, top: diameter)
        .animation(.none)
        .scaleEffect(isPressed ? 0.8 : 1)
        .animation(
            isPressed ? .easeOut(period: 0.2) : .interactiveSpring(response: 0.35, dampingFraction: 0.2),
            worth: isPressed
        )
        .background(
            Circle()
                .fill(Shade.inexperienced)
                .scaleEffect(isPressed ? 0.8 : 1)
                .animation(isPressed ? .none : .interactiveSpring(response: 0.35, dampingFraction: 0.2), worth: isPressed)
        )
    }
}

struct ContentView: View {
    @State personal var isPressed: Bool = false

    var physique: some View {
        DotsView(
            diameter: 200,
            isPressed: isPressed
        )
        .body(width: 500, top: 500)
        .simultaneousGesture(
            DragGesture(minimumDistance: 0)
                .onChanged { _ in
                    isPressed = true
                }
                .onEnded { _ in
                    isPressed = false
                }
        )
    }
}

let view = ContentView()
PlaygroundPage.present.setLiveView(view)

Thanks

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments