动效工具Lottie
Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案,设计师可以使用 Adobe After Effects 设计出漂亮的动画之后,使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式,就可以直接运用在 iOS、Android、Web 和 React Native之上,无需其他额外操作。
从网络请求加载动画: Lottie 的一个优点是可以从网络请求加载动画。所以,应该将网络请求的响应内容转换为字符串格式。
Lottie 核心类
LottieAnimationView:继承自 AppCompatImageView,是加载 Lottie 动画的默认和最简单的方式。
LottieDrawable:具有大多数与 LottieAnimationView 相同的 API,因此可以在任何视图上使用它。
使用方法
func buildLOTAnimationView(_ resourceUrl: String) throws -> LOTAnimationView { //网络下载 let lotView = try LOTAnimationView(contentsOf: URL(string: "")) //本地加载 let zipPath = MyCache.cacheDataPath(for: resourceUrl) let lotView = try LOTAnimationView.animation(withFilePath: "\(zipPath!)/data.json", error: ()) lotView.frame = UIScreen.main.bounds lotView.contentMode = .scaleAspectFill lotView.loopAnimation = true lotView.play() return lotView }
动效工具PAG
PAG(Portable Animated Graphics)是腾讯自主研发的一套完整的动画工作流解决方案,助力于将 AE 动画方便快捷的应用于各平台终端。和 Lottie、SVGA 相比,支持的 AE 特性更多,支持的平台更广(增加了 mac OS、Windows 和 Linux),性能方面也做了深层次的优化,支持图层编辑,可以与视频编辑场景紧密结合 文件格式方面 Lottie 导出素材格式是 json 文本,可读性高,但是承载 AE 特性能力差,文件体积大,解码速度慢。SVGA 使用 ProtoBuffer 序列化,解码速度快,最终生成的文件直接使用 zip 压缩。PAG 采用二进制的编码方法,配套自研编解码器,动态比特位压缩,冗余信息极少,文件体积最小,解码速度最快,且支持图片和音频信息编码。 平台端支持方面 目前 Lottie 仅支持 Android、iOS、web、mac OS,SVGA 支持 Android、iOS 和 web 端,PAG 可以支持到 Android、iOS、web、mac OS、windows、Linux,涵盖到所有平台。
使用方法
//1.读取PAG素材文件, pagPath为pag动画的模版文件 pagFile = PAGFile.load(pagPath) //2.替换模版资源 private func replacePag(image: UIImage, index: Int) { let pagImage = PAGImage.fromCGImage(image.cgImage) pagImage?.setScaleMode(PAGScaleModeZoom) pagFile?.replaceImage(Int32(index), data: pagImage) } private func replacePag(text: String, index: Int) { let pagText = pagFile?.getTextData(Int32(index)) pagText?.text = text pagFile?.replaceText(Int32(index), data: pagText) } //3.创建PAG播放视图PAGView self.pagView = PAGView.init(frame: self.view.bounds) if let pagView = self.pagView { //关联PAGView和PAGFile pagView.setComposition(self.pagFile) pagView.setRepeatCount(0) pagView.setMaxFrameRate(30) pagView.setCacheScale(0.8) }
参考文章: https://juejin.cn/post/6844903661760413704 https://github.com/Tencent/libpag/blob/main/README.zh_CN.md https://cloud.tencent.com/developer/inventory/25439/article/1935722
标签:动画,lotView,动效,pagView,跨平台,let,PAG,Lottie From: https://www.cnblogs.com/zhou--fei/p/17578032.html