web端动效 lottie-web 使用

Lottie 是 Airbnb 开发的，一个适用于 Android、iOS、Web 和 Windows 的库，能够渲染 Adob​​e After Effects 动画特效。

1. 安装

yarn add lottie-web
1

2. 使用方法
   我这里创建了一个组件MyLottie.vue

<template>
  
  <div class="lottie">div>
template>

<script>
import lottie from 'lottie-web'

export default {
  props: {
    animationData: {
      type: Object,
      required: true
    },
    autoplay: {
      type: Boolean,
      default: true
    },
    loop: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      lottie: null
    }
  },
  mounted () {
    this.intLottie()
  },
  methods: {
    intLottie () {
      const { animationData, autoplay, loop } = this
      this.lottie = lottie.loadAnimation({
        container: this.$el, // 渲染容器
        renderer: 'svg', // 渲染方式 svg|canvas|html
        loop, // 是否循环 true|false|number
        autoplay, // 自动播放 true|false
        animationData // lottie json文件
      })
    }
  }
}
script>

<style lang="scss" scoped>
.lottie {
  width: 200px;
  height: 200px;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

在页面引用组件，可以去官方社区下载动画json

<template>
  <div>
    <MyLottie :animationData="lottieJson" />
  div>
template>

<script>
import MyLottie from '@/components/MyLottie'

export default {
  name: 'Home',
  components: {
    MyLottie
  },
  data () {
    return {
      // lottie json文件
      lottieJson: require('@/assets/lottie/lottie.json')
    }
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

这样一个lottie动画就出来了

下面结合lottie的一些实例方法，将我们的lottie组件添加鼠标事件，官方文档

html部分修改

<div class="lottie" @mouseenter="onMouseenter" @mouseleave="onMouseleave">div>
1

methods部分修改

methods: {
    intLottie () {
      let { animationData, autoplay, loop } = this
      if (!autoplay) {
      	// 这里交互播放不循环
        loop = false
      }
      this.lottie = lottie.loadAnimation({
        container: this.$el, // 渲染容器
        renderer: 'svg', // 渲染方式
        loop, // 是否循环
        autoplay, // 自动播放
        animationData // lottie json文件
      })
    },
    onMouseenter () {
      // 我这里demo，非自动播放则判断为鼠标交互播放，具体封装根据自身业务场景来
      if (!this.autoplay) {
        this.lottie.setDirection(1)
        this.lottie.play()
        // 监听lottie播放结束
        this.lottie.addEventListener('complete', e => {
          this.lottie.stop()
        })
      }
    },
    onMouseleave () {
      this.lottie.removeEventListener('complete')
      if (!this.autoplay) {
      	// 改变播放方向，鼠标移出回退
        this.lottie.setDirection(-1)
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

引入组件处修改

<MyLottie :animationData="lottie" :autoplay="false" />
1

下面是改造后的效果