When we connect the modifier .animation(.default) to a view, SwiftUI will mechanically animate any modifications that occur to that view the usage of some thing is the default device animation. In practice, that is an “ease in, ease out” animation, which capability iOS will start the animation slow, make it pick out up speed, then sluggish down as it procedures its end.

We can manipulate the kind of animation used by means of passing in unique values to the modifier. For example, we may want to use .easeOut to make the animation begin quick then gradual down to a clean stop:.animation(.easeOut)

There are even spring animations, that purpose the motion to overshoot then return to settle at its target. You can manipulate the preliminary stiffness of the spring (which units its preliminary pace when the animation starts), and additionally how quick the animation have to be “damped” – decrease values motive the spring to leap lower back and forth for longer.

For example, this makes our button scale up rapidly then bounce:

.animation(.interpolatingSpring(stiffness: 50, damping: 1)) For extra particular control, we can personalize the animation with a length distinct as a quantity of seconds. So, we should get an ease-in-out animation that lasts for two seconds like this:struct ContentView: View { @State private var animationAmount: CGFloat = 1 var body: some View { Button("Tap Me") { self.animationAmount += 1 } .padding(50) .background(Color.red) .foregroundColor(.white) .clipShape(Circle()) .scaleEffect(animationAmount) .animation(.easeInOut(duration: 2)) } }When we say .easeInOut(duration: 2) we’re truly developing an occasion of an Animation struct that has its very own set of modifiers. So, we can connect modifiers at once to the animation to add a lengthen like this:.animation( Animation.easeInOut(duration: 2) .delay(1) )

You’ll observe that we explicitly have to say Animation.easeInOut() now, due to the fact in any other case Swift isn’t pretty positive what we mean. Regardless, tapping the button will now wait for a 2nd earlier than executing a two-second animation.

We can additionally ask the animation to repeat a positive quantity of times, and even make it leap lower back and ahead through putting autoreverses to true. This creates a one-second animation that will leap up and down earlier than accomplishing its closing size:.animation( Animation.easeInOut(duration: 1) .repeatCount(3, autoreverses: true) )

If we had set repeat be counted to 2 then the button would scale up then down again, then leap without delay lower back up to its large scale. This is due to the fact finally the button should in shape the country of our program, regardless of what animations we practice – when the animation finishes the button have to have something cost is set in animationAmount.

For non-stop animations, there is a repeatForever() modifier that can be used like this:.animation( Animation.easeInOut(duration: 1) .repeatForever(autoreverses: true) )

We can use these repeatForever() animations in aggregate with onAppear() to make animations that begin right now and proceed animating for the lifestyles of the view.

To reveal this, we’re going to eliminate the animation from the button itself and as a substitute follow it an overlay to make a type of pulsating circle round the button.

So, first add this overlay() modifier to the button:.overlay( Circle() .stroke(Color.red) .scaleEffect(animationAmount) .opacity(Double(2 - animationAmount)) )

That makes a stroked purple circle over our button, the use of an opacity price of 2 - animationAmount so that when animationAmount is 1 the opacity is 1 (it’s opaque) and when animationAmount is 2 the opacity is zero (it’s transparent).

Next, dispose of the scaleEffect() modifier from the button and remark out the animationAmount += 1 motion phase too, due to the fact we don’t desire that to exchange any more, and pass its animation modifier up to the circle interior the overlay:.overlay( Circle() .stroke(Color.red) .scaleEffect() .opacity(Double(2 - animationAmount)) .animation( Animation.easeOut(duration: 1) .repeatForever(autoreverses: false) ) )

I’ve switched autoreverses to false, but otherwise it’s the same animation.

Finally, add an onAppear() modifier to the button, which will set animationAmount to 2:.onAppear { self.animationAmount = 2 }

Because the overlay circle makes use of that for a “repeat forever” animation except autoreversing, you’ll see the overlay circle scale up and fade out continuously.

Your completed code need to seem like this:

Button("Tap Me") { // self.animationAmount += 1 } .padding(40) .background(Color.red) .foregroundColor(.white) .clipShape(Circle()) .overlay( Circle() .stroke(Color.red) .scaleEffect(animationAmount) .opacity(Double(2 - animationAmount)) .animation( Animation.easeOut(duration: 1) .repeatForever(autoreverses: false) ) ) .onAppear { self.animationAmount = 2 }