时间戳

首页 > 解决方案 > 延迟 SwiftUI 组合转换

swift - 延迟 SwiftUI 组合转换

问题描述

使用以下代码，目的是让过渡同时淡入（不透明度）和向下移动（偏移），但延迟为 0.3 秒。

有了这个，0.3 秒后只有不透明度过渡可见：

.transition(.offset(x: 0, y: -20)
.combined(with: .opacity)
.animation(.easeOut.delay(0.3)))

我想也许动画必须在两个过渡上设置，初始和组合的一个像这样（剧透：与以前相同的结果）：

.transition(.offset(x: 0, y: -20)
.combined(with:.opacity.animation(.easeOut.delay(0.5)))
.animation(.easeOut.delay(0.5)))

更改顺序也不会改变结果：

.transition(.offset(x: 0, y: -20)
.animation(.easeOut.delay(0.5))
.combined(with: .opacity.animation(.easeOut.delay(0.5))))

那么我在这里做错了什么？如何延迟合并转换？

标签： swiftswiftuiswiftui-animation

解决方案

试试这个

extension AnyTransition {
    static var delayAndFade: AnyTransition {
        return AnyTransition.identity
              .combined(with: .opacity)
              .animation(.default.delay(3))
    }
}

如果要移动视图，则应offset使用该withAnimation功能对其进行动画处理。

         Text("Move and fade.")
             .offset(y: offset)
             .transition(.delayAndFade)


struct ContentView: View {
    @State private var showDetails = false
    @State var offset:CGFloat = 0

    var body: some View {
        VStack {
            Button("Press to show details") {
                showDetails.toggle()
                withAnimation(.default.delay(3)) {
                    self.offset = -20
                }
            }

        
            if showDetails {
                Text("Move and fade.")
                    .offset(y: offset)
                    .transition(.delayAndFade)
            }
        }
    }
}

更新

extension AnyTransition {
    static var moveAndFade: AnyTransition {
        return AnyTransition.move(edge: .top)
              .combined(with: .opacity)
    }
}

试试这个

HStack {
     Text("Move and fade.")
}
.animation(Animation.default.delay(2))
.transition(.moveAndFade)

它适用于除文本之外的所有类型的视图。

struct ContentView: View {
    @State private var showDetails = false
    @State var offset:CGFloat = 0

    var body: some View {
        VStack {
            Button("Press to show details") {
                showDetails.toggle()

            }

        
            if showDetails {
                
                // Works!
                HStack {
                    Text("Move and fade.")
                }
                .animation(Animation.default.delay(2))
                .transition(.moveAndFade)
                
                Button("Move and fade.") {}
                .animation(Animation.default.delay(2))
                .transition(.moveAndFade)
                
                // Does not work
                Text("Move and fade.")
                .animation(Animation.default.delay(2))
                .transition(.moveAndFade)
            }
        }
    }
}

推荐阅读