如何实现选中颜色时MeshGradient与背景色的动画切换？

效果示例 #

阶段1（初始状态）：

阶段2（切换颜色后状态）：

要实现仅在用户选择的颜色变化时触发MeshGradient的平滑动画过渡，你可以通过以下方式重构代码：

• 用统一结构体存储每种颜色对应的网格点位与配色方案
• 监听颜色变量变化，触发动画更新网格状态
• 依赖SwiftUI状态驱动特性实现自然过渡，避免瞬间切换

完整代码实现 #

import SwiftUI

// 封装每种颜色对应的网格配置
struct MeshColorConfig {
    let points: [[Double]]
    let colors: [Color]
}

struct AnimatedMeshGradient: View {
    // 用@State或@Binding接收用户选择的颜色（示例用@State）
    @State private var selectedColor: String = "purple"
    // 当前生效的网格配置
    @State private var currentConfig: MeshColorConfig
    
    // 初始化时加载默认配置
    init() {
        let defaultConfig = Self.configs["purple"]!
        _currentConfig = State(initialValue: defaultConfig)
    }
    
    // 预定义各颜色对应的网格点位与配色
    static let configs: [String: MeshColorConfig] = [
        "purple": MeshColorConfig(
            points: [
                [0.0, 0.0], [0.5, 0.0], [1.0, 0.0],
                [0.0, 0.5], [0.1, 0.5], [1.0, -0.5],
                [0.0, 1.0], [0.8, 0.8], [1.0, 1.0]
            ],
            colors: [
                .purple, .purple, .white,
                .purple, .white, .purple,
                .purple, .purple, .purple
            ]
        ),
        "red": MeshColorConfig(
            points: [
                [0.0, 0.0], [1.0, 0.0], [1.0, 0.0],
                [0.0, 0.5], [0.8, 0.2], [1.0, -0.5],
                [0.0, 1.0], [1.5, 1.0], [1.0, 1.0]
            ],
            colors: [
                .red, .red, .pink,
                .red, .pink, .red,
                .red, .red, .red
            ]
        ),
        "blue": MeshColorConfig(
            points: [
                [0.0, 0.0], [0.2, 0.1], [1.0, 0.0],
                [0.0, 0.5], [0.4, 0.6], [1.0, 0.3],
                [0.0, 1.0], [0.7, 0.9], [1.0, 1.0]
            ],
            colors: [
                .blue, .blue, .cyan,
                .blue, .cyan, .blue,
                .blue, .blue, .blue
            ]
        )
    }
    
    var body: some View {
        ZStack {
            MeshGradient(
                width: 3,
                height: 3,
                points: currentConfig.points,
                colors: currentConfig.colors
            )
            
            // 示例：颜色选择按钮组，实际可替换为你的选择组件
            VStack {
                Spacer()
                HStack {
                    Button("紫色") {
                        selectedColor = "purple"
                    }
                    Button("红色") {
                        selectedColor = "red"
                    }
                    Button("蓝色") {
                        selectedColor = "blue"
                    }
                }
                .padding()
                .background(.black.opacity(0.2))
                .cornerRadius(10)
            }
        }
        .ignoresSafeArea()
        .onChange(of: selectedColor) { newColor in
            // 颜色变化时触发平滑动画
            withAnimation(.easeInOut(duration: 2)) {
                currentConfig = Self.configs[newColor]!
            }
        }
    }
}

#Preview {
    AnimatedMeshGradient()
}

核心逻辑说明 #

1. MeshColorConfig结构体：集中管理每种颜色对应的网格点位和配色，避免零散的条件判断，配置更易维护。
2. 颜色变化监听：通过onChange(of: selectedColor)捕捉用户的颜色选择操作，用withAnimation包裹配置更新，让SwiftUI自动处理点位和颜色的平滑过渡。
3. 状态驱动动画：currentConfig作为状态变量，它的变化会触发MeshGradient的视图更新，结合withAnimation的包裹，所有可动画属性都会生成自然过渡效果，无需手动控制帧动画。

注意事项 #

• 确保每种颜色的points数组长度与MeshGradient的width*height一致（示例中为3*3=9个点），否则会导致崩溃。
• 动画时长可根据需求调整，示例中设置为2秒，你可以修改为更适合的数值。
• 如果需要从父视图传递选中的颜色，将selectedColor改为@Binding类型即可。

内容的提问来源于stack exchange，提问作者Gurpreet Singh Bhatia