淘宝美工做倒计时图片网站,山西做网站推广,苏州公司注册费用,wordpress做一个视频网站一、说明
产品提出需求#xff1a;用户有 8 个等级#xff0c;每个等级对应一个奖牌动画。
按照常用的实现方式#xff1a;
设计提供 8 个 lottie 动画#xff08;8 个 json 文件#xff09;。研发将 json 文件打包进入 APK 中。根据不同等级播放指定的动画。
每一个 …一、说明
产品提出需求用户有 8 个等级每个等级对应一个奖牌动画。
按照常用的实现方式
设计提供 8 个 lottie 动画8 个 json 文件。研发将 json 文件打包进入 APK 中。根据不同等级播放指定的动画。
每一个 json 文件平均是 800 KB8 个的话是 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 KB8 个等级1.68 MB
方案 4逻辑共用
通常 8 个奖牌动画对应的是 8 个 json 文件和 8 套图片。
问题可否 8 个动画共用一个 json 文件只替换掉其中的不同的奖牌部分呢
答案是可以。
我们将所有的等级图片放到一个文件夹中根据不同的等级动态替换 json 中的图片配置这样就实现了只用一个 json 即可奖牌以外的图片也可以实现共用。 这样调整后当前的动画体积变为了530 KB
三、总结 图文分离、webp 格式、逻辑共用和动态下发都可以有效降低包体积的占用大家在开发中可以根据自己的业务场景选择合适的方案进行优化处理。
