神雕侠侣古天乐版国,大连天气预报查询一周,制霸空权无弹窗
lottie 是 airbnb 开源的一套跨平台的完整的动画效果解决方案,设计师可以使用 adobe after effects 设计出漂亮的动画之后,使用 lottic 提供的 bodymovin 插件将设计好的动画导出成 json 格式,就可以直接运用在 ios、android、web 和 react native之上,无需其他额外操作。
简单来说,lottie就是一个可以将ae动画转成可运行在ios、android、web、react native上的ae插件。
使用前请确保已安装这以下工具。
插件:bodymovin.zxp 解压:zxp installer其他。
lottie预览:https://www.lottiefiles.com/p... web bodymovin cdn: https://cdnjs.com/libraries/b...详细可参考:炫酷神器,ae插件bodymovin.zxp的安装与使用
由bodymovin导出的data.json实际就是动画的数据文件,我们引入的bodymovin.js库会对其做相应的解析。接下来我们只需要添加简单的初始化代码就可以在运行代码看到相应的动画效果了。
以下是最常用的api
let animation = bodymovin.loadanimation({ animationdata, // [必须] data.json文件 path, // data.json文件路径(animationdata/path选其一传入即可) container,// [必须] 父容器 renderer, // [必须] 渲染方式 loop, autoplay })
bodymovin.play() bodymovin.pause() bodymovin.stop() // 回到第0帧
animation.gotoandstop(time) or animation.gotoandstop(frame) ---- animation.gotoandplay(time) or animation.gotoandplay(frame)
animation.setsubframe() // true: 使用本地环境的fps [默认] // false: 使用ae原本的fps
animation.oncomplete = function () {} // 动画结束 animation.onloopcomplete = function () {} // 当前循环结束 // 使用addeventlistener方式 animation.addeventlistener('complete', function () {}) animation.addeventlistener('loopcomplete', function () {})
一般来说以上的api即可满足大部分的动画展示需求了。更详细内容可参考官网~
最后再分项目框架提供两个bodymovin的库
react:react-bodymovin vue:vue-lottie
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论