lottie深入玩法

A、json文件和图片资源分开
delete 是json资源名字

/res/lottie/delete_anim_images是图片资源文件夹路径
JSON 中引用的图片名,必须与实际图片文件名一致

 

B、json文件和图片资源分开,并且图片加载不固定

比如我有7张图片,分别命名1~7,我可以根据逻辑从这7张图片里面选3张图片,放到lottie里面显示吗?
 

Lottie 本身不支持在动画过程中动态替换图片(比如从一堆图片中动态挑选几张替换),因为它的图片资源是绑定在 JSON 文件里的,JSON 中的 assets 数组会预定义所有图片名和 ID。

但!我们可以通过 “间接替换图片”

✅ 能实现需求的方法一:使用动态 ImageProvider 替换指定 ID 对应的图片

lottie-ios 4.x 中,你可以通过 实现自定义 ImageProvider 的方式,让某个 ID 返回你希望的图片内容。

🛠️ 一、动画 JSON 的设计要求(由设计师完成)

使用 Adobe After Effects + Bodymovin 插件导出

❗关键要求

  • 设计师添加 3 个图片图层(img1、img2、img3)

  • 命名保持统一(就是图层名叫 img1img2img3

  • 每个图层引用一张占位图(比如 placeholder.png)

  • 导出时取消勾选 Embed Image(不要将图片嵌入 JSON)

  • 勾选导出图像 → 会导出 JSON 和图像目录

最终导出结果是一个 .json 文件 + 一个 images 文件夹,文件夹里包含 img1.pngimg2.pngimg3.png(占位图)

🧱 二、你的 App 中资源结构如下:

📦 MyApp
├── Assets
│   ├── lottie_template.json
│   └── images
│       ├── 1.png
│       ├── 2.png
│       ├── 3.png
│       ├── 4.png
│       ├── 5.png
│       ├── 6.png
│       └── 7.png

🧩 三、自定义 ImageProvider 来实现图片替换

class DynamicImageProvider: AnimationImageProvider {private let imageMap: [String: UIImage]init(imageMap: [String: UIImage]) {self.imageMap = imageMap}func imageForAsset(asset: ImageAsset) -> CGImage? {// asset.name 是 JSON 中 image 图层的 name,例如 "img1"guard let image = imageMap[asset.name] else { return nil }return image.cgImage}
}

🧪 四、使用示例代码(Swift 5.0)

// 假设你有 1~7.png 放在项目中
let allImageNames = ["1", "2", "3", "4", "5", "6", "7"]
let selected = allImageNames.shuffled().prefix(3)let imageMap: [String: UIImage] = ["img1": UIImage(named: selected[0])!,"img2": UIImage(named: selected[1])!,"img3": UIImage(named: selected[2])!
]let provider = DynamicImageProvider(imageMap: imageMap)guard let animation = LottieAnimation.named("lottie_template") else { return }let animationView = LottieAnimationView(animation: animation, imageProvider: provider)
animationView.frame = view.bounds
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .loop
animationView.play()view.addSubview(animationView)

✅ 效果:每次启动动画时都会在 img1、img2、img3 图层上显示随机选的图片 🎉

✅ 前提是你的 Lottie JSON 中,assets 用的是 "img1", "img2" 这样的 ID。然后你可以在运行时替换这些 ID 对应的 UIImage 内容。

👀 注意事项

  • imageMap 中的 key 一定要与 JSON 中的图层名字一致(比如 "img1"

  • 图片名与 UIImage(named:) 要匹配,确保加入到 Xcode 工程或 Assets 里

  • JSON 动画图层是固定的 3 个,你替换的是内容,不是数量

    ✅ 优点

  • 一个 JSON 动画文件即可

  • 图片资源独立管理,逻辑控制简单

  • 没有生成多个动画文件,App 体积更小

疑问❓

🕹️ imageForAsset 是什么时候调用的?

  • 当你用下面代码播放动画时:

let animationView = LottieAnimationView(animation: animation, imageProvider: provider)
animationView.play()
  • animationView.play() 开始渲染动画时,Lottie 内部会解析 JSON,发现某些图层是图片(例如 "img1"

  • 然后 Lottie 就会调用你写的 imageForAsset(asset:) 方法 来获取它需要的图片

也就是说:

每当动画里有个 image 图层需要渲染,都会走一次 imageForAsset() —— 你可以在里面决定显示哪张图!

💥 会不会冲突?

不会!你自定义了 ImageProvider,Lottie 会优先走你提供的图:

  • 如果你没设置 imageProvider,它就会去读 "img1.png" 文件

  • 如果你设置了自定义 DynamicImageProvider,它就会调用:

imageForAsset(asset: ImageAsset(name: "img1"))

你返回什么图,它就显示什么图,和 JSON 原来的 p: img1.png 没关系了!

C、网络加载lottie(自己研究吧~很简单)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/902110.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

高精度算法(加、减、乘、除、阶乘和)​

归纳编程学习的感悟, 记录奋斗路上的点滴, 希望能帮到一样刻苦的你! 如有不足欢迎指正! 共同学习交流! 🌎欢迎各位→点赞 👍 收藏⭐ 留言​📝 唯有主动付出,才有丰富的果…

探索大语言模型(LLM):马尔可夫链——从诗歌分析到人工智能的数学工具

提出背景与灵感起源 马尔可夫链由俄国数学家安德雷马尔可夫于1906年提出,最初是为了挑战当时概率论中“独立性假设”的局限性。他希望通过研究相依变量序列,证明即使随机变量之间存在依赖关系,大数定律和中心极限定理仍然成立。 灵感来源&am…

【web服务_负载均衡Nginx】三、Nginx 实践应用与高级配置技巧

一、Nginx 在 Web 服务器场景中的深度应用​ 1.1 静态网站部署与优化​ 在 CentOS 7 系统中,使用 Nginx 部署静态网站是最基础也最常见的应用场景。首先,准备网站文件,在/var/www/html目录下创建index.html文件: sudo mkdir -p…

C语言格式化输入输出总结 (printf和scanf)

一、printf格式化输出 1. 整数格式化 (%d, %i, %u, %o, %x) c复制代码 int num 42; // 以下为不同格式输出示例 printf("%d", num); // 42 (十进制) printf("%i", num); // 42 (同%d) printf("%u", num); // 42 (无符号十进制…

哈夫曼编码和哈夫曼树

哈夫曼编码(Huffman Coding) 是一种基于字符出现频率的无损数据压缩算法,通过构建哈夫曼树(Huffman Tree) 来生成最优前缀编码,使得高频字符用短编码,低频字符用长编码,从而实现高效…

Jetson Orin NX 部署YOLOv12笔记

步骤一.创建虚拟环境 conda create -n yolov12 python3.8.20 注意:YOLOv12/YOLOv11/YOLOv10/YOLOv9/YOLOv8/YOLOv7a/YOLOv5 环境通用 步骤二.激活虚拟环境 conda activate yolov12 #激活环境 步骤三.查询Jetpack出厂版本 Jetson系列平台各型号支持的最高Jetp…

Linux指令篇 (2)

指令篇(2) Linux基本指令(2)(1) mkdir指令(重要)(2)rmdir指令&&rm指令(重要)(3)man指令(重要)(4)cp指令(重要&…

致远OA——自定义开发rest接口

文章目录 :apple: 业务流程 🍎 业务流程 代码案例: https://pan.quark.cn/s/57fa808c823f 官方文档: https://open.seeyoncloud.com/seeyonapi/781/https://open.seeyoncloud.com/v5devCTP/39/783.html 登录系统 —— 后台管理 —— 切换系…

区块链如何成为智能城市的底层引擎?从数据透明到自动化治理

区块链如何成为智能城市的底层引擎?从数据透明到自动化治理 引言:智能城市真的智能吗? 在数字化时代,智能城市(Smart City)逐步成为各国推动城市创新的重要方向。城市管理者希望借助物联网(IoT…

洛谷P1177【模板】排序:十种排序算法全解(1)

扯谈 之前我已经把十大排序算法全讲了一遍(具体详见专栏C排序算法),今天我们来用一道简单的题目总结实战一下。 算法实现 一、桶排序(Bucket Sort) ‌适用场景‌:数据范围已知且较小(需根据测试数据调整…

SuperMap iClient3D for WebGL 如何加载WMTS服务

在 SuperMap iClient3D for WebGL 中加载WMTS服务时,参数配置很关键!下面我们详细介绍如何正确填写参数,确保影像服务完美加载。 一、数据制作 对于上述视频中的地图制作,此处不做讲述,如有需要可访问:Onl…

再读bert(Bidirectional Encoder Representations from Transformers)

再读 BERT,仿佛在数字丛林中邂逅一位古老而智慧的先知。初次相见时,惊叹于它以 Transformer 架构为罗盘,在预训练与微调的星河中精准导航,打破 NLP 领域长久以来的迷雾。而如今,书页间跃动的不再仅是 Attention 机制精…

从零开始 保姆级教程 Ubuntu20.04系统安装MySQL8、服务器配置MySQL主从复制、本地navicat远程连接服务器数据库

从零开始:Ubuntu 20.04 系统安装 MySQL 8、服务器配置 MySQL 主从复制、本地 Navicat 远程连接服务器数据库 初始化服务器1. 更新本地软件包列表2. 安装 MySQL 服务器3. 查看 MySQL 安装版本4. 登录 MySQL 管理终端5. 设置 root 用户密码(推荐使用 nativ…

java怎么完善注册,如果邮箱中途更换,能否判断

解析在下面 附赠代码 private static class CodeInfo {String code;long timestamp;CodeInfo(String code, long timestamp) {this.code code;this.timestamp timestamp;}}// 存储验证码(邮箱 -> 验证码信息)(保证线程安全) 以免中途更改邮箱pri…

n8n 中文系列教程_01. 简单易懂的现代AI魔法,n8n的快速了解与概念科普(文末有彩蛋)

1. 教程简介 欢迎来到“无代码工具探索”课程,这是专为非技术人员设计的指南(当然,技术人员也可以从中受益)。我们的目标是通过无代码工具来提升工作效率,尤其是利用像 n8n 这样的灵活数据库平台。这些工具被誉为“现…

解码 Web Service:从技术原理到应用场景的深度剖析

Web Service 是一种基于网络的、分布式的计算技术,它允许不同的应用程序之间通过网络进行通信和交互。以下是关于 Web Service 的详细介绍: 一、定义与概念 Web Service 是一种可以通过 Web 协议(如 HTTP)进行访问的软件组件&am…

Nacos启动报错

Nacos启动是在单机模式下,不是集群模式 点击startup.cmd启动会报错 打开bin目录 rem是注释的意思,在nacos1.3.2之后,nacos默认的都是集群模式,我们这里单机测试就是用单机模式。 也可以修改MODE,如果选择不修改&…

uniapp-商城-26-vuex 使用流程

为了能在所有的页面都实现状态管理,我们按照前面讲的页面进行状态获取,然后再进行页面设置和布局,那就是重复工作,vuex 就会解决这样的问题,如同类、高度提炼的接口来帮助我们实现这些重复工作的管理。避免一直在造一样…

Git 命令速查手册

听说用美图可以钓读者? 一、基础操作核心命令 1. 仓库初始化与克隆 命令作用示例git init创建新仓库git init my-projectgit clone克隆远程仓库git clone [https://github.com/user/repo.git](https://github.com/user/repo.git)git remote add关联远程仓库git re…

信息量、香农熵、交叉熵、KL散度总结

信息量 对于一个事件而言,它一般具有三个特征: 小概率事件往往具有较大的信息量 大概率事件往往具有较小的信息量 独立事件的信息量相互可以相加 比如我们在买彩票这个事件中,彩票未中奖的概率往往很高,对我们而言一点也不稀…