返回

lottie动画在vue项目中的使用

Created By ZOU on May 18 2020

我也是最近才接触到这个插件,最近在忙公司项目的时候,要做动画效果,在接到设计的素材的时候,拿到的是一个json文件,当时没接触过这方面的东西,之前做动画也都是用css3做的,查阅了设计给的资料之后才了解了。

使用方法也很简单:

// 安装依赖
npm i -S lottie-web

安装完依赖后可以在项目中使用:

<template>
<div ref="lottie"></div>
</template>
<script>
import lottie from 'lottie-web'
export default {
mounted() {
// 加载动画
this.animate = lottie.loadAnimation({
// 动画挂载的元素
container: this.$refs['lottie'],
// 渲染器
renderer: 'svg',
// 循环播放动画
loop: true,
// 自动播放
autoplay: false,
// 设计给的json,路径为网络地址
path: 'lottie.json'
})
}
}
</script>

这样就可以使用了。

lottie-web的文档https://github.com/airbnb/lottie-web#readme

标签: javascript vue