如何在 SwiftUI 中为按下时的导航链接设置动画?

Posted

技术标签:

【中文标题】如何在 SwiftUI 中为按下时的导航链接设置动画?【英文标题】:How to animate the navigation link on press in SwiftUI? 【发布时间】:2021-01-11 14:30:41 【问题描述】:

我正在尝试通过在按下 NavigationLink() 时提供一些反馈来改进用户体验。 我的意思是一个简单的动画,它会增长然后缩小链接以显示它被按下或以任何其他方式提供反馈。

这是我要改进的代码:

NavigationLink(
    destination: TrickView(trickId: begginerTricks[index]["trickId"] as! String),
    label: 
        TrickRowView(name: begginerTricks[index]["trickName"] as! String,
        trickType: begginerTricks[index]["trickType"] as! String,
        trickComplete: [false,false,false,false],
        width: width * 0.73, height: height * 0.13)
)
.padding(.bottom, 15)
                                                

这是导航链接列表中的一个 NavigationLink。

如能提供任何帮助,我们将不胜感激。

【问题讨论】:

向我们展示您的“尝试改进”代码 【参考方案1】:

有很多方法可以为您的导航链接添加动画。 这是其中之一。 您可以创建ButtonStyle 并使用scaleEffectbackground 将其应用于导航链接,也可以根据您的选择添加其他内容。

按钮样式:

struct ThemeAnimationStyle: ButtonStyle 
    func makeBody(configuration: Self.Configuration) -> some View 
        configuration.label
            .font(.title2)
            .foregroundColor(Color.white)
            .frame(height: 50, alignment: .center)
            .background(configuration.isPressed ? Color.green.opacity(0.5) : Color.green)
            .cornerRadius(8)
            .shadow(color: Color.gray, radius: 10, x: 0, y: 0)
            .scaleEffect(configuration.isPressed ? 0.9 : 1.0) //<- change scale value as per need. scaleEffect(configuration.isPressed ? 1.2 : 1.0)
    

使用方法:

var body: some View 
    NavigationView 
        NavigationLink(
            destination: Text("Destination view"),
            label: 
                Text("MyButton")
                    .padding()
            )
            .buttonStyle(ThemeAnimationStyle())
    

【讨论】:

以上是关于如何在 SwiftUI 中为按下时的导航链接设置动画?的主要内容,如果未能解决你的问题,请参考以下文章

在 ScrollView 中按下时的中心元素

如何在 swiftui 中为子视图设置私有状态变量?

如何在 SwiftUI 中为 Start->Max->Start 设置动画?

在活动之间使用 BottomNavigationView 按下时如何突出显示项目?

鼠标按下时的 JavaScript

表格中的 WKInterfaceGroup 突出显示包含按下时的按钮