快捷導(dǎo)航

vue使用lottie-web實現(xiàn)web動畫效果

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

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

1. 簡介

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

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

2. 優(yōu)點

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

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); // 跳到某個時刻/幀并停止isFrame(默認(rèn)false)指示value表示幀還是時間(毫秒)
animation.goToAndPlay(value, isFrame); // 跳到某個時刻/幀并進(jìn)行播放
animation.goToAndStop(30, true); // 跳轉(zhuǎn)到第30幀并停止
animation.goToAndPlay(300); // 跳轉(zhuǎn)到第300毫秒并播放
animation.playSegments(arr, forceFlag); // arr可以包含兩個數(shù)字或者兩個數(shù)字組成的數(shù)組，forceFlag表示是否立即強制播放該片段
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(); // 刪除該動畫，移除相應(yīng)的元素標(biāo)簽等。

6. Lottie-web 常用的事件

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

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

您可能感興趣的文章: