swift 如何改变颜色的动画NavigationLink时,另一个按钮点击?

wvyml7n5  于 2023-10-15  发布在  Swift
关注(0)|答案(2)|浏览(117)

我试图改变颜色的动画NavigationLink时,另一个按钮按下。NavigationLink背景有两种不同的颜色在动画中不断变化,我想在不停止动画的情况下单击按钮时更改这两种颜色。

import SwiftUI

struct FirstView: View {
    
    @State var animate: Bool = false
    
    @State var secondaryColor: Color = Color("SecondaryAccentColor")
    @State var primaryColor: Color = Color("AccentColor")
    
    var body: some View {
        ScrollView {
            VStack(spacing: 10) {
                
                Text("Click on the Navigate button to go to the next page!")
                    .font(.title)
                    .fontWeight(.semibold)
                
                Text("Click on the Color button to change the colors!")
                    .padding(.bottom, 25)
                
                NavigationLink(
                    destination: NextPage(),
                    label: {
                        Text("NAVIGATE")
                            .foregroundColor(.white)
                            .font(.title3)
                            .fontWeight(.bold)
                            .frame(height: 60)
                            .frame(maxWidth: .infinity)
                            .background(animate ? secondaryColor : primaryColor)
                            .cornerRadius(15)
                    })
                .padding(.horizontal, 70)
                .shadow(
                    color: animate ? secondaryColor.opacity(0.4) : primaryColor.opacity(0.4),
                    radius: 15,
                    x: 0,
                    y: 30)
                
                
                Spacer()
                
                Button(action: {
                     
                    //CODE FOR THE CHANGING COLORS
                    
                })
                {
                    Text("Color")
                }
                   
            }
            .frame(maxWidth: 400)
            .multilineTextAlignment(.center)
            .padding(30)
            .onAppear(perform: addAnimation)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
    
    
    func addAnimation() {
        guard !animate else { return }
        DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
            withAnimation(
            Animation
                .easeOut(duration: 0.5)
                .repeatForever()
            ) {
                animate.toggle()
            }
        }
    }
    
}

struct FirstView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            FirstView()
                .navigationTitle("Hi")
        }
    }
}

我试过这样做,但它没有工作:

Button(action: {
                     
                    primaryColor = Color.red
                    secondaryColor = Color.yellow

                })
                {
                    Text("Color")
                }

当我这样做时,NavigationLink的颜色只会变成黄色,动画停止。

y53ybaqx

y53ybaqx1#

正如好奇的Jorge所说,我正在使用Xcode 15,它正在工作。

import SwiftUI

struct ContentView: View {
    
    @State var animate: Bool = false

    
    @State var primaryColor: Color = Color.yellow
    @State var secondaryColor: Color = Color.red
    
    var body: some View {
        ScrollView {
            VStack(spacing: 10) {
                
                Text("Click on the Navigate button to go to the next page!")
                    .font(.title)
                    .fontWeight(.semibold)
                
                Text("Click on the Color button to change the colors!")
                    .padding(.bottom, 25)
                
                NavigationLink(
                    destination: NextPage(),
                    label: {
                        Text("NAVIGATE")
                            .foregroundColor(.white)
                            .font(.title3)
                            .fontWeight(.bold)
                            .frame(height: 60)
                            .frame(maxWidth: .infinity)
                            .background(animate ? secondaryColor : primaryColor)
                            .cornerRadius(15)
                    })
                .padding(.horizontal, 70)
                .shadow(
                    color: animate ? secondaryColor.opacity(0.4) : primaryColor.opacity(0.4),
                    radius: 15,
                    x: 0,
                    y: 30)
                
                
                Spacer()
                
                Button(action: {
                    primaryColor = Color.green
                    secondaryColor = Color.black
                    
                })
                {
                    Text("Color")
                        .foregroundColor(.pink)
                    
                }
                
            }
            .frame(maxWidth: 400)
            .multilineTextAlignment(.center)
            .padding(30)
            .onAppear(perform: addAnimation)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
    
    
    func addAnimation() {
        guard !animate else { return }
        DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
            withAnimation(
                Animation
                    .easeOut(duration: 0.5)
                    .repeatForever()
            ) {
                animate.toggle()
            }
        }
    }
    
}

struct FirstView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            ContentView()
                .navigationTitle("Hi")
        }
    }
}
kq0g1dla

kq0g1dla2#

当我像这样将withAnimation修改器添加到按钮时,它可以工作:

Button(action: {
    primaryColor = Color.red
    secondaryColor = Color.blue
    withAnimation(
        Animation
            .easeOut(duration: 0.5)
            .repeatForever()
    ) {
        animate.toggle()
    }
})
{
    Text("Color")
}

相关问题