SwiftUI中LinearGradient的offset动画无法正常工作

我来帮你解决这个逐行显示文本的动画问题～你遇到的问题大概率是因为没把LinearGradient和文本的遮罩（mask）结合好，而且动画触发逻辑也没设置到位，导致渐变的“逐渐显示”效果没生效。

先给你梳理核心问题：单纯给文本加渐变是没用的，我们需要用渐变作为文本的遮罩，通过动画渐变的偏移量，让文本从下到上（或者你想要的方向）逐渐显示出来。下面是调整后的完整代码：

struct GradientView: View {
    @State var animateBlur = false
    @State var isVisible: Bool = false
    // 控制渐变偏移的状态，1.0是完全隐藏文本，0.0是完全显示
    @State private var gradientOffset: CGFloat = 1.0
    let text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "
    
    var body: some View {
        VStack {
            GroupBox {
                Toggle("Visible", isOn: $isVisible)
                    .onChange(of: isVisible) { newValue in
                        // 切换开关时触发平滑动画
                        withAnimation(.easeInOut(duration: 2.0)) {
                            gradientOffset = newValue ? 0.0 : 1.0
                        }
                    }
            }

            if isVisible {
                Text(text)
                    .font(.title2)
                    .multilineTextAlignment(.leading)
                    .padding()
                    // 关键：用渐变作为文本的遮罩
                    .mask(
                        LinearGradient(
                            gradient: Gradient(colors: [.clear, .black]),
                            startPoint: .top,
                            endPoint: .bottom
                        )
                        // 通过偏移渐变来控制显示范围
                        .offset(y: gradientOffset * UIScreen.main.bounds.height)
                    )
            }
        }
        .padding()
    }
}

关键调整点说明： #

• 新增gradientOffset状态变量：用来控制渐变的垂直偏移量，初始值1.0让渐变完全覆盖文本（此时文本被透明部分遮罩，完全隐藏），当开关打开时，通过动画将偏移量改为0.0，渐变回到原位，文本逐渐显示。
• 用onChange触发动画：给Toggle添加值变化的回调，用withAnimation包裹偏移量的修改，确保动画平滑执行，你可以调整duration参数来控制动画速度。
• 使用.mask()实现遮罩效果：渐变的透明部分会隐藏文本，黑色部分会显示文本，通过偏移渐变的位置，就能实现文本逐行显示的效果。

优化建议： #

如果你的文本高度固定，或者想让动画更贴合文本实际高度，可以用GeometryReader获取文本的尺寸，替换掉UIScreen.main.bounds.height，这样动画不会因为屏幕大小变化而出现偏差：

// 修改mask部分的代码
.mask(
    GeometryReader { geo in
        LinearGradient(
            gradient: Gradient(colors: [.clear, .black]),
            startPoint: .top,
            endPoint: .bottom
        )
        .offset(y: gradientOffset * geo.size.height)
    }
)

这样调整后，动画就会精准地跟随文本高度变化，效果会更自然～

备注：内容来源于stack exchange，提问作者batman