vue-lottie動畫效果

_小田發表於2018-06-07

Vue動畫

vue-lottie動畫效果

之前用lottie模仿過san官網的動畫效果(沒有打廣告QAQ)

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>
複製程式碼

# propsprops: { 
   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原始碼

專案地址