vue-lottie動畫效果

_小田發表於2018-06-07
Vue動畫

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需要改！！！

# 這裡引入了&emsp;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&emsp;&emsp;&emsp;&emsp;&emsp;# 不迴圈
    }
  }
}
複製程式碼
# 事件呼叫
@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

相關文章