iOS 16锁屏Widget中Image组件如何实现动画效果？

在iOS 16锁屏Widget的WidgetView里，直接用SwiftUI的Image加载带帧的动画UIImage只会显示第一帧——这是因为Widget的渲染环境默认偏向静态，SwiftUI Image不会自动触发帧动画播放，也没有类似WatchKit中WKInterfaceObject.startAnimating()的直接调用方法。要实现循环播放帧动画，必须借助UIKit的UIImageView桥接实现。

具体实现步骤 #

1. 创建UIViewRepresentable包装原生UIImageView
   通过这个桥接组件，我们可以调用原生控件的startAnimating()方法强制启动动画：

struct AnimatedImageView: UIViewRepresentable {
    let animatedImage: UIImage?
    let repeats: Bool // 可选参数：控制是否无限重复播放

    func makeUIView(context: Context) -> UIImageView {
        let imageView = UIImageView()
        imageView.image = animatedImage
        imageView.contentMode = .scaleAspectFit
        imageView.animationRepeatCount = repeats ? 0 : 1 // 0表示无限循环，1表示播放一次
        imageView.startAnimating()
        return imageView
    }

    func updateUIView(_ uiView: UIImageView, context: Context) {
        // 当图片或播放状态更新时，重新配置动画
        if uiView.image != animatedImage {
            uiView.image = animatedImage
            uiView.animationRepeatCount = repeats ? 0 : 1
            uiView.startAnimating()
        }
    }
}

2. 在WidgetView中使用该组件
   以accessoryCircular类型为例：

struct LockScreenWidgetEntryView: View {
    var entry: Provider.Entry

    var body: some View {
        switch entry.widgetFamily {
        case .accessoryCircular:
            AnimatedImageView(
                animatedImage: UIImage.animatedImage(with: [
                    UIImage(named: "frame_01")!,
                    UIImage(named: "frame_02")!,
                    UIImage(named: "frame_03")!,
                    UIImage(named: "frame_04")!
                ], duration: 0.8),
                repeats: true
            )
            .frame(width: 45, height: 45)
        default:
            Text("Unsupported Widget Type")
        }
    }
}

关键说明 #

• 动画图片资源必须添加到Widget的target中，否则会加载失败；
• 控制动画帧数和时长，避免过多资源占用导致Widget被系统限制；
• 如果需要根据Entry数据动态控制动画启停，可以在updateUIView中根据状态调用uiView.startAnimating()或uiView.stopAnimating()；
• 你提到的Lively Widget等应用，本质也是通过UIKit组件桥接的方式实现的——因为SwiftUI在Widget环境下没有原生支持动画Image的API。

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