WWDC22 SALE: Save 50% on all my Swift books and bundles! >>

SOLVED: Day 32- Customizing animations in SwiftUI

Forums > 100 Days of SwiftUI

Hi,

 @State private var animationAmount = 1.0
    var body: some View {
        Button("Tap Me") {
            // animationAmount += 1
        }
        .padding(50)
        .background(.red)
        .foregroundColor(.white)
        .clipShape(Circle())
        .overlay(
            Circle()
                .stroke(.red)
                .scaleEffect(animationAmount)
                .opacity(2 - animationAmount)
                .animation(
                    .easeInOut(duration: 1)
                        .repeatForever(autoreverses: false),
                    value: animationAmount
                )
        )
        .onAppear {
            animationAmount = 2
        }

First of all animationAmount = 1.0 and then when a view is shown it's value is 2. Why is its value constantly changing Because the view is shown once i.e. shouldn't animationAmount's value always be 2?

1      

animationAmount starts at 1.0 and gets set to 2.0 like you said, and then stays 2.0. However, this line:

.repeatForever(autoreverses: false)

tells the animation to continue forever once the change from 1.0 to 2.0 occurs.

Add this text view and you'll see animationAmount never changes:

Text(String(animationAmount))

The change occurs onAppear, the animation gets triggered, it repeats forever.

2      

One way to think of these animations is to put yourself in SwiftUI's shoes.

Get a pencil and draw the struct's body when the animationAmount is 1.0. Then draw the struct's body when the animationAmount is 2.0. These are SwiftUI's starting and ending points.

SwiftUI then renders all of the inbetween frames ('tweening') for you. If your animation lasts 1/2 second, it might render 500 frames. If your animation lasts 6 seconds, it might render 50,000 frames. In each frame, SwiftUI gracefully changes the look of your struct. Each frame is rendered with slight changes to color, opacity, and scale.

From the beginning to the end, SwiftUI renders the entire animation sequence and captures the frames in an optimized internal video buffer. Because you added the .repeatForever()modifier, SwiftUI replays the animations in this internal buffer over and over and over again. It was only rendered once, but the modifier ensures it is played on an endless loop.

And Vince is correct. Once the view appears in your app, the animationAmount variable has changed to 2.0 and doesn't change again.

True Fact: I made up the term "optimized internal video buffer." I have no idea how the frames are rendered or stored. It's fast and efficient and easy to implement!

2      

Hacking with Swift is sponsored by Emerge

SPONSORED Why are Swift reference types bad for app startup time, and what’s the performance cost of protocol conformances? That’s just a couple of the topics you can learn about on the Emerge blog — written by the app performance experts behind Emerge’s advanced app optimization and monitoring tools, based on their experience of working at companies like Apple, Airbnb, Snap, and Spotify.

Find out more

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.