WWDC23 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      

Save 50% in my WWDC23 sale.

SAVE 50% To celebrate WWDC23, all our books and bundles are half price, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.

Save 50% on all our books and bundles!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

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.