GIF、Lottie、SVGA

在互联网行业,特别是直播和视频类app中,酷炫的动画或者是图片的序列帧播放是必不可少的。

借鉴一下网上的图,公司项目图不能上传。感谢:Pony&Clock


在业内的app中有可能解决方案,如下:

  • 方案一:帧动画OpenGL加载;

  • 方案二:属性动画;

  • 方案三:Gif或WebP;

  • 方案四:SVGA或者Lottie(两种原理相近但是SVGA效率更好)

对比以上:方案一、二、三:图片大小问题,播放资源占用高(当时测试的机子,内存占用约30MB/CPU占用约50%),gif效果差(只支持8位颜色)而方案四,解决了前面三个方案的问题。

SVGA 与Lottie对比(借鉴一下:感谢:Pony&Clock

  • 从CreateJS/Lottie实现的原理来看,都是将设计软件中的时间轴完整地导出来,包括里面的各种关键帧信息、矢量路径、样式等等。其中,最为关键的是『关键帧』!由于使用的是关键帧动画描述,那么对应的Player就难免变得复杂起来。如果只是简单的一次线性方程,比如,物体从A点匀速移动至B点,还OK。但是,当遇到二次线性方程、贝塞尔曲线方程这些高阶插值计算的时候,Player就会很吃力。(矢量动画就是通过一些公式能表达的矢量线条和色块,以此来表示每一帧动画)

  • CreateJS可以导出Flash动画,Lottie可以导出After Effects动画,但是它们都不能导出对方的动画(每种设计工具的脚本都是不一致的),这也意味着,你家的设计师只能使用其中一种设计工具。

  • Lottie在导出位

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
视频转换为Lottie格式可以通过以下步骤完成: 1. 下载并安装screen2gif软件,该软件可以将屏幕录制保存为gif、webp、mp4等格式。 2. 打开LottieFiles在线编辑器,调整动画的颜色和播放模式。将播放模式设置为单次播放。 3. 使用screen2gif开始录制,让在线编辑器完整地播放一遍动画。录制的gif文件可能会有一些多余的重复帧,需要手动删除。 4. 使用screen2gif导出录制的文件,选择导出为Lottie格式(需要预先安装ffmpeg)。 5. 在动画页面引入Lottie文件,可以使用以下代码片段作为参考: ```html <template> <div class="thumb_animation"> <lottie :options="defaultOptions" v-on:animCreated="handleAnimation"/> </div> </template> <script> import Lottie from './lottie.vue'; import animationData from '../static/img/index' // 引入json文件 export default { props: \['learning'\], components: { 'lottie': Lottie }, data () { return { thumb_animation: false, defaultOptions: { animationData: animationData, autoplay: false, loop: false, width: 300, height: 100 }, animationSpeed: 0.1 } }, methods: { thumbUp () { this.anim.play() }, handleAnimation (anim) { this.anim = anim; } }, destroyed () { this.animation.destroy() } } </script> ``` 6. 打开命令行,使用以下命令将视频转换为Lottie格式(假设Python路径为<python>,JSON文件路径为<json>,输出文件为<output>): ```bash # 生成gif py <python>/scripts/lottie_convert.py <json> <output> # 生成mp4 py <python>/scripts/lottie_convert.py <json> <output> ``` 注意:lottie_convert会根据输出文件的后缀名自动判断生成的文件格式。 #### 引用[.reference_title] - *1* *3* [Lottie 动画导出为 GIF/MP4 以及与 QML 集成演示](https://blog.csdn.net/Likianta/article/details/128179516)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [lottie&vue 把json文件转动画](https://blog.csdn.net/u011200562/article/details/116646854)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值