Question

我正在尝试做一些非常简单的事情。首先对填充进行动画处理，然后对宽度进行动画处理。

@state var animate = false

Rect().frame(width: animate ? 200 : 1, height: 2).animate(Animation.easeOut(duration: 0.5).delay(0.5)).padding(.bottom, animate ? 300 : 10).animate(.easeOut)

从此代码中，我希望填充使用最外面的动画修改器，而框架使用内部的动画修改器。因此，我希望填充先动画，然后再进行帧动画延迟，但是它们都在最外面的动画上做动画。

我没错吗？

更新：使用Asperi的异步处理方法解决方案


    @State private var width: CGFloat = 0.1
    @State private var isFirstResponder = false

    private var becameFirstResponder: Binding<Bool> { Binding (
        get: { self.isFirstResponder },
        set: {
            self.isFirstResponder = $0
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                self.width = self.isFirstResponder ? 240 : 0.1

            }

            }
        )}

    var body: some View {
       Divider().frame(width: width, height: 2)
.animation(Animation.easeOut(duration: 1), value: width)
.background(Color.primary)
.padding(.bottom, keyboard.height).animate(.easeOut)
   }

如您所见，对于非常简单的链接动画而言，此代码太复杂了。没有使用asyncAfter的人有解决方案吗？

Answer 1

您延迟了动画，但立即更改了两个值，这就是为什么它很困惑。

这是可能的解决方法

struct DemoDelayedAnimations: View {
    @State private var animate = false

    // separate animatable values
    @State private var width: CGFloat = 1
    @State private var padding: CGFloat = 10
    var body: some View {
        VStack {
            Rectangle()
                .frame(width: width, height: 2)
                    .animation(.easeOut, value: width) // explicit to width
                .padding(.bottom, padding)
                    .animation(.easeOut, value: padding) // explicit to padding
            Divider()
            Button("Go") {
                self.padding = self.padding == 10 ? 300 : 10

                // delay value change, not animation (it reacts on change)
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                    self.width = self.width == 1 ? 200 : 1
                }
            }
        }
    }
}

SwiftUI链接动画

1 个答案: