小编也是无意在某条上看到的,按照教程试了一下效果还是可以的,今天分享给大家,希望对大家有所帮助。
什么是Lottie ?
能够解析渲染通过 AE 上的 Bodymovin 插件将 AE 中制作好的动画导出成的 json 文件
(1)、数据源多样性—可从assets,sdcard,网络加载动画资源,动态更新
(2)、跨平台—设计稿导出一份动画描述文件,android,ios,react native通用
Lottie动画Json结构 分为4层:
- 结构层:可以读取到动画画布的宽高,帧数,背景色,时间,起始关键帧,结束帧等
- asset:图片资源信息集合,这里放置的是 制作动画时引用的图片资源
- layers:图层集合,这里可以获取到多少图层,每个图层的开始帧 结束帧等
- shapes:元素集合,可以获取到每个图层都包含多个动画元素。通过这样的层级去读取文件信息 然后映射成JavaBean对象,然后通过关键类LottieDrawable将JavaBean分层渲染绘制到Canvas的画布上去
它是一个积累了很多通用动效素材的平台,让不会动效的同学们也能基于动效库和素材库快速生成一个通用动效创意,你只需要简单地编辑图片、颜色或者文字即可。同时平台集成了以 Lottie 为代表的动效技术,让曾经令人苦恼的安装包大小和性能问题一并解决。
官网:https://design.alipay.com/emotion
犸良支持全平台 iOS、Android、H5、小程序。无论是营销展位、活动页面、空状态还是产品icon。犸良编辑器对接投放平台,一站式完成动效创意制作和投放。
基于模版直接制作(适用于设计师进行动态banner制作)
- 选择模版
- 从动画仓库选择动画进行当前动画的替换
- 通过替换图片或修改颜色来自定义动画
- 自定义模板文字内容
- 选择模板背景图片
- 完成编辑选择是否带背景(banner模版默认带背景)
- 导出成功下载 json
有了这个JSON文件,我们如果使用?下面主要讲讲web前端如何使用,给出简单示例。
<!--导入lottie.js-->
<script type="text/javascript" src="js/lottie.min.js"></script>
<!--动画的dom元素-->
<div id="animationWindow1"></div>
<script>
var animData1 = {
container:document.getElementById('animationWindow1'),
renderer: 'svg', // 设置渲染器(svg/canvas/html)
loop: true, // 是否循环播放
autoplay: true, // 是否自动播放
path: 'data1.json'//动画json文件路径
}
lottie.loadAnimation(animData1);
</script>
示例下载
https://pan.baidu.com/s/1oJ37HpPzhjqqHQH41JeLEg
最新评论
兄弟,你网站首页底部的网站地图链接少了一个/
多谢了!!
牛逼的软件,我搞了几个小时去重都没搞定,用这个软件,200W多条的数据,去重只需要3.87秒,太牛逼了这个软件
非常nice,感谢博主
很棒
博主,你好,我想请问一下,我用的是大前端DUX6.3这个版本的模板,但是这个标签似乎是隐藏透明的,看起来特别不舒服,不知道应该怎么修改,希望能给点建议,谢谢!
这个图标确实好看,我特别希望就是这个相关文章推荐,换成文字形式还是比较好看,如果是图文模式就比较难看了,如果能够优化一下就好了,目前我也遇见了这个问题,不晓得怎么调试,希望博主能够分享
感谢分享,成功激活