Lottie一个适用于Web、Android、iOS、React Native和Window的移动库,它可以使用Bodymovin解析以json格式导出的Adobe After Effects动画,并再移动设备上进行本地渲染。
1.需要引入JavaScript文件,我使用的是cdn中的链接。这里直接上链接,按需取用。点这里
2.json格式的文件
我不是UI啊,我也不知道怎么做出来的,我只知道使用AE做的动画再通过bodymovin导出的。到我手里就是两个文件:一个.html文件和一个.json文件。
html后缀的文件可以直接使用,但是对于项目来说会存在冗余,所以我是用的json后缀文件。
3.引入json文件
在HTML里引入json文件我是这样做的:
1.需要给json文件声明变量接收
拿到的json文件:{" ":" "," ":" "}
处理后json文件:var one={" ":" "," ":" "}
(文件太长了,复制过来占地方,就这样看吧,也不影响[狗头])
备注:这里直接修改json文件会使文件出现小红叉,虽然不影响静态页面的显示,但为了更专业,这里可以把文件修改为js文件。
方法:将json文件修改为js文件,处理文件部分改为:window.one={" ":" "," ":" "}
,正常引入js文件即可,除了文件格式不一样,其他都是一样的,不需要做修改。
2.在文件中使用<script></script>
标签引入js文件或者json文件
4.使用lottie
接下来就是本篇文的主角–lottie
<body>
<div id="lottie"></div>
<!--引入lottie的js文件地址-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.1/lottie.min.js"></script>
<!--引入的js格式文件-->
<script type="text/javascript" src="js/json/animation.js"></script>
<script type="text/javascript">
//使用lottie
const anim = lottie.loadAnimation({
container: document.getElementById('lottie'),
renderer: 'svg',//渲染方式:svg:支持交互、不会失帧;canvas、html:支持3D,支持交互
loop: false,//循环播放:默认为true
autoplay: false,//自动播放:默认为true
//assetsPath:'images/',//图片文件夹的路径(这里可以设置图片地址,如果设置了最终是在这个路径下找图片)
animationData: one //变量名(还记得上面声明变量接收的json文件或者js文件吧,跟那个接收的名字要一样)
})
//然后就是把这段代码放在你想要运行的时候,比如想要在加载之后就执行,那就放在以下代码里
window.onload=function(){anim.play()}
</script>
</body>
5.常用方法
anim.play()
:播放,从当前帧开始播放anim.stop()
:停止,并回到第0帧anim.pause()
:暂停,并保持当前帧anim.goToAndStop(value,isFrame)
:跳到某个时刻/帧并停止anim.goToAndPaly(value,isFrame)
:跳到某个时刻/帧并播放
//isFrame:指明value的单位是毫秒(false 默认的)还是帧(true),可以省略。
animation.goToAndStop(30, true) // 跳转到第30帧并停止
animation.goToAndPlay(300) // 跳转到第300毫秒并播放
anim.playSegments(arr,forceFlag)
:以帧为单位,播放指定片段
//arr:可以包含两个数字或者两个数字组成的数组
//forceFlag:表示是否立即强制播放该片段
animation.playSegments([10,20], false) // 播放完之前的片段,播放10-20帧
animation.playSegments([[0,5],[10,18]], true) // 直接播放0-5帧和10-18帧
anim.setSpeed(speed)
:设置播放速度,speed为1表示正常速度anim.setDirection(direction)
:设置播放方向,1表示正向播放,-1表示反向播放anim.destroy()
:删除该动画,移除相应的元素标签等
6.常用事件
//监听方法 给需要的动画添加监听
//加载完动画json文件时的data_ready事件
anim.addEventListener('data_ready', () => { console.log('animation data has loaded'); })
//播放完成(循环播放下不会触发)
anim.addEventListener('complete', () => {});
//当前循环下播放(循环播放/非循环播放)结束时触发
anim.addEventListener('loopComplete', () => {});
//每进入一帧就会触发,播放时每一帧都会触发一次,stop方法也会触发
anim.addEventListener('enterFrame', () => {});
//播放指定片段时触发,playSegments、resetSegments等方法刚开始播放指定片段时会触发,如果playSegments播放多个片段,多个片段最开始都会触发
anim.addEventListener('segmentStart', () => {});
//将在动画删除时触发
anim.addEventListener('destroy', () => {});
7.部分高阶用法(来源网络)
在制作AE动画时,将图层命名为#svgId格式,前端加载该动画后,相应的图层的id会被设置为svgId,可以通过dom⽅法获取该元素并做相应的操作;
在制作AE动画时,将图层命名为.svgClass格式,前端加载该动画后,相应的图层的class会被设置为svgClass,可以通过dom⽅法获取这些元素并做相应的操作;文章来源:https://www.toymoban.com/news/detail-408498.html
8.补充对json文件的解析
注:来源于网络的图片,见水印
动画总的运行时间=(结束关键帧-起始关键帧)/帧率文章来源地址https://www.toymoban.com/news/detail-408498.html
到了这里,关于Lottie--前端动画效果--UI输出json格式--lottie动画在JavaScript中使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!