移动端跨平台动效工具Lottie, PAG的使用

Lottie,PAG,平台,移动端 · 浏览次数 : 123

小编点评

**动效工具Lottie&PAG** Lottie 是 Airbnb 开源的一套跨平台的动画效果解决方案,设计师可以使用 Adobe After Effects 设计出漂亮的动画,然后使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式,就可以直接运用在 iOS、Android、Web 和 React Native之上,无需其他额外操作。 **Lottie 的核心类LottieAnimationView:** *继承自 AppCompatImageView,是加载 Lottie 动画的默认和最简单的方式。 * `buildLOTAnimationView(_ resourceUrl: String) throws -> LOTAnimationView`: 网络下载动画,并将其转换为 LottieAnimationView 对象。 **PAG(Portable Animated Graphics)** *腾讯自主研发的一套完整的动画工作流解决方案。 * 支持的平台更广,性能方面也做了深层次的优化。 **使用 Lottie 和 PAG** 1. 读取 PAG素材文件。 2. 将模版资源替换成实际图像。 3. 创建 PAG播放视图。 4. 设置 PAGView 的 RepeatCount 和缓存比例。 5. 设置动画的播放速度和帧率。 **注意** * Lottie 的 JSON 文件承载 AE 特性能力差,文件体积大,解码速度慢。 * PAG 使用二进制的编码方法,配套自研编解码器,动态比特位压缩,冗余信息极少,文件体积最小,解码速度最快。

正文


动效工具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


与移动端跨平台动效工具Lottie, PAG的使用相似的内容:

移动端跨平台动效工具Lottie, PAG的使用

动效工具Lottie Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案,设计师可以使用 Adobe After Effects 设计出漂亮的动画之后,使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式,就可以直接运用在 iOS、Andro

Flutter状态管理新的实践

声明式UI其实并不是近几年的新技术,但是近几年声明式UI框架非常的火热。单说移动端,跨平台方案有:RN、Flutter。iOS原生有:SwiftUI。android原生有:compose。可以看到声明式UI是以后的前端发展趋势。而状态管理是声明式UI框架的重要组成部分。

Flutter框架渲染流程与使用

Flutter简述 Flutter是一个UI框架, 可以进行移动端(iOS, Android),Web端, 桌面端开发,它是一个跨平台解决方案。 Flutter的特点:美观,快速,高效,开放。 美观:Flutter内置了美丽的Material Design和 Cupertino widget, 方便

Flutter开发桌面应用的一些探索

在移动应用开发领域,Flutter已经赢得了广泛的认可和采用,成为了跨平台移动应用开发的瑞士军刀。然而,Flutter的魅力并不仅限于移动平台,它还可以用于开发桌面应用程序,为开发人员提供了一种全新的选择。本文将深入探讨Flutter在桌面应用开发中的应用,以及目前国内新颖的跨端开发技术。

.NET周刊【6月第1期 2024-06-02】

国内文章 一文带你了解.NET能做什么? https://www.cnblogs.com/Can-daydayup/p/18214473 .NET是一个免费、开源、跨平台的开发平台框架,广泛应用于桌面、Web、移动、云服务、游戏、物联网、大数据和人工智能等领域开发。它支持C#、Visual Basi

Switchquery:移动端秒级配置触达平台

随着前端开发者开发的功能越来越多,对快速控件各类功能的切换、灰度、降级能力也越来越高。那么怎样才能既保证触达信息能力,又能满足低成本的要求呢?其实,Switchquery配置平台就可以满足这些要求。

驾考宝典携手HMS Core统一扫码服务,构建复杂场景中的流畅扫码体验

“驾考宝典”是一款颇具人气的互联网综合驾照考试学习应用,通过强大的驾考功能,在手机移动端为学车学员提供从报名、学习到拿本的全方位驾考服务。作为一个专业的驾培平台,“驾考宝典”一直以来不断地拓宽学员学车的服务场景,加强学员、驾校、平台之间的联系。而扫码功能作为移动应用上的基础服务,是用户和应用之间快速

万物皆可集成系列:低代码对接微信小程序

本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 近年来,微信小程序的开发如火如荼,很多移动端应用为了更方便被大家所使用的,都步入了小程序的行列 那么对于低代码平台开发的移动端应用是否可以和小程序集成呢?这里我以微信小

国产 Web 组态软件 TopStack V5.0 发布

简介 TopStack 是一款轻量型 Web 组态软件,提供设备数据采集、定时任务、控制策略、联动控制、设备告警、设备维护管理、设备绩效管理、能源管理、组态开发、报表开发等核心功能。支持移动端访问,支持本地部署,可帮助企业从无到有快速搭建工业物联网平台。 一些大型互联网公司提供的物联网平台,其中的很

蓝牙智能设备数据采集平台化方案

由于Android APP/IOS APP平台和开发语言的差异,对开发端和用户端来说,在系统兼容适配、外接蓝牙的安装更新,以及不同平台之间的移植都有不同程度的制约。