UNIAPP启动页动画

以下是UNIAPP启动页动画的示例代码：

<template>
  <view class="container">
    <image class="logo" src="/static/logo.png"></image>
    <view class="animation">
      <canvas canvas-id="myCanvas" class="canvas"></canvas>
    </view>
  </view>
</template>

<script>
  export default {
    onReady() {
      const ctx = uni.createCanvasContext('myCanvas', this);
      const width = uni.upx2px(750);
      const height = uni.upx2px(750);
      const r = uni.upx2px(300);      const lineWidth = uni.upx2px(6);
      const startAngle = 0;
      const endAngle = 2 * Math.PI;
      const gradient = ctx.createLinearGradient(0, 0, width, height);
      gradient.addColorStop(0, '#FFD801');
      gradient.addColorStop(1, '#FF8040');
      ctx.beginPath();
      ctx.arc(width / 2, height / 2, r, startAngle, endAngle, false);
      ctx.setStrokeStyle(gradient);
      ctx.setLineWidth(lineWidth);
      ctx.stroke();
      uni.createAnimation({
        duration: 1500,
        timingFunction: 'ease',
        delay: 0,
        transformOrigin: '50% 50%',
        success: (res) => {
          res.rotate(360).step();
          this.animationData = res.export();
        },
      });
    },
    data() {
      return {
        animationData: {},
      };
    },
  };
</script>

<style>
  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #fff;
  }

  .logo {
    width: uni.upx2px(200);
    height: uni.upx2px(200);
    margin-bottom: uni.upx2px(60);
  }

  .animation {
    width: uni.upx2px(750);
    height: uni.upx2px(750);
  }

  .canvas {
    width: 100%;
    height: 100%;
  }
</style>