TEAM LICENSES: Save money and learn new skills through a Hacking with Swift+ team license >>

SOLVED: I don't understand this .animation modifier.

Forums > SwiftUI

So i got to animation section of SwiftUI. I don't understand this .animation modifier, specifically value parameter. in docs it says

value A value to monitor for changes.

but in below program if i give different value to scale and rotation animation, its not working as expected.

import SwiftUI

struct ContentView: View {
    @State private var scale = 1.0;
    @State private var angle = 1.0;

    var body: some View {
        Button("Tap Me") {
            // do nothing
            scale += 0.1
            angle += 10
        }
        .padding(50)
        .background(.red)
        .foregroundStyle(.white)
        .clipShape(.capsule)
        .scaleEffect(scale)
        .rotationEffect(Angle(degrees: angle))
        .animation(.spring(duration: 0.5, bounce: 0.5), value: scale)
        .animation(.spring(duration: 0.5, bounce: 1), value: angle)

    }
}

I different type of animation to scale and rotation, how to do that?

and what is this value parameter really mean?

   

if i give different value to scale and rotation animation, its not working as expected

It's working exactly as you tell it to do. What is your expectation?

Pretend you are an animator at Pixar studios. Grab a piece of paper and draw a circle on the left, and a square on the right.

🟡 ➡ 🟨

Your job is to animate the circle turning INTO a square. You could put one object in the middle of the paper that is a square with rounded corners. But that's a bad animation. Instead you spend a few hours creating hundreds of inbetween frames where you ever-so-slightly change the rounded circle into straighter and straighter lines eventually forming a square.

Changing from one view to another is the animation sequence.

In your button view above, the before button is a capsule shape, just large enough to hold "Tap Me" text and a padding of 50. Your after button is the same capsule shape, but scaled UP by 0.1 and rotated by 10 degrees.

SwiftUI is the animator in this case, and draws several hundred inbetween frames to make the before and after views magically grow and rotate in your application.

Trigger the Animation

But the question is WHEN do you change from the before button to the after button? This is the job of the .animation modifier. It watches the scale variable. When ever the scale variable changes, it tells SwiftUI to animate from the before button state to the after button state.

In your code above, you're telling SwiftUI to start the animation when the scale or the angle varibles change. In your case, this doesn't make sense because you change BOTH at the same time. Remove the second .animation modifier and your animation still works.

Keep Coding

If your code doesn't animate to your expectations, you need to better define your before shape and your after shape. Then you need to animate between those two shapes.

1      

@Obelix thanks for the explanation. What i wanted to do was have different style of animation for scale change and angle change. e.g: scaling springy animation, and angle change could be easeIn for example.

is there any way to achive both animation on single button tap?

   

Modifiers order with animation applied matters here.

struct ContentView: View {
    @State private var scale = 1.0;
    @State private var angle = 1.0;

    var body: some View {
        Button("Tap Me") {
            // do nothing
            scale += 0.1
            angle += 90
        }
        .padding(50)
        .background(.red)
        .foregroundStyle(.white)
        .clipShape(.capsule)
        .scaleEffect(scale) // Modifier will change 1
        .animation(.spring(duration: 0.5, bounce: 0.5), value: scale) // Animation 1
        .rotationEffect(Angle(degrees: angle)) // Modifier will change 2
        .animation(.easeInOut(duration: 2), value: angle) // Animation 2

    }
}

1      

Hacking with Swift is sponsored by String Catalog.

SPONSORED Get accurate app localizations in minutes using AI. Choose your languages & receive translations for 40+ markets!

Localize My App

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.