NEW: Learn to build amazing SwiftUI apps for macOS with my new book! >>

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 RevenueCat

SPONSORED Spend less time managing in-app purchase infrastructure so you can focus on building your app. RevenueCat gives everything you need to easily implement, manage, and analyze in-app purchases and subscriptions without managing servers or writing backend code.

Get Started

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.