Javascript动画插件lottie-web的使用方法

lottie可以将一个json数据渲染成一个动画，而且支持多平台，在不同的平台下使用同一个json文件即可实现相同的效果，非常的方便。这里介绍前端的使用方法。
https://github.com/airbnb/lottie-web

1.配合vue-cli使用

1.npm安装lottie-web

npm install lottie-web

2.创建loading.vue
2.1引入lottie插件和需要的json数据
2.2接收父组件传入的配置参数
2.3在页面渲染完毕后进行初始化

3.父组件引用loadding.vue
可以为loadding组件设定一个容器，通过空中这个容器的display属性来控制loadding组件的显示和隐藏

2.在HTML页面中使用

1.引入lottie-web这个插件 可以使用cdn，也可以引入本地的

2.页面加载完毕后，初始化，并传入相应的配置项

注意：json数据使用了ajax进行获取，要留意跨域问题。

为了避免跨域或者本地读取时的权限问题，可以讲json文件的数据用 反引号 `` 包裹起来，用一个全局变量保存，然后保存为betcoin2.js，即可使用这个数据了，记得用JSON.parse()将json字符串转换回对象格式

//betcoin2.js
var animationData = `省略，里面为原json对象`

到此这篇关于Javascript动画插件lottie-web的使用方法的文章就介绍到这了,更多相关Javascript动画插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！