lottie加载带图片的json 预览

已于 2024-04-20 13:00:41 修改
阅读量2.8w 收藏 11
点赞数 35
文章标签： 前端
于 2024-03-01 15:19:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43575775/article/details/136396738
版权
本文详细讲述了如何从APK中提取Lottie动效资源，包括使用工具解压、在线平台预览并移除图片以获取纯JSON文件的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

背景

产品看到一款app的动效很不错，让我去模仿实现。

第一步 获取apk中的静态资源

拿到这个app的apk后，直接使用压缩工具解压，

assets文件夹就是静态资源的目录 

静态资源里面有lottie  那么大部分的动效应该都是lottie实现的

网上找了很多在线预览lottie的网站 （大部分不能实现预览带图片文件夹的）

下面的网站是支持的 但是需要注册

https://app.lottiefiles.com/previewicon-default.png?t=N7T8https://app.lottiefiles.com/preview

预览带图片的json步骤

第二种去掉图片资源的方法

是利用上面那个网站 https://app.lottiefiles.com/preview

先把资源上传上去，然后获取一个资源路径，然后下载 json 

 

Vue中使用lottie动画加载json文件
qq_41154522的博客
09-01 1138
Vue中使用lottie动画加载json文件。
React、Ant Desgin自定义加载动画，lottie-web 将json解析成动画
ly18314524152的博客
04-21 1605
在项目中，遇到需要在网页首屏，展示动画的需求，你会想到怎么做？ 思路一：设计师导出gif图片，用img进行展示。 缺点：图片失真，影响效果。 思路二：设计师导出json文件，用插件解析成动画展示。 缺点：由于当时时间紧张，且不知道怎么操作，放弃了这个方案。 直到在下一个项目中，遇到需要自定义加载动画效果的需求，再次把该方案提上日程。在项目中，应该多去思考，凡事都有解决方案。 lottie-web 将json解析成动画。 一、安装依赖 npm install lottie-web --save 或者 yarn
Lottie 动画里有图片怎么办？设计师小姐姐也能帮你减少开发量！
weixin_33834910的博客
03-13 271
一、序 Hi，大家好，我是承香墨影！ Lottie 是 Airbnb 开源的一套跨平台的完整解决方案，设计师只需要使用 After Effectes （之后简称 AE）设计出动画之后，使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式，就可以直接运用在 iOS、Android 和 React Native之上，无需关心中间的实现细节。 这样，对于不同的工作角...
设计师小姐姐给的 Lottie 动画中“带图片”，如何预览？
承香墨影的博客
01-28 9483
一、序大家好，我是承香墨影！我又来写 Airbnb 开源的 Lottie 动画了，之前写的几篇文章，反响还不错，今天继续说说 Lottie 预览效果的问题，单独的 Lottie-JSON...
React实现lottie文件预览（可识别json文件或压缩包带资源的素材）
最新发布
qq_41798568的博客
03-04 236
获取到json 数据 外加 图片/媒体资源文件 就可以组装数据。🔴 1、React实现lottie文件预览，所用到的第三方库。后缀的文件，在进行文件资源遍历的时候需要过滤掉。也可以实现资源本地化模式的方式预览压缩包。可以实现资源线上化模式的方式预览压缩包。解压之后，会存在一些隐藏文件的出现。使用会有点问题，后面就进行说明。可以实现json文件的直接预览。mac 电脑的压缩文件在使用。也可以实现压缩包带资源的素材。🟢 1.2、可实现的效果。
Android json动画（Lottie）解决：json中有图片、在线预览json动画效果
热门推荐
ihoudf
01-14 2万+
在线预览json动画效果:https://lottiefiles.com/preview 一、bundle gradle中加入lottie包 implementation 'com.airbnb.android:lottie:3.1.0' 二、在工程app/src/main/下创建文件夹assets，新建时选择Directory，完整路径就是app/src/main/as......
Lottie，json制作动图，跳动柱状图
05-19
使用Lottie json制作动图，跳动柱状图！原文地址https://blog.csdn.net/qq_32519693/article/details/80367885
lottie 动画的json文件
11-26
这是一个json格式的动画，仅在demo中使用噢这是一个json格式的动画，
lottie.js动画的使用(JSON动画)
qq_43601848的博客
11-16 2401
lottie动画的使用步骤
lottielottie
01-19
5. **调试和优化**：如果遇到问题，可以通过查看 JSON 文件或使用 Lottie预览工具进行调试和优化，确保动画在目标平台上正常工作。 通过学习和实践 Lottie，开发者可以提升应用的交互性和用户体验，同时降低设计与...
lottie-to-svg:将抽奖动画转换为SVG文件
05-06
这在将Lottie动画脚本完全加载之前以SVG形式显示动画预览很有用。 如果您因为要将完整的抽奖动画转换为SVG动画而找到了这个项目，对不起，我无法为您提供帮助。 我什至会争辩说您不应该这样做。 关于CSS动画（动画...
一个JSON格式的Lottie动画文件
07-03
一个JSON格式的Lottie动画文件，使用阿里-犸良动画设计平台生成，用于Lottie动画+SwiftUI教程测试使用
json预览工具
11-20
一款非常好用的Json解析预览工具，比网上好多直接在线预览的要好用！
Android使用lottie加载json动画的示例代码
08-28
本篇文章主要介绍了Android使用lottie加载json动画的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
json 预览工具
11-13
预览json 检查json格式是否正确，一键预览格式，自带格式化操作按钮
前端实现json动画（附带示例）
brhhh_sehe的博客
12-11 437
lottie-web提供了很多的控制动画播放的方法，下面是一些常用的方法。可以下载想要的json动画。显示json的帧数详情。
vue使用vue-lottie展示JSON格式的图片及相关图片
暖一杯茶的博客
12-08 1978
安装： npm install --save vue-lottie 页面引用： import lottie from 'vue-lottie'; //注册 components: { lottie }, 页面代码： <lottie :options="defaultOptions" :height="380" :width="200" v-on:animCreated="handleAnimation" /> import * as animationData from "@/asset
【bug记录7】导入Lottie的json格式动画，获取不到相对路径下的图片
weixin_57208584的博客
08-30 645
其中的路径就可以设置为相对路径了，比如可以把p参数直接配成new URL('relative path',import.meta.url).href。，也无法拿到其相对路径中的图片。因为json解析绝对路径，只能将图片放在项目根目录下的public文件夹应急。在vue3项目中，想把Lottie依赖的图片放在其相对路径下，但是发现即使修改其中的。将Lottie的json文件转换为。
Lottie 读取 JSON 文件实现动画
weixin_33753003的博客
04-26 1900
Lottie Lottie 是 Airbnb 开源的一个动画项目，它支持 iOS, mac OS Android RN，由于某些复杂动画的实现，往往会写很多的 code 来实现它，而且调试动画的效果会比较花费时间。用它来解决某些动画会带来很大的便利。 设计师在 After Effects 设计好相关的动画，然后安装上 BodyMovin ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

肥肥呀呀呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值