lottie深入玩法

news2025/4/20 20:56:24

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.coloradmin.cn/o/2338985.html

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

相关文章

热门与冷门并存,25西电—电子工程学院(考研录取情况)

1、电子工程学院各个方向 2、电子工程学院近三年复试分数线对比 学长、学姐分析 由表可看出: 1、电子科学与技术25年相较于24年上升20分 2、信息与通信工程、控制科学与工程、新一代电子信息技术(专硕)25年相较于24年下降25分 3、25vs24推…

Warcraft Logs [Classic] [WCL] BOSS ID query

Warcraft Logs [Classic] [WCL] BOSS ID query 所有副本BOSSID查询 https://wowpedia.fandom.com/wiki/DungeonEncounterID#Retail IDNameMapInstanceIDPatch227High Interrogator GerstahnBlackrock Depths230228Lord RoccorBlackrock Depths230229Houndmaster GrebmarBlackro…

架构师面试(三十一):IM 消息收发逻辑

问题 今天聊一下 IM 系统最核心的业务逻辑。 在上一篇短文《架构师面试(三十):IM 分层架构》中详细分析过,IM 水平分层架构包括:【入口网关层】、【业务逻辑层】、【路由层】和【数据访问层】;除此之外&a…

基于若依框架前后端分离的项目部署

文章目录 单项目的部署项目目录后端打包上传前端打包上传配置nginx服务器打开防火墙完成 两个项目的部署两个项目介绍后端打包并上传前端打包并上传nginx配置服务器端口开放完成 腾讯云服务器 之 环境搭建 单项目的部署 项目目录 后端打包上传 查看端口号 在ruoyi-admin的appl…

黑马Java基础笔记-1

JVM,JDK和JRE JDK是java的开发环境 JVM虚拟机:Java程序运行的地方 核心类库:Java已经写好的东西,我们可以直接用。 System.out.print中的这些方法就是核心库中的所包含的 开发工具: javac(编译工具)、java&…

面向新一代扩展现实(XR)应用的物联网框架

中文标题: 面向新一代扩展现实(XR)应用的物联网框架 英文标题: Towards an IoT Framework for the New Generation of XR Applications 作者信息 Joo A. Dias,UNIDCOM - IADE,欧洲大学,里斯本&…

pcl各模块

参考资料: https://github.com/Ewenwan/MVision/blob/master/PCL_APP/1_%E7%82%B9%E4%BA%91%E6%BB%A4%E6%B3%A2filter.md 点云库PCL各模块学习 语雀 各模块依赖关系: 模块: common pcl_common中主要是包含了PCL库常用的公共数据结构和方…

Oracle Recovery Tools修复ORA-600 6101/kdxlin:psno out of range故障

