如何用SwiftUI实现Apple活动环的火花特效？

问题分析 #

你的当前实现存在几个核心问题：

• 重复创建多个VortexView并单独旋转的方式冗余，且无法让火花从环形路径的切线方向自然迸发
• 粒子的发射角度、加速度参数不符合Apple活动环火花的运动轨迹（活动环火花是沿环的切线向外/向上扩散，而非固定角度）
• 粒子的生命周期、大小变化、颜色渐变参数不够贴合真实火花的衰减效果

优化方案 #

以下是调整后的实现，重点优化了粒子系统配置和视图结构：

import SwiftUI
import Vortex

struct ActivityRingSparkView: View {
    // 控制环的旋转动画
    @State private var ringRotation = 0.0
    
    var body: some View {
        ZStack {
            // 基础活动环（可选，用于定位）
            Circle()
                .stroke(.blue.opacity(0.3), lineWidth: 20)
                .frame(width: 250, height: 250)
            
            // 单个VortexView实现所有火花效果
            VortexView(activityRingSparkSystem) {
                Circle()
                    .fill(.white)
                    .tag("spark")
            }
            .frame(width: 250, height: 250)
            .rotationEffect(.degrees(ringRotation))
            .onAppear {
                withAnimation(.linear(duration: 2).repeatForever(autoreverses: false)) {
                    ringRotation = 360
                }
            }
        }
    }
}

// 自定义活动环火花粒子系统
let activityRingSparkSystem = VortexSystem(
    tags: ["spark"],
    shape: .ring(radius: 0.45), // 匹配活动环的内侧半径，让火花从环的边缘发射
    birthRate: 80, // 控制火花密度
    emissionDuration: .infinity, // 持续发射
    lifespan: 0.6, // 火花生命周期更短，模拟快速衰减
    speed: 2.5, // 火花初始速度
    speedVariation: 0.5, // 速度随机变化，更自然
    angle: .degrees(90), // 初始角度为向上（配合环形发射，自动沿切线方向）
    angleRange: .degrees(40), // 火花扩散角度范围
    acceleration: [0, -1], // 轻微向上的加速度，模拟重力反向效果
    dampingFactor: 2, // 阻尼，让火花逐渐减速
    colors: .ramp(.white, .yellow, .clear), // 从白到黄再透明的渐变
    size: 0.08, // 初始大小
    sizeVariation: 0.05, // 大小随机
    stretchFactor: 10, // 拉伸效果，模拟运动轨迹
    opacityRange: 0.2...1 // 透明度变化范围
)

#Preview {
    ActivityRingSparkView()
}

关键调整说明 #

• 简化视图结构：用单个VortexView配合环形发射形状，替代多个重复视图，减少冗余
• 匹配发射路径：设置shape: .ring(radius: 0.45)，让火花从活动环的边缘发射
• 调整运动参数：优化速度、加速度、阻尼，让火花沿切线方向自然迸发并逐渐衰减
• 优化视觉效果：调整颜色渐变、生命周期和透明度，模拟真实火花的燃烧消失过程
• 联动旋转动画：让粒子系统随环形路径一起旋转，实现活动环旋转时火花同步发射的效果

内容的提问来源于stack exchange，提问作者user24988933