uniapp页面开场动画

npm i lottie-miniprogram

效果预览:

<template>
  <view class="lottie-wrap">
    <canvas class="lottie" id="canvas" type="2d"></canvas>
  </view>
</template>

<script>
  import lottie from 'lottie-miniprogram'
  import {
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        animation: null
      };
    },
    computed: {
      ...mapGetters(['systemInfo']),
    },
    onLoad() {
      uni.createSelectorQuery()
        .in(this)
        .select("#canvas")
        .node((res) => {
          const canvas = res.node
          const context = canvas.getContext("2d")
          canvas.width = 390 //this.systemInfo.windowWidth
          canvas.height = 844 //this.systemInfo.windowHeight
          //需要在任何 lottie 接口调用之前调用，传入 canvas 对象
          lottie.setup(canvas)
          //创建动画实例
          let  animation = lottie.loadAnimation({
            //是否循环播放
            loop: false,
            //是否自动播放
            autoplay: true,
            //path:这里替换成你要用的动画链接 在线的使用path,本地的使用animationData，通过require引入
            path: "https://gist.githubusercontent.com/kiriss91/889556a50a1e60560003453f8933d60b/raw/7bacaec5eac9301618bf89df4fc5510c8ae65e36/Terminal-payment.json",
            renderer: "canvas",
            rendererSettings: {
              context
            }
          })
          animation.addEventListener("complete", () => {
            console.log('complete');
          //   todo 动画加载完开启下一步逻辑
          })
        }).exec()

    },

  }
</script>

<style lang="scss">
  .lottie-wrap {
    width: 750rpx;
    height: 100vh;
    position: relative;
  }

  .lottie {
    background-color: rgba(255, 255, 255, 1);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    box-sizing: border-box;
  }
</style>