這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 前言 白屏一直是一個前端開發談之變色的問題。 “什麼？我的頁面剛上線就白屏了，是報錯了，還是相容性問題，還是性能問題，多刷新幾次就好了，用戶網路不行吧。” 簡單來說，白屏就是用戶打開前端頁面什麼有沒有。 這是一個很重要的質量指標。 那麼我 ...
哈嘍！大家好！我是程式視點的小二哥。
前端開發中，總會遇到這樣一個困境：動畫還原。對於前端開發工程師，有的是這樣做的。
- 照著設計動畫模仿，猜測動畫時長，手創建貝塞爾曲線……
- 調整細節耗時耗力，效果還差強人意...
- 好不容易實現了，還原度卻達不到要求
在被UI設計折磨一頓後，小二哥找到瞭解決這個困境的方案。它就是今天的主角：Lottie
Lottie簡介
Lottie 是Airbnb開源的一個 面向iOS、Android、React Native 的動畫庫，能分析 AE 導出的動畫（需要用bodymovin導出為json格式），並且能讓原生 App 像使用靜態素材一樣使用這些動畫，完美實現動畫效果。
下麵是Lottie提供的官方效果圖。類似下麵這種一段動畫的播放，非常適合使用Lottie來做。
Lottie流程
我們先來看下整個流程簡圖。
設計師用AE把動畫效果做出來，再用Bodymovin導出相應地json文件給到前端，前端使用Lottie庫就可以實現動畫效果。功能簡單且強大。
至於Adobe Effect和Bodymovin插件的安裝與使用...嗯嗯，這是設計師的事情，咱們就不操心啦。
Lottie使用入門
靜態URL引入
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.8.1/lottie.min.js" integrity="sha512-V1YyTKZJrzJNhcKthpNAaohFXBnu5K9j7Qiz6gv1knFuf13TW/3vpgVVhJu9fvbdW8lb5J6czIhD4fWK2iHKXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
調用loadAnimation
var params = {
container: element, // 容器節點
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json' // JSON文件路徑
}
var anim = lottie.loadAnimation(params);
vue中使用Lottie
依賴安裝和使用
通過NPM安裝vue-lottie
npm install --save vue-lottie
vue-lottie使用
<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>
參數配置
也就是上面的defaultOptions屬性傳遞配置對象：
container：在其上呈現動畫的 dom 元素animationData：一個帶有導出動畫數據的對象。path：動畫對象的相對路徑。（animationData 和 path 是互斥的）loop：預設值為true。可傳遞需要迴圈的特定次數autoplay：true / false 它會在準備好後立即開始播放name：動畫名稱以供將來參考renderer: 'svg' / 'canvas' / 'html' 設置渲染器
Lottie動畫監聽
Lottie提供了用於監聽動畫執行情況的事件：
- complete
- loopComplete
- enterFrame
- segmentStart
- config_ready(初始配置完成)
- data_ready（所有動畫數據載入完成）
- DOMLoaded（元素已添加到DOM節點）
- destroy
可使用addEventListener監聽事件
// 動畫播放完成觸發
anm.addEventListener('complete', anmLoaded);
// 當前迴圈播放完成觸發
anm.addEventListener('loopComplete', anmComplete);
// 播放一幀動畫的時候觸發
anm.addEventListener('enterFrame', enterFrame);
Lottie的更多詳解，請查閱下方鏈接。
Lottie 地址：https://github.com/airbnb/lottie-android
Lottie 官網：https://airbnb.design/lottie/
關註同名微信公眾號【程式視點】，瞭解更多有趣、好玩的項目吧~
