如何像其他应用一样为WidgetKit组件添加动画效果？

尽管Apple官方明确限制WidgetKit组件使用动画，但仍可通过以下几种非常规方案实现60/120fps的动画效果：

1. 基于TimelineEntry的逐帧刷新 #

利用Widget的Timeline机制，预生成对应动画每一帧状态的TimelineEntry，让Widget按固定时间间隔刷新UI，模拟动画效果。这种方式兼容性较好，审核风险较低。

示例代码：

// 定义带动画进度的Entry
struct AnimatedWidgetEntry: TimelineEntry {
    let date: Date
    let progress: CGFloat
}

// 生成包含所有帧的Timeline
struct AnimatedWidgetProvider: TimelineProvider {
    func placeholder(in context: Context) -> AnimatedWidgetEntry {
        AnimatedWidgetEntry(date: Date(), progress: 0)
    }

    func getSnapshot(in context: Context, completion: @escaping (AnimatedWidgetEntry) -> Void) {
        completion(AnimatedWidgetEntry(date: Date(), progress: 0))
    }

    func getTimeline(in context: Context, completion: @escaping (Timeline<AnimatedWidgetEntry>) -> Void) {
        var entries: [AnimatedWidgetEntry] = []
        let currentDate = Date()
        let frameCount = 60 // 1秒60帧
        let interval = 1.0 / Double(frameCount)

        // 生成每帧对应的Entry
        for i in 0..<frameCount {
            let entryDate = currentDate.addingTimeInterval(Double(i) * interval)
            let progress = CGFloat(i) / CGFloat(frameCount)
            entries.append(AnimatedWidgetEntry(date: entryDate, progress: progress))
        }

        let timeline = Timeline(entries: entries, policy: .atEnd)
        completion(timeline)
    }
}

// 在View中根据Entry状态更新UI
struct AnimatedWidgetView: View {
    var entry: AnimatedWidgetProvider.Entry

    var body: some View {
        Circle()
            .trim(from: 0, to: entry.progress)
            .stroke(Color.blue, lineWidth: 4)
            .rotationEffect(.degrees(-90))
    }
}

注意：需控制动画时长和帧数量，避免生成过多Entry导致内存占用过高，Apple可能会限制过于频繁的Widget刷新。

2. 封装Core Animation到UIViewRepresentable #

通过UIViewRepresentable在Widget中嵌入UIKit视图，直接使用Core Animation实现动画。这种方式能获得原生高帧率，但违反官方Widget指南，存在审核被拒的风险。

示例代码：

// 封装带Core Animation的UIView
struct AnimatedCircleView: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
        
        let circleLayer = CAShapeLayer()
        circleLayer.path = UIBezierPath(ovalIn: CGRect(x: 10, y: 10, width: 80, height: 80)).cgPath
        circleLayer.strokeColor = UIColor.blue.cgColor
        circleLayer.fillColor = UIColor.clear.cgColor
        circleLayer.lineWidth = 4
        view.layer.addSublayer(circleLayer)

        // 添加Core Animation动画
        let strokeAnimation = CABasicAnimation(keyPath: "strokeEnd")
        strokeAnimation.fromValue = 0
        strokeAnimation.toValue = 1
        strokeAnimation.duration = 1
        strokeAnimation.repeatCount = .infinity
        circleLayer.add(strokeAnimation, forKey: "continuousStroke")

        return view
    }

    func updateUIView(_ uiView: UIView, context: Context) {}
}

// Widget视图中使用封装的动画视图
struct AnimatedWidgetView: View {
    var body: some View {
        AnimatedCircleView()
    }
}

3. 预渲染图片序列切换 #

提前将动画的每一帧渲染为图片资源，通过TimelineEntry切换显示不同图片。这种方式兼容性最佳，无审核风险，但会增加APP包体积，适合复杂动画场景。

示例代码：

// 定义带帧索引的Entry
struct AnimatedWidgetEntry: TimelineEntry {
    let date: Date
    let frameIndex: Int
}

// 生成对应帧索引的Timeline
struct AnimatedWidgetProvider: TimelineProvider {
    func placeholder(in context: Context) -> AnimatedWidgetEntry {
        AnimatedWidgetEntry(date: Date(), frameIndex: 0)
    }

    func getSnapshot(in context: Context, completion: @escaping (AnimatedWidgetEntry) -> Void) {
        completion(AnimatedWidgetEntry(date: Date(), frameIndex: 0))
    }

    func getTimeline(in context: Context, completion: @escaping (Timeline<AnimatedWidgetEntry>) -> Void) {
        var entries: [AnimatedWidgetEntry] = []
        let currentDate = Date()
        let frameCount = 60
        let interval = 1.0 / Double(frameCount)

        for i in 0..<frameCount {
            let entryDate = currentDate.addingTimeInterval(Double(i) * interval)
            entries.append(AnimatedWidgetEntry(date: entryDate, frameIndex: i))
        }

        let timeline = Timeline(entries: entries, policy: .atEnd)
        completion(timeline)
    }
}

// 在View中切换显示对应帧的图片
struct AnimatedWidgetView: View {
    var entry: AnimatedWidgetProvider.Entry
    // 假设资源名为frame_0到frame_59
    private let frameImages: [UIImage] = (0..<60).compactMap { UIImage(named: "frame_\($0)") }

    var body: some View {
        if let image = frameImages[safe: entry.frameIndex] {
            Image(uiImage: image)
                .resizable()
                .frame(width: 100, height: 100)
        }
    }
}

// 扩展数组安全访问
extension Collection {
    subscript(safe index: Index) -> Element? {
        return indices.contains(index) ? self[index] : nil
    }
}

重要提示 #

所有方案均为绕过官方限制的hack手段，可能在iOS后续版本中失效。其中Core Animation方案存在较高审核风险，建议优先使用Timeline逐帧刷新或图片序列方案。

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