web-lottie 前端动画效果

资源 

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

动画的实现逻辑借用官网的一句话

Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web!

优势

简单快捷的 为前端添加炫酷动画效果

且，动画更精致 （完全由设计去制作，专业的事专业的人去做 ，关于AE的要使用的插件 http://airbnb.io/lottie/#/after-effects）

且，在web端兼容性好

且，相对于 gif 等，体积更小，更好的适应拉伸，和高分辨率屏幕

使用

npm install lottie-web 

import lottie from 'lottie-web'

let amt = lottie.loadAnimation({

　　container: element, // the dom element that will contain the animation

　　renderer: 'svg',

　　loop: true,

　　autoplay: true,

　　path: 'data.json' // the path to the animation json

});

amt .play() // 运行动画

amt.addEventListener('complete', _=>{})

官网关于 动画 的参数

http://airbnb.io/lottie/#/web?id=usage

官网关于 动画 的方法

http://airbnb.io/lottie/#/web?id=usage-1

官网关于 动画 的事件

http://airbnb.io/lottie/#/web?id=events

有了以上官网文档的支持，动画组件的使用易如反掌