web端动效 lottie-web 使用

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

1. 安装

yarn add lottie-web

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

<!-- components/MyLottie -->
<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>

在页面引用组件，可以去官方社区下载动画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>

这样一个lottie动画就出来了

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

html部分修改

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

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)
      }
    }
  }
}

引入组件处修改

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

下面是改造后的效果