动画方案 Lottie 学习（二）之实战使用Lottie-web

一、在jquery中使用

1、代码

$('.success-info-title').append('<p class="normal_finish" id="normal_finish_anima" > </p>');
 
var animaPaht = data.changeSkinFlag&&data.changeSkinFlag == 'midAutumnSkin' ? '/pay/js/biz/midAutumnNomrmalAnimaData.json': '/pay/js/biz/normalUserFinishAnimaData.json';
      window.Ariel.JSLoader.load('/pay/js/biz/lottie_svg.js', function () {
              var animation = bodymovin.loadAnimation({
              container: document.getElementById('normal_finish_anima'),
              renderer: 'svg',
              loop: false,
              autoplay: true,
              path: animaPaht
     });
 
　
　 setTimeout(function () { // 动画延迟播放
         animation.play();
    }, 200);
});

3、引入文件

4、注意

不能对已经存在的html添加lottie动画

二、在Vue中使用

1、代码

新建lottie组件：

<template>
  <div v-if="typeLottie === 'living'" ref="littleRef" class="lottie-page-bg" />
</template>

<script lang="ts">
import lottie from 'lottie-web';
import { defineComponent, onMounted, ref, onBeforeUnmount, computed } from '@vue/composition-api';
import iconData from './data/icon.json';
import type { AnimationItem } from 'lottie-web';

export default defineComponent({
  props: {
    typeLottie: {
      type: String,
      default: () => '',
    },
  },
  setup(props) {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const littleRef = ref<any>(null);

    let animation: AnimationItem | null = null;

    onMounted(() => {
      animation = lottie.loadAnimation({
        renderer: 'svg',
        loop: true,
        autoplay: true,
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
        container: littleRef.value!,
        animationData: iconData,
      });
    });

    onBeforeUnmount(() => {
      animation?.destroy();
    });

    return { littleRef };
  },
});
</script>

<style lang="less" scoped>
.lottie-page-bg {
  width: 12px;
  height: 12px;
  margin-top: -6px;
}
</style>

使用lottie组件：

import LottieIcon from '@/components/LottieIcon/index.vue';

components: {
   LottieIcon,
}

<template v-if="item.eventStatus === EVENTSTATUS.ONGOING">
    <div class="item-btn">
        <div
        class="btn-book btn-online"
        @click="handleOnline(item.authorInfo.userInfo.user_id)"
        >
        <LottieIcon v-if="laterRender" :typeLottie="'living'" />
        <div class="btn-online-text">
            点击进入直播间
        </div>
        </div>
    </div>
</template>