0

I was trying to make the button go easeInOut but not sure how to do it. I was watching a tutorial but it's out of date and I'm a beginner. Can someone show what the code would look like when implemented?

.animation(.easeInOut(duration:0.25))

import SwiftUI

typealias OnboardingGetStartedAction = () -> Void

struct OnboardingView: View {
    
    @Environment(\.presentationMode) private var presentationMode
    
    let item: OnboardingItem
    
    let limit: Int
    let handler: OnboardingGetStartedAction
    
    @Binding var index: Int
    
    internal init(item: OnboardingItem,
                  limit: Int,
                  index: Binding<Int>,
                  handler: @escaping OnboardingGetStartedAction) {
        self.item = item
        self.limit = limit
        self._index = index
        self.handler = handler
    }
    
    var body: some View {
        VStack {
            Spacer()
            
            Image(systemName: item.sfSymbol ?? "")
                .padding(.bottom,50)
                .font(.system(size:120, weight: .bold))
            
            Text(item.title ?? "")
                .font(.system(size: 32, weight: .bold))
                .multilineTextAlignment(.center)
                .padding(.bottom,2)
                .foregroundColor(.primary)
            
            Text(item.content ?? "")
                .font(.system(size: 12, weight: .semibold))
                .multilineTextAlignment(.center)
                .padding(.horizontal, 50)
                .foregroundColor(.secondary)
            
            Button(action: {
                presentationMode.wrappedValue.dismiss()
                handler()
            }, label: {
                Text("Get Started")
            })
                .font(.system(size: 18, weight: .bold))
                .foregroundColor(.white)
                .padding(.horizontal,25)
                .padding(.vertical,10)
                .background(Color.red)
                .clipShape(Capsule())
                .padding(.top, 50)
                .opacity(index == limit ? 1 : 0)
                .allowsHitTesting(index == limit)
                .animation(.easeInOut(duration:0.25))
        }
        .padding(.bottom, 150)
    }
}

struct OnboardingView_Previews: PreviewProvider {
    static var previews: some View {
        //dummy data just to see if this works
        OnboardingView(item: OnboardingItem( title: "Dummy Data!", content: "Dummy Data!", sfSymbol: "building.columns.fill"),
                       limit: 0,
                       index: .constant(0)) {}
    }
}
Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220

2 Answers2

0

see animation(_:value)

you should animate with an Equatable value.

zzzwco
  • 184
  • 6
0

.animation(.easeInOut(duration:0.25)) was deprecated in iOS 15.0 because it trigger animation on every small changes for example: on changing button title when user click button will trigger animation, so it would look strange to users, so to handle this case Apple introduce a new parameter named value .animation(.easeInOut(duration:0.25), value: shouldAnimate), that will animate your view only when the value parameter is changed

You can run below code to see how it is working

import SwiftUI

struct OnboardingView: View {
    
    @State private var shouldAnimateButton: Bool = false
    @State private var buttonTitle = "Scale Up"
    
    var body: some View {
        Button(buttonTitle) {
            shouldAnimateButton.toggle()
            buttonTitle = shouldAnimateButton ? "Scale Down" : "Scale Up"
        }
        .padding()
        .foregroundColor(.white)
        .background(.red)
        .scaleEffect(shouldAnimateButton ? 2.0 : 1.0)
        .animation(.easeOut(duration: 0.3), value: shouldAnimateButton)
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        OnboardingView()
    }
}
Umair Khan
  • 993
  • 8
  • 14