首页 > 其他分享 >移动端跨平台动效工具Lottie, PAG的使用

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

时间:2023-07-24 18:45:14浏览次数:36  
标签:动画 lotView 动效 pagView 跨平台 let PAG Lottie


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

相关文章

  • Spring中propagation的7种事务配置及说明
     http://www.zhano.cn/index.php/Java/40878.html Springpropagation7种事务配置1、简述在声明式的事务处理中,要配置一个切面,其中就用到了propagation,表示打算对这些方法怎么使用事务,是用还是不用,其中propagation有七种配置,REQUIRED、SUPPORTS、MANDATORY、REQUIRES_NEW、......
  • android pageing 加载100调数据
    AndroidPaging加载100条数据的实现流程步骤概览以下是实现AndroidPaging加载100条数据的步骤概览:步骤描述1添加依赖2创建数据源3创建数据源工厂4创建分页配置5创建数据源观察者6创建分页加载器7创建适配器8在界面中使用分页加载器和......
  • Peachpie升级了,体现PHP跨平台优越性
    在对Peachpie的用法进行了一些工作之后,现在回到了在编译器本身实现的核心功能。目前正在更加接近完成项目的“初衷”—能够运行完整的现实世界的应用程序PHP会话<?phpsession_start();//thisactuallyinitializes$_SESSIONfromISessionserviceecho......
  • Building for iOS, but the linked and embedded framework 'libpag.framework' w
    BuildingforiOS,butthelinkedandembeddedframework'libpag.framework'issueWhendevelopingiOSapps,itisnotuncommontocomeacrossvariouserrorsandissuesduringthebuildprocess.Onesuchissueisthe"BuildingforiOS,butth......
  • 跨平台ssh客户端工具:Termius for Mac
    Termius是一款跨平台的SSH和Telnet客户端,它可以帮助用户远程管理和连接多个服务器和网络设备。软件下载:TermiusforMac该软件提供了全面的SSH和Telnet连接工具,可以快速连接和管理多个远程服务器和网络设备。它还支持多种身份验证和加密方式,如密码、公钥、两步验证等,可以保证连......
  • element ui 分页组件自定义每页条数page-size
       参考代码:<divstyle="display:flex;"><el-pagination:total="total":pager-count="5":page-size="searchForm.pageSize":current-page=&q......
  • Android ListView去掉点击动效
    AndroidListView去掉点击动效作为一名经验丰富的开发者,我很高兴能够教会你如何实现“AndroidListView去掉点击动效”。下面我将为您提供详细的步骤和相应的代码。步骤步骤操作1.创建一个自定义的ListViewSelector文件2.在ListView布局中应用自定义的Selector文......
  • 【介绍一下Page页的结构】
    MySQL的页(Page)是数据库中的基本存储单位,由于它们在磁盘上的存储方式和内存中的缓存方式不同,因此熟悉页的结构对于优化数据库性能非常重要。MySQL中的页通常是16KB大小,由于它们通常是一次性读写的,因此它们需要优化和压缩以便在内存中更高效地使用。MySQL中的页包含以下几个部分:1.......
  • Vue+springboot集成PageOffice实现在线编辑Word、excel文档
    说明:PageOffice是一款在线的office编辑软件,帮助Web应用系统或Web网站实现用户在线编辑Word、Excel、PowerPoint文档。可以完美实现在线公文流转,领导批阅,盖章。可以给文件添加水印,在线安全预览防止用户下载和复制文件等一、环境要求前端Vue项目:Node.js10及以上版本(当前集成方式......
  • 转载:PageOffice 在线打开 word 文件实现痕迹保留、键盘批注、手写批注
    一、痕迹保留Word中的痕迹一般指的是审阅文档的用户对文档所做的修改(插入和删除)操作。在PageOffice的强制留痕模式下,用户对文档所做的任何修改都会以痕迹的形式保留下来,不同用户对文档做的修订会自动用不同的颜色标记;用户不能接受、拒绝其他用户对此文档所做的任何修订;修......