UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

SOLVED: Animations headaches

Forums > SwiftUI

Hi, working with SwiftUI since a bit now but still have troubles with animations... For example:

import SwiftUI

struct AnimatedButtonView: View {

    @State private var opacity = 0.5
    @State private var offset = 0.0

    var body: some View {
        VStack(spacing: 50) {
            Image(systemName: "chevron.left")
                .animation(nil)
                .font(.largeTitle)
                .foregroundColor(.gray)
                .opacity(opacity)
                .offset(x: CGFloat(offset))
                .animation(Animation.default.repeatForever())
                .contentShape(Rectangle())
                .onAppear {
                    withAnimation {
                        self.opacity = 1
                        self.offset = -25
                    }
                }
        }

    }

}

struct AnimatedButtonView_Previews: PreviewProvider {
    static var previews: some View {
        AnimatedButtonView()
            .preferredColorScheme(.dark)
    }
}

Here I set first animation to nil to avoid parent animation overriding. As Paul has stated modifiers position matter, so later modifiers should set the animation for the view. But when I add animation nil (anywhere) what I get is a blinking item at fast speed and the offset stops to work.

Another question, I want the chevron to jump and became full opaque every 5 seconds, so play a fast animation than sleep for 5 secs. How can I achive this? Thanks!

3      

Bit-Worker had a question about button animation in Forums > Swift. Hope this gets her closer to a solution! Copy&Paste into Playground. Tested with XCode 12.5. 12 June 21

import SwiftUI
import PlaygroundSupport

struct AnimatedButtonView: View {
    // Timer will publish every 3.2 seconds on main thread.
    let timer = Timer.publish(every: 3.2, on: .main, in: .common).autoconnect()

    // Think of this @State var as a light switch.
    // When OFF, what should your users see?
    // When ON, what should your users see?
    // This is DECLARATIVE programming. DECLARE what your views will be.
    @State private var animate = false

    var body: some View {
        Image(systemName: "hand.point.left.fill" )
            .frame(width: 70, height: 70)
            .font(.largeTitle.bold())
            .foregroundColor(.blue)
            // OFF: Users see image at 0 offset
            // ON: Users see image at -15 offset
            // Animation takes care off all the in between views! Cool beans!
            .offset(x: animate ? -15.0 : 0.0)
            // OFF: Background circle opacity 0.4
            // ON: Background circle opacity 0.2
            // In between on and off? My buddy SwiftUI will figure it out! Awesome!
            .background( Circle().foregroundColor(.blue).opacity(animate ? 0.2 : 0.4) )
            .animation(animate ? Animation.default.repeatForever(autoreverses: true) : Animation.easeOut(duration: 0.5) )
            .onReceive(timer) { _ in
                // Here is where the button view consumes the timer message.
                // Every X seconds switch between ON and OFF state.
                // What's that? you've changed an @State variable? The view redraws itself!
                // When it redraws to incorporate new view modifer parameters,
                // SwiftUI also takes care of the animation!  Sweet!
                self.animate.toggle()
            }
    }
}

PlaygroundPage.current.setLiveView(AnimatedButtonView()
             .frame(width: 250, height: 150, alignment: .center)
)

3      

Wow, perfect, thanks!

3      

Now, it's your turn. First do you understand what's happening? How you declare your two end states and let Swift figure out the animation?

Second, and more importantly, this is a community! Please share your final button code! We'd like to see how you improved it and used it in your app!

3      

You are right Obelix, I'll post here as soon as completed, the button is part of a bigger picture I'm trying to accomplish, maybe I need your help again. I'm opening a new topic

3      

Hacking with Swift is sponsored by RevenueCat

SPONSORED Take the pain out of configuring and testing your paywalls. RevenueCat's Paywalls allow you to remotely configure your entire paywall view without any code changes or app updates.

Learn more here

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.