Menu
In SwiftUI I am trying to start and STOP an animation with a button. I can't find a method within SwiftUI that lets me stop an automation. In Swift 4 I used to say "startButton.layer.removeAllAnimations()". Is there an equivalent in SwiftUI?
For the code below, how would I used the value of start to enable/disable the animation. I tried .animation(start ? Animation(...) : .none) without any luck [creates some odd animation within the button].
import SwiftUI
struct Repeating_WithDelay: View {
@State private var start = false
var body: some View {
VStack(spacing: 20) {
TitleText("Repeating")
SubtitleText("Repeat With Delay")
BannerText("You can add a delay between each repeat of the animation. You want to add the delay modifier BEFORE the repeat modifier.", backColor: .green)
Spacer()
Button("Start", action: { self.start.toggle() })
.font(.largeTitle)
.padding()
.foregroundColor(.white)
.background(RoundedRectangle(cornerRadius: 10).fill(Color.green))
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(Color.green, lineWidth: 4)
.scaleEffect(start ? 2 : 0.9)
.opacity(start ? 0 : 1))
.animation(Animation.easeOut(duration: 0.6)
.delay(1) // Add 1 second between animations
.repeatForever(autoreverses: false))
Spacer()
}
.font(.title)
}
}
struct Repeating_WithDelay_Previews: PreviewProvider {
static var previews: some View {
Repeating_WithDelay()
}
}
915
When you create any animation – implicitly, explicitly, or with bindings – you can attach modifiers to that animation to adjust the way it works. For example, if you want an animation to start after a certain number of seconds you should use the delay() modifier.
If you want a SwiftUI view to start animating as soon as it appears, you should use the onAppear() modifier to attach an animation.
To make our animation repeat, we use . repeatForever() . The default behavior of repeat forever is autoreverse, that's mean our animation will scale from 1 to 0.5 then 0.5 back to 1, creating a seamless loop of animation.
default is a basic animation with 0.35 seconds duration and an ease-in-ease-out timing curve.
The following should work, moved animation into overlay-only and added conditional to .default (tested with Xcode 11.2 / iOS 13.2)
Button("Start", action: { self.start.toggle() })
.font(.largeTitle)
.padding()
.foregroundColor(.white)
.background(RoundedRectangle(cornerRadius: 10).fill(Color.green))
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(Color.green, lineWidth: 4)
.scaleEffect(start ? 2 : 0.9)
.opacity(start ? 0 : 1)
.animation(start ? Animation.easeOut(duration: 0.6)
.delay(1) // Add 1 second between animations
.repeatForever(autoreverses: false) : .default, value: start)
)
On GitHub
191
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
