能夠成為新寵，必定是有他自己的獨(dú)特之處，那么lottie到底是什么呢？

在沒有接觸lottie之前，要想做一個很炫酷的動畫效果要經(jīng)過很復(fù)雜的計(jì)算，嗯，對于不善于這種高難度的計(jì)算的我來說，很是具有挑戰(zhàn)性啊，不過從今以后，制作一個動畫就很容易啦

1. lottie 簡介

Lottie是一個iOS，Android和React Native庫，可以實(shí)時渲染After Effects動畫，并且允許本地app像靜態(tài)資源那樣輕松地使用動畫。Lottie使用名為Bodymovin的開源After Effects的擴(kuò)展程序?qū)С龅腏SON文件格式的動畫數(shù)據(jù)。簡單來說就是利用一個json格式的動畫數(shù)據(jù)來渲染到頁面上，就是這么簡單，官方文檔上就有很多的小demo，比如?

2. lottie 能幫到我們嗎？

答案是肯定的，首先，設(shè)計(jì)同學(xué)在Adobe After Effects上設(shè)計(jì)了動畫效果，通過bodymovin插件，可以將動畫導(dǎo)出成一個json文件。

然后，開發(fā)同學(xué)就可以通過Lottie將前面生成的json文件渲染成動畫效果。
這樣就可以高效的實(shí)現(xiàn)很多復(fù)雜動畫效果啦

是不是看著就很有技術(shù)含量，不要急，下面我們也來做一個

3. lottie 實(shí)例

• 第一步 安裝vue-cli 搭建一個基本的vue實(shí)例

npm install -g vue-clivue init webpack test? ?// 構(gòu)建一個名為test的文件

• 第二步 安裝vue-lottie

npm install --save vue-lottie

• 第三步 引入到你的文件中，當(dāng)然你也可以全局引入

import Lottie from 'vue-lottie'?

• 第四步 引入json文件

這一步很是關(guān)鍵，他決定了你動畫的成敗，在做練習(xí)的時候，你可以到下面這個地方，也就是官網(wǎng)去找一個你喜歡的動畫，然后下載下來

神奇世界的大門

像這樣引入到你的文件中

import * as animationData from './assets/pumped_up.json'復(fù)制代碼

• 第五步 開始做動畫啦

? ? 像引入canvas一樣寫入你的文件中

<lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>復(fù)制代碼

? 不同于canvas的是他要有自己的方法

data () {return {defaultOptions: { animationData: animationData },animationSpeed: 1,anim: {}}},methods: {handleAnimation (anim) {this.anim = anim}}復(fù)制代碼

如果你想要加上暫停鍵，開始鍵等這些就這樣寫?

<template><div id="app"><lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/><div><p>Speed: x{{animationSpeed}}</p><inputtype="range"value="1"min="0"max="3"step="0.5"v-on:change="onSpeedChange"v-model="animationSpeed"></div><button @click="stop">stop</button><button @click="pause">pause</button><button @click="play">play</button></div> </template> <script> import Lottie from 'vue-lottie' import * as animationData from './assets/pumped_up.json' export default {name: 'app',components: { 'lottie': Lottie },data () {return {defaultOptions: { animationData: animationData },animationSpeed: 1,anim: {}}},methods: {handleAnimation (anim) { this.anim = anim},// 停止動畫stop () {this.anim.stop()},// 開始動畫play: function () {this.anim.play()},// 暫停動畫pause: function () {this.anim.pause()},// 動畫速度onSpeedChange () {this.anim.setSpeed(this.animationSpeed)}}} </script>復(fù)制代碼

好了，到了看效果的時候了?（我承認(rèn)這個動圖做得有點(diǎn)丑，但是相信我，運(yùn)行的效果真的很贊?）

• 第六步? 感謝欣賞

上面的案例是不是很簡單呢，不知道這個新的分享有沒有讓你get到新世界的大門，反正我是領(lǐng)略到了，想要做更炫酷的效果可以自己細(xì)細(xì)的研究一下哦??

最后附上開源地址：

• Android: Android地址
• iOS： iOS地址
• React Native：React Native地址
  
• lottie-web地址：github.com/airbnb/lott…
  

轉(zhuǎn)載于:https://juejin.im/post/5b7e74ce51882542a92ba0e9

總結(jié)

以上是生活随笔為你收集整理的动画道路上的新宠 -- Lottie的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。