小程序实现抽奖动画

实现小程序抽奖动画，需要以下步骤：

步骤一：制作转盘样式

1. 在 WXML 文件中，使用 canvas 标签绘制一个圆形，作为抽奖转盘的样式：

<canvas canvas-id="canvas-turntable" style="width: 100%;height: 100%;"></canvas>

1. 在 JS 文件中，获取 canvas 元素以及上下文对象：

const ctx = wx.createCanvasContext('canvas-turntable');
const screenWidth = wx.getSystemInfoSync().screenWidth;
const RADIAN = Math.PI / 180;
const ANGLE = 360 / 8;
const DEGREE = Math.PI / 180;

1. 绘制圆形转盘，使用 arc 方法创建以圆心为原点的弧形：

drawBackground(){
  ctx.beginPath();
  ctx.arc(screenWidth / 2, screenWidth / 2, 155, 0, 2 * Math.PI);
  ctx.setLineWidth(2);
  ctx.setStrokeStyle('#f0de7f');
  ctx.stroke();
  ctx.closePath();
  ctx.beginPath();
  ctx.arc(screenWidth / 2, screenWidth / 2, 112, 0, 2 * Math.PI);
  ctx.setLineWidth(2);
  ...

1. 绘制转盘上的奖品信息，计算出每个奖项所在的角度，在 fillText 方法中绘制文字：

drawText(){
  const words = [
    {angle: 135, text: '优秀', fillStyle: '#fe0000'},
    {angle: 90, text: '一等奖', fillStyle: '#22fbfa'},
    ...
  ];
  ctx.setFontSize(22);
  ctx.setTextAlign("center");
  ctx.setStrokeStyle('#f0de7f');
  for (let i = 0, len = words.length; i < len; i++) {
    ctx.beginPath();
    ctx.setFillStyle(words[i].fillStyle);
    ctx.translate(screenWidth / 2, screenWidth / 2);
    ctx.rotate(words[i].angle * RADIAN);
    ctx.fillText(words[i].text, 0, -120, 20);
    ctx.closePath();
    ctx.rotate(-words[i].angle * RADIAN);
    ctx.translate(-screenWidth / 2, -screenWidth / 2);
  }
}

步骤二：制作抽奖动画

1. 绑定按钮点击事件，在事件处理函数中获取抽奖结果，计算出需要旋转的角度：

onTurnClick(){
  api.getLotteryResult().then(res =>{
    if(res.code == 0){
      this.setData({ prizeName: res.data.name });
      let prizeIndex = 0;
      for (let i = 0; i < words.length; i++) {
        if (words[i].text === res.data.name) {
          prizeIndex = i;
          break;
        }
      }
      this.setFreeze(prizeIndex);
      let computedAngle = prizeIndex * ANGLE - (ANGLE - 2) / 2;
      this.angleAnimation(computedAngle);
    }
  })
}

1. 创建旋转动画，使用 canvas 的 rotate 方法实现旋转：

angleAnimation(angle) {
  let animation = wx.createAnimation({
    timingFunction: 'ease-out',
    duration: this.data.duration
  });
  animation.rotate(angle + 360 * 20).step();
  this.setData({
    animationData: animation.export()
  });
}

1. 绑定动画结束事件，在事件处理函数中更新页面数据并展示结果：

onAnimationFinish(){
  let prizeIndex = this.getPrizeIndex(this.data.prizeName);
  let startAngle = prizeIndex * ANGLE - (ANGLE - 2) / 2;
  let endAngle = startAngle + ANGLE - 4;
  this.setFreeze(prizeIndex, true);
  this.drawPointer(startAngle, endAngle);
  setTimeout(() => {
    this.resetSetting();
    this.showResult(prizeIndex);
  }, 1000);
}

以上就是小程序实现抽奖动画的完整攻略。其中，创建旋转动画的示例代码是将 canvas 元素包装在一个 view 容器中的情况。如果不需要这样的包装，可以直接绑定 canvas 元素的动画结束事件，无需在额外的 view 容器中绑定。