vue3+lottie-web加载json格式动画

项目中要用动画

设计说gif会失真，用json格式动画吧。

我虎躯一震，json格式动画什么鬼？lottie库什么鬼。。。。

不废话，直接上重点

• 环境：编辑器webstorm，前端技术栈vue3+vite+ts

1. 安装lottie-web

yarn add lottie-web

2. 引入lottie,引入json格式动画文件.

  import lottie from 'lottie-web';
  import lottieData from '/src/assets/lottie/calculateLoading.json';

3. 应用。

      <div style="position: absolute;left: 0;top: -20px;z-index: 99;width: 100%;height: 598px;background: #eee;opacity: 0.7;">
        <div id="lottieBox" style="width: 280px;height: 280px;z-index: 999;margin: auto;margin-top: 160px;"></div>
        <p style="text-align: center;">
          <span>正在计算，请稍后。。。</span>
        </p>
      </div>

搞定，手工！