lottie json动画

最新推荐文章于 2024-07-19 14:08:13 发布

qwer3205604

最新推荐文章于 2024-07-19 14:08:13 发布

阅读量141

点赞数

文章标签： json javascript 前端

本文链接：https://blog.csdn.net/qwer3205604/article/details/127938034

版权

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' />
  <title>Lottie</title>
</head>

<body style="background: #fff;position: relative;">
  <div id="bodymovin" style="width: 100%;height: 100%;position: absolute;left:0;top:0"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.js"></script>
  <script>
    var animData = {
      wrapper: document.getElementById('bodymovin'),
      animType: 'html',  // 'svg/canvas/html'选一个
      loop: true,  // 循环播放
      prerender: true,
      autoplay: true,  // 自动播放
      path: 'https://labs.nearpod.com/bodymovin/demo/markus/isometric/markus2.json'
    };
    var anim = bodymovin.loadAnimation(animData);
  </script>
</body>

vue

// 如果要控制显示必须用v-show  v-if出不来
// transition插入内容
<div id="loadingMovin">
    <transition name="fade">
        <div class="text">
            <span>初始化中，请稍等</span>
        </div>
    </transition>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.js"></script>

mounted() {
    this.$nextTick(() => {
        this.empty()
    })
},
methods: {
    empty() {
        bodymovin.loadAnimation({
            wrapper: document.getElementById('bodymovin'),
            animType: 'svg',
            loop: true,
            prerender: true,
            autoplay: true,
            path: '/static/index/json/jiantou.json'
        });
    },
}

销毁动画

loadingEmpty() {
    this.emptyB = bodymovin.loadAnimation({
        wrapper: document.getElementById('loadingMovin'),
        animType: 'svg',
        loop: true,
        prerender: true,
        autoplay: true,
        path: '/static/index/json/loading.json'
    });
},

//销毁动画
this.emptyB.destroy();