SOLVED: Day 32- Customizing animations in SwiftUI

@sametkarakurt

Jan '22

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?

@vtabmow

Jan '22

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.

@Obelix

Jan '22

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!

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.