Lottie簡介

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

Lottie的優(yōu)點

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

lottie-web 在前端的使用

1.安裝lottie-web

npm install lottie-web

2.lottie-web的基本用法

const animation = lottie.loadAnimation({
  container: document.getElementById('domId'), // 綁定dom節(jié)點
  renderer: 'svg', // 渲染方式:svg侠讯、canvas
  loop: true, // 是否循環(huán)播放，默認(rèn)：false
  autoplay: true, // 是否自動播放, 默認(rèn)true
  animationData: // AE動畫使用bodymovie導(dǎo)出為json數(shù)據(jù)
})

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); // 跳到某個時刻/幀并進行播放

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)簽等谷扣。

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后

Lottie的免費資源

https://lottiefiles.com/

image.png

在vue中使用lottie

1.安裝lottie-web

npm install lottie-web

2.封裝一個基礎(chǔ)的組件lottie.vue

<template>
  <div>
    <div ref="bodyAnimation" :style="style"></div>
  </div>
</template>
   
<script>
import lottie from "lottie-web";
export default {
  name: "",
  props: {
    options: {
      type: Object,
      required: true,
    },
    width: {
      type: Number,
      default: 200,
    },
    height: {
      type: Number,
      default: 200,
    },
  },
  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.bodyAnimation, // the dom element that will contain the animation
      renderer: "svg",
      loop: this.options.loop !== false,
      autoplay: this.options.autoplay !== false,
      animationData: this.options.animationData,
      rendererSettings: this.options.rendererSettings,
      //   path: sheepJson // the path to the animation json
    });
    this.$emit("animCreated", this.anim);
  },
  methods: {},
};
</script>
   
   <style lang="scss" scoped>
</style>

3.使用組件

<template>
  <div @click="next()">
    <lottie
      :options="heartOptions"
      :height="200"
      :width="200"
      v-on:animCreated="heartAnimation"
    />
  </div>
</template>
  
  <script>
import lottie from "../../components/Lottie/index";
import heartdata from "../../assets/json/heart.json";
export default {
  name: "",
  components: {
    lottie,
  },
  data() {
    return {
      heartOptions: {
        animationData: heartdata,
        loop: false,
        autoplay: false,
      },
      heartanim: null,
      Direction: -1,
    };
  },
  mounted() {},
  methods: {
    heartAnimation: function (anim) {
      this.heartanim = anim;
      if (this.Direction == -1) {
        this.heartanim.goToAndStop(64, true);
      }
    },
    next() {
      
      if (this.Direction > 0) {
        this.Direction = -1;
        this.heartanim.setDirection(this.Direction);
        this.heartanim.play();
        console.log(1);
      } else {
        this.Direction = 1;
        this.heartanim.setDirection(this.Direction);
        this.heartanim.play();
        console.log(2);
      }
    },
  },
};
</script>
  
<style lang="scss" scoped>
</style>