编程式导航链接推入，没有动画。

Question

编程式导航链接推入，没有动画。

3

在程序化导航链接推入时，没有任何动画效果。是否有一种方法可以像默认样式一样对其进行动画处理？

struct ContentView: View {
    @State private var isShowingDetailView = false

    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: Text("Second View"), isActive: $isShowingDetailView) { EmptyView() }

                Button("Tap to show detail") {
                    isShowingDetailView = true
                }
            }
            .navigationTitle("Navigation")
        }
    }
}

感谢大家！

问题已解决！！

在我的实际代码中，有一个if-else（见上面的代码）。因此，由于此原因，NavigationLink的动画未能工作。我将其删除后，开始正常工作。

if isShowingDetailView { //remove if else
  NavigationLink(destination: Text("Second View"), isActive: $isShowingDetailView) { EmptyView() }
}

- TuracBey

抱歉，伙计们，我已经修正了标题。我想要像默认样式一样对它进行动画处理。 - TuracBey

看起来对我来说是动画（iOS 15，iPhone 12）。您正在测试哪个设备和操作系统版本？ - jnpdx

有趣的是...我使用iOS 15的iPhone 11和iOS 15模拟器。 - TuracBey

1

当我点击按钮时，视图立即打开，没有滚动动画。 - TuracBey

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Al Mustakim · Answer 1

有多种方法在 Swift UI 中添加动画。我已经制作了一个完全可定制的 button style，使用 scaleEffect 在点击链接时进行动画处理。您可以使用它来获取单击导航链接时的简单动画。您可以根据需要修改此代码。

以下是构建 Buttonstyle 的代码：

struct AnimatedButton: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .font(.title2) //change font style as well as 
            .foregroundColor(Color.white) // use your color
            .frame(height: 48, alignment: .center) // use height and width as you need 
            .background(configuration.isPressed ? Color.green.opacity(0.5) : Color.green)
            .cornerRadius(8)
            .shadow(color: Color.gray, radius: 10, x: 0, y: 0) // for adding shadow
            .scaleEffect(configuration.isPressed ? 0.9 : 1.0) // here is the scale vale you can modify to change animation scale 
    }
}

在导航链接上的使用：

VStack{
    NavigationLink(
            destination: Text("Details view"),
            label: {
                Text("Go Details")
                    .padding()
            })
            .buttonStyle(AnimatedButton())
}