快捷導(dǎo)航

vue使用lottie-web實(shí)現(xiàn)web動(dòng)畫效果

更新時(shí)間：2024年06月14日 09:39:58 作者：范特西是只貓

在web端,lottie-web庫(kù)可以解析導(dǎo)出的動(dòng)畫json文件,并將其以svg或者canvas的方式將動(dòng)畫繪制在我們的頁(yè)面上,這篇文章主要介紹了vue使用lottie-web實(shí)現(xiàn)web動(dòng)畫,需要的朋友可以參考下

1. 簡(jiǎn)介

官方介紹：Lottie 是一個(gè)庫(kù)，可以解析使用AE制作的動(dòng)畫（需要用bodymovie導(dǎo)出為json格式）,支持web、ios、android、flutter和react native。在web端，lottie-web庫(kù)可以解析導(dǎo)出的動(dòng)畫json文件，并將其以svg或者canvas的方式將動(dòng)畫繪制在我們的頁(yè)面上.

找到我們想要的動(dòng)畫，然后點(diǎn)擊后，彈出窗口，點(diǎn)擊下載，格式為JSON。然后就能把這個(gè)動(dòng)畫的json數(shù)據(jù)用到我們自己的項(xiàng)目里邊去了

2. 優(yōu)點(diǎn)

動(dòng)畫由設(shè)計(jì)使用專業(yè)的動(dòng)畫制作工具AE來實(shí)現(xiàn)，使動(dòng)畫實(shí)現(xiàn)更加方便，且效果更好
前端可以方便的調(diào)用動(dòng)畫，并對(duì)動(dòng)畫進(jìn)行控制，減少前端動(dòng)畫工作量
設(shè)計(jì)制作動(dòng)畫，前端展現(xiàn)動(dòng)畫，分工明確
使用lottie方案，json文件大小比gif文件小很多，性能也會(huì)更好

3. 效果

4. 安裝使用

npm 安裝

npm install lottie-web

完整代碼

<template>
  <div class="home">
    <div class="body">
      <div id="lottieId" />
    </div>
  </div>
</template>
<script>
import lottie from 'lottie-web'
export default {
  name: 'Demo',
  data() {
    return{
    }
  },
  mounted() {
    this.animation = lottie.loadAnimation({
      container: document.getElementById('lottieId'),
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: require('@/assets/lottie/by.json'),
    })
  },
}
</script>
<style scoped lang="scss">
.home {
  .body {
    width: 890px;
    height: 500px;
    border: #ff3366 solid 10px;
    box-sizing: border-box;
    box-sizing: border-box;
    #lottieId {
      padding: 40px;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
    }
  }
}
</style>

5. lottie-web 常用方法

animation.play(); // 播放，從當(dāng)前幀開始播放
animation.stop(); // 停止，并回到第0幀
animation.pause(); // 暫停，并保持當(dāng)前幀
animation.goToAndStop(value, isFrame); // 跳到某個(gè)時(shí)刻/幀并停止isFrame(默認(rèn)false)指示value表示幀還是時(shí)間(毫秒)
animation.goToAndPlay(value, isFrame); // 跳到某個(gè)時(shí)刻/幀并進(jìn)行播放
animation.goToAndStop(30, true); // 跳轉(zhuǎn)到第30幀并停止
animation.goToAndPlay(300); // 跳轉(zhuǎn)到第300毫秒并播放
animation.playSegments(arr, forceFlag); // arr可以包含兩個(gè)數(shù)字或者兩個(gè)數(shù)字組成的數(shù)組，forceFlag表示是否立即強(qiáng)制播放該片段
animation.playSegments([10,20], false); // 播放完之前的片段，播放10-20幀
animation.playSegments([[0,5],[10,18]], true); // 直接播放0-5幀和10-18幀
animation.setSpeed(speed); // 設(shè)置播放速度，speed為1表示正常速度
animation.setDirection(direction); // 設(shè)置播放方向，1表示正向播放，-1表示反向播放
animation.destroy(); // 刪除該動(dòng)畫，移除相應(yīng)的元素標(biāo)簽等。

6. Lottie-web 常用的事件

animation.addEventListener('data_ready', () => {}) // 動(dòng)畫數(shù)據(jù)加載完畢
animation.addEventListener('config_ready', () => {}) // 完成初始配置后
animation.addEventListener('data_failed', () => {}) // 加載動(dòng)畫數(shù)據(jù)失敗
animation.addEventListener('loaded_images', () => {}) // 所有圖片加載成功或者失敗
animation.addEventListener('DOMLoaded', () => {}) // 將元素添加到DOM后

到此這篇關(guān)于vue使用lottie-web實(shí)現(xiàn)web動(dòng)畫的文章就介紹到這了,更多相關(guān)vue使用lottie-web內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: