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

SOLVED: Day 32- Customizing animations in SwiftUI

Forums > 100 Days of SwiftUI


 @State private var animationAmount = 1.0
    var body: some View {
        Button("Tap Me") {
            // animationAmount += 1
                .opacity(2 - animationAmount)
                    .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?


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:


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


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!


Hacking with Swift is sponsored by Guardsquare

SPONSORED AppSweep by Guardsquare helps developers automate the mobile app security testing process with fast, free scans. By using AppSweep’s actionable recommendations, developers can improve the security posture of their apps in accordance with security standards like OWASP.

Learn more

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

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.