天天看點

移動端動畫lottie 和 svga的差別

Lottie  隻需要 ui設計師給到json動畫檔案,像img圖檔一樣import引入即可,對應屬性   連結:https://juejin.cn/post/6844903661760413704 

或者去官網檢視 http://airbnb.io/lottie/#/

移動端動畫lottie 和 svga的差別
移動端動畫lottie 和 svga的差別

 svga上來需要先播放動畫的dom存在,動态的dom不太适合,官網連結 :http://svga.io/

yarn add svgaplayerweb —save   ||  npm i svgaplayerweb —save

import SVGA from "svgaplayerweb"

<div id="demoCanvas" ref="demoCanvas"></div>

 let player = new SVGA.Player("#demoCanvas");

      let parser = new SVGA.Parser("#demoCanvas");

      parser.load(this.bgImg,function(videoItem) {                         

          player.setVideoItem(videoItem);

          player.startAnimation();

        }

      );