其他分享
首页 > 其他分享> > lottie 动画

lottie 动画

作者:互联网

前沿

官方文档: 

http://airbnb.io/lottie/#/web

 

lottie-web一个适用于Web,Android,iOS,React Native和Windows 的移动库,

它可以使用Bodymovin解析以json 格式导出的Adobe After Effects动画,并在移动设备上进行本地渲染.

 

使用:

通过一个叫 Bodymovin 的开源 After Effects 插件,以 JSON 文件的形式进行输出,Lottie 通过 JSON 格式下载动画数据并实时提供给开发者。

① bodymovin插件下载安装

② 安装并解压bodymovin

③ 打开AE,添加bodymovin扩展

④ 导出data.json文件,动画的数据文件 详细可参考:炫酷神器,AE插件Bodymovin.zxp的安装与使用

⑤ API

导入初始化:
<script src="js/bodymovin.js" type="text/javascript"></script>
复制代码
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)或animation.gotoAndStop(frame)
animation.gotoAndPlay(time)或animation.gotoAndPlay(frame)
 

设置fp:

animation.setSubframe()
// true: 使用本地环境的fps [默认]
// false: 使用ae原本的fps
 

事件监听:

animation.onComplete = function () {} // 动画结束
animation.onLoopComplete = function () {} // 当前循环结束
// 使用addEventListener方式
animation.addEventListener('complete', function () {})
animation.addEventListener('loopComplete', function () {})

lottie优点:

Lottie方法方案是由设计师出动画,导出为json,给前端播放。所以,使用Lottie方案的好处在于:

① 动画由设计使用专业的动画制作工具Adobe After Effects来实现,使动画实现更加方便,动画效果也更好;

② 前端可以方便的调用动画,并对动画进行控制,减少前端动画工作量;

③ 设计制作动画,前端展现动画,专业人做专业事,分工合理;

④ 卖家秀即买家秀,还原程度百分之百;

⑤ 使用lottie方案,json文件大小会比gif文件小很多,性能也会更好。

lottie不足:

① lottie-web文件本身仍然比较大,lottie.js大小为513k,轻量版压缩后也有144k,经过gzip后,大小为39k。所以,需要注意lottie-web的加载。目前H5项目有离线包,PC项目也会上PWA,会对其进行缓存,保证加载速度。

② lottie动画其实可以理解为svg动画/canvas动画,不能给已存在的html添加动画效果;

③ 动画json文件的导出,目前是将AE里面的参数一一导出成json内容,如果设计师建了很多的图层,可能仍然有json文件比较大(20kb)的问题。需要设计师遵循一定的规范。

④ 有很少量的AE动画效果,lottie无法实现,有些是因为性能问题,有些是没有做。比如:描边动画等。

 

 

一个小的练习

JS

/* Shapes */
var svgContainer = document.getElementById('svgContainer');
var animItem = bodymovin.loadAnimation({
    wrapper: svgContainer,
    animType: 'svg',
    loop: true,
    path: '/uploads/1906/girl.json'
});
animItem.setSubframe(false);
/* Shapes */
var svgContainer = document.getElementById('svgContainer2');
var animItem2 = bodymovin.loadAnimation({
    wrapper: svgContainer,
    animType: 'canvas',
    loop: true,
    path: '/uploads/1906/parents.json'
});
animItem2.setSubframe(false);
/* Shapes */
var svgContainer = document.getElementById('svgContainer3');
var animItem3 = bodymovin.loadAnimation({
    wrapper: svgContainer,
    animType: 'canvas',
    loop: true,
    path: '/uploads/1906/sasquatch.json'
});
animItem3.setSubframe(false);
animItem.setSpeed(0.8)
animItem2.setSpeed(0.8)
animItem3.setSpeed(0.8)
window.onresize = function() {
    animItem.resize()
    animItem2.resize()
    animItem3.resize()
}

 

html

<div id="svgContainer"></div>
<div id="svgContainer2"></div>
<div id="svgContainer3"></div>

<script src="/uploads/1903/lottie.min.js"></script>

css

html,
body {
    margin: 0;
    padding: 0;
    background-color: #1E1C26;
}
body,
html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
}
#svgContainer,
#svgContainer2,
#svgContainer3 {
    width: 32.8%;
    height: 100%;
    background-color: #1E1C26;
    display: inline-block;
    vertical-align: top;
}

 

然后就是要和UI那边商讨吧这样的设计和动画,是不是进阶了呢 加油呀

标签:动画,svgContainer,json,animation,bodymovin,lottie
来源: https://www.cnblogs.com/yf-html/p/15406174.html