数据库异常断电,然后启动异常,我接手该库,尝试recover恢复 SQL> recover database; ORA-10562: Error occurred while applying redo to data block (file# 2, block# 63710) ORA-10564: tablespace SYSAUX ORA-01110: ???????? 2: H:\TEMP\GDLISNET\SYSAUX01.DBF O…

2025MathorcupC题 音频文件的高质量读写与去噪优化 保姆级教程讲解|模型讲解

2025Mathorcup数学建模挑战赛(妈妈杯)C题保姆级分析完整思路代码数据教学 C题:音频文件的高质量读写与去噪优化 随着数字媒体技术的迅速发展,音频处理成为信息时代的关键技术之一。在日常生活中,从录音设备捕捉的原始…

.net core web api 数据验证(DataAnnotations)

目录 一、什么是 DataAnnotations? 二、扩展验证逻辑(自定义验证器) 一、什么是 DataAnnotations? DataAnnotations 是一组特性(Attributes),用于在模型类上定义验证规则。主要用于属性级别的…

【工具-Krillin AI】视频翻译、配音、语音克隆于一体的一站式视频多语言转换工具~

Krillin AI 是全能型音视频本地化与增强解决工具。这款简约而强大的工具,集音视频翻译、配音、语音克隆于一身,支持横竖屏格式输出,确保在所有主流平台(哔哩哔哩,小红书,抖音,视频号&#xff0c…

ICPR-2025 | 让机器人在未知环境中 “听懂” 指令精准导航!VLTNet:基于视觉语言推理的零样本目标导航

作者:Congcong Wen, Yisiyuan Huang, Hao Huang ,Yanjia Huang, Shuaihang Yuan, YuHao, HuiLin and Yi Fang 单位:纽约大学阿布扎比分校具身人工智能与机器人实验室,纽约大学阿布扎比分校人工智能与机器人中心,纽约大学坦登工程…

Shiro-550 动调分析与密钥正确性判断

一、Shiro 简介 Apache Shiro是一个开源安全框架,用于构建 Java 应用程序,提供身份验证、授权、加密和会话管理等功能。 二、Shiro-550(CVE-2016-4437) 1、漏洞原理 Shiro 在用户登陆时提供可选项 RememberMe,若勾选…

Python制作简易PDF查看工具PDFViewerV1.0查找功能优化

原文说明 为不破坏原文结构,因此功能优化不在原文中维护了。关于这款工具原文请通过下面链接访问。Python制作简易PDF查看工具PDFViewerV1.0 这款小工具基本功能已经可以作为一款文档浏览器使用,但还有一些美中不足的地方,本文将介绍对文本查…

20250419将405的机芯由4LANE的LVDS OUT配置为8LANE的步骤

20250419将405的机芯由4LANE的LVDS OUT配置为8LANE的步骤 2025/4/19 15:38 查询格式YUV/RGB 81 09 04 24 60 FF 90 50 00 00 FF 查询辨率帧率 81 09 04 24 72 FF 90 50 01 03 FF 查询LVDS mode : Singel output/Dual output 81 09 04 24 74 FF 90 50 00 00 FF 配置405的机…

从0开发一个unibest+vue3项目,使用vscode编辑器开发,总结vue2升vue3项目开始,小白前期遇到的问题

开头运行可看官网 链接: unibest官网 一:vscode中vue3代码显示报错标红波浪线 去查看扩展商店发现一些插件都弃用了,例如h5的插件以及vue老插件 解决办法:下载Vue - Official插件(注意:横杠两边是要加空格的&#xff…

HTML5好看的水果蔬菜在线商城网站源码系列模板4

文章目录 1.设计来源1.1 主界面1.2 关于我们1.3 商品信息1.4 新闻资讯1.5 联系我们1.5 登录注册 2.效果和源码2.1 动态效果2.2 源代码 源码下载 作者:xcLeigh 文章地址:https://blog.csdn.net/weixin_43151418/article/details/147264262 HTML5好看的水果…

多人五子棋联机对战平台 测试报告

目录 项目介绍 测试用例设计 部分功能测试示例 自动化测试 测试范围 排除范围 自动化测试目录​编辑 执行全部自动化测试用例 性能说明 总结 性能测试 结果分析 测试总结 项目介绍 该项目基于WebSocket实现实时通信,采用SSM框架构建在线五子棋多人联机…

欣佰特携数十款机器人相关前沿产品,亮相第二届人形机器人和具身智能行业盛会

2025年4月15日至16日,备受关注的第二届中国人形机器人与具身智能产业大会已在北京成功举行。作为国内前沿科技及产品服务领域的重要参与者,欣佰特科技携众多前沿产品精彩亮相,全方位展示了其在人形机器人与具身智能领域的创新产品。 在本次大…

windows安装hadoop-3.3.5(图文教程)

本章教程,记录在Windows操作系统上安装hadoop-3.3.5的整个过程。 一、基础环境准备 JDK版本:java version “1.8.0_431” ,并且配置JAVA_HOME系统环境变量 hadoop版本:3.3.5,配置HADOOP_HOME系统环境变量。 下载地址:https://archive.apache.org/dist/hadoop/common/hado…