Android Lottie 体积优化实践:从 6.4 MB 降到 530 KB

server/2024/9/23 19:55:56/

一、说明

产品提出需求:用户有 8 个等级,每个等级对应一个奖牌动画。

按照常用的实现方式:

  1. 设计提供 8 个 lottie 动画(8 个 json 文件)。
  2. 研发将 json 文件打包进入 APK 中。
  3. 根据不同等级播放指定的动画。

每一个 json 文件平均是 800 KB,8 个的话是 6.4 MB。

实现这个功能直接将包体积增加 6.4 MB 的话,增加太多了。

有没有什么办法将体积降低一些呢?

二、优化方案

方案 1:动态下发

可以提前将 json 文件上传到云端,然后通过接口动态下发下载地址,客户端下载下来后再显示动画。

由于我的业务特殊性,需要能够及时显示动画,并且下载失败对业务有较大影响,最终并未采用该方案。

方案 2:图文分离

通常动画文件中既包含动画展示逻辑信息,也包含图片(将图片转为 base64 文本,存储在 json 文件中)。

尝试将图片拿出来放到一个文件夹中后,减少:

  • 单个奖牌:800 KB 减少到 600 KB
  • 8 个等级:6.4 MB 减少到 4.8 MB

方案 3:图片格式转换

之前的图片用的是 png 格式的图片,尝试将其转为 webp 格式后,体积又有相应的减少:

  • 单个奖牌:215 KB
  • 8 个等级:1.68 MB

方案 4:逻辑共用

通常 8 个奖牌动画对应的是 8 个 json 文件,和 8 套图片。

问题:可否 8 个动画共用一个 json 文件,只替换掉其中的不同的奖牌部分呢?

答案是:可以。

我们将所有的等级图片放到一个文件夹中,根据不同的等级动态替换 json 中的图片配置,这样就实现了只用一个 json 即可,奖牌以外的图片也可以实现共用。

这样调整后当前的动画体积变为了:530 KB

三、总结

图文分离、webp 格式、逻辑共用和动态下发都可以有效降低包体积的占用,大家在开发中可以根据自己的业务场景选择合适的方案进行优化处理。


http://www.ppmy.cn/server/48194.html

相关文章

【全开源】CMS内容管理系统(ThinkPHP+FastAdmin)

基于ThinkPHPFastAdmin的CMS内容管理系统,自定义内容模型、自定义单页、自定义表单、专题、统计报表、会员发布等 提供全部前后台无加密源代码和数据库私有化部署,UniAPP版本提供全部无加密UniAPP源码​ 🔍 解锁内容管理新境界:C…

【经典排序算法】堆排序(精简版)

什么是堆排序: 堆排序(Heapsort)是指利用堆(完全二叉树)这种数据结构所设计的一种排序算法,它是选择排序的一种。需要注意的是排升序要建大堆,排降序建小堆。 堆排序排序的特性总结: 1. 堆排序使用堆来选数…

数据结构:哈夫曼树及其哈夫曼编码

目录 1.哈夫曼树是什么? 2.哈夫曼编码是什么? 3.哈夫曼编码的应用 4.包含头文件 5.结点设计 6.接口函数定义 7.接口函数实现 8.哈夫曼编码测试案列 哈夫曼树是什么? 哈夫曼树(Huffman Tree)是一种特殊的二叉树&#xf…

PostgreSQL基础(九):PostgreSQL的事务介绍

文章目录 PostgreSQL的事务介绍 一、什么是ACID(常识) 二、事务的基本使用 三、保存点(了解) PostgreSQL的事务介绍 一、什么是ACID(常识) 在日常操作中,对于一组相关操作,通常…

前端图片在切换暗黑模式时太亮该怎么办?

通过css中的filter属性来实现,进行图片的色系反转、亮度、对比度调整等 1、invert 反转输入图像,值为 100% 则图像完全反转,值为 0% 则图像无变化 filter: invert(1); 2、blur 给元素应用高斯模糊效果。 filter: blur(5px); 3、brightnes…

Python怎么循环计数:深入解析与实践

Python怎么循环计数:深入解析与实践 在Python编程中,循环计数是一项基础且重要的技能。无论是处理列表、遍历文件,还是执行重复任务,循环计数都发挥着不可或缺的作用。本文将从四个方面、五个方面、六个方面和七个方面详细阐述Py…

width: 100%和 width: 100vw这两种写法有什么区别

width: 100%; 和 width: 100vw; 是两种不同的 CSS 写法,它们在实际应用中会有不同的效果。以下是这两种写法的主要区别: width: 100%; 定义:将元素的宽度设置为其包含块(通常是父元素)宽度的 100%。效果:元…