vue-lottie动画效果

vue-lottie动画效果

以前用lottie模仿过san官网的动画效果(没有打广告QAQ)

仓库地址

模仿demo

blog

掘金

vue项目 用到了vue-lottie动画效果

用lottie的好处有不少(.......此处省略ｎ字) 简单来讲就是简单高效的还原设计的动画效果

而后在我的项目使用vue-lottie 分享一些小小经验吧

废话很少说～～～ (正经分割线)

---

分析官方demo

先来一个简单的尝尝鲜

vue-lottie仓库

vue-lottie demo

打开仓库能够看见不少很棒的效果（nice

Installation

npm install --save vue-lottie
复制代码

Usage

<template>
    <div id="app">
        <lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>
        <div>
            <p>Speed: x{{animationSpeed}}</p>
            <input type="range" value="1" min="0" max="3" step="0.5"
                   v-on:change="onSpeedChange" v-model="animationSpeed">
        </div>
        <button v-on:click="stop">stop</button>
        <button v-on:click="pause">pause</button>
        <button v-on:click="play">play</button>
    </div>
</template>

<script>
  import Lottie from './lottie.vue';
  import * as animationData from './assets/pinjump.json';

  export default {
    name: 'app',
    components: {
      'lottie': Lottie
    },
    data() {
      return {
        defaultOptions: {animationData: animationData},
        animationSpeed: 1
      }
    },
    methods: {
      handleAnimation: function (anim) {
        this.anim = anim;
      },

      stop: function () {
        this.anim.stop();
      },

      play: function () {
        this.anim.play();
      },

      pause: function () {
        this.anim.pause();
      },

      onSpeedChange: function () {
        this.anim.setSpeed(this.animationSpeed);
      }
    }
  }
</script>
复制代码

这是以前官方给的demo代码 基本上和平时使用没啥不同(因此只须要复制粘贴就ok了)

# json 动画效果AE转json后的文件
import * as animationData from './assets/pinjump.json';
复制代码

引入的json须要改！！！

# 这里引入了 lottie组件
import Lottie from './lottie.vue';
复制代码

# lottie.vue
<template>
    <div :style="style" ref="lavContainer"></div>
</template>

<script>
  import lottie from 'lottie-web'
export default {
    props: {
      options: {
        type: Object,
        required: true
      },
      height: Number,
      width: Number
    },
    data() {
      return {
        style: {
          width: this.width ? `${this.width}px` : '100%',
          height: this.height ? `${this.height}px` : '100%',
          overflow: 'hidden',
          margin: '0 auto'
        }
      }
    },
    mounted() {
      this.anim = lottie.loadAnimation({
        container: this.$refs.lavContainer,
        renderer: 'svg',
        loop: this.options.loop !== false,
        autoplay: this.options.autoplay !== false,
        animationData: this.options.animationData,
        rendererSettings: this.options.rendererSettings
      }
      )
      this.$emit('animCreated', this.anim)
    }
  }
</script>
复制代码

而后会发现仍是有错误(缺乏组件！) 其实很简单啦，打开仓库进入src而后打开lottle组件而后复制过去就ok啦hhh(简单)

这是效果图（是否是很简单２３３

使用别的json文件

官方给给了一个很好的效果网站 地址

下载json文件 而后更换引入的json

# json 动画效果AE转json后的文件
import * as animationData from './assets/blood_transfusion_kawaii.json.json';

复制代码

是否是也很简单！！！

使用vue-lottie模仿san官网的动画效果

先来效果图～～～

由于有多个须要用到lottie动画，想了半天不知道怎么解决调用方法的问题 最后想了一个简单的方法

直接将每个动画抽到一个组件 组件内依然用以前的方法（稍微改造一下就行

而后利用父子组件传数据的形式传递json文件 子组件props接收

# html
<template>
  <div class="card-panel" @mouseenter="lottiePlay" @mouseleave="lottieStop">
    <div class="card-panel-icon-wrapper icon-shoppingCard">
      <lottie :options="defaultOptions" :height="80" :width="80" v-on:animCreated="handleAnimation" />
    </div>
    <div class="card-panel-description">
      <div class="card-panel-text">今日活跃</div>
      <div class="card-panel-num">2600</div>
    </div>
  </div>
</template>
复制代码

# props
props: {
    animationDataPath: {
      type: Object,
      default: null
    }
  },
  data() {
  return {
    defaultOptions: {
      // animationData: animationDataPath,
      animationData: this.animationDataPath,
      autoplay: false,  # 不自动播放
      loop: false     # 不循环
    }
  }
}
复制代码

# 事件调用
@mouseenter="lottiePlay" @mouseleave="lottieStop"

lottiePlay: function() {
  this.anim.play()
},
lottieStop: function() {
  this.anim.stop()
}
复制代码

而后就到了父组件传数据

# 父组件
<panel-lottie :animationDataPath="animationDataPathOne"></panel-lottie>

animationDataPathOne: require('../../../public/json/compass.json')
复制代码

本身用到了require引入json 而后打包出来 同样能够正常运行 若是你们有很好的方法能够教我！我好学习学习

---

emmmmm 大概就是这么多吧～

若是实在须要这个的源码能够打开个人github仓库 因为项目仍是一个半成品 因此地址就放在最后面了

vue-lottie源码

项目地址

若是你们以为不错的话 能够点star哦（厚脸皮２３３

QQ 952822399

新开了个Qq群，你们也能够进来互相交流~ iD 718639024