Uniapp 实现 canvas 动画的方法

在 Uniapp 开发中，利用 canvas 实现动画效果能为应用增添不少趣味性与交互性。下面将详细介绍其实现方法。

要在 Uniapp 项目中创建一个 canvas 元素。在页面的.vue 文件里，通过 <canvas> 标签定义画布，同时为其设置 id 和宽高属性，方便后续操作与样式调整。例如：

<canvas id="myCanvas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas>

在脚本部分，通过 uni.createCanvasContext 方法获取绘图上下文。

export default {
  data() {
    return {
      canvasWidth: 300,
      canvasHeight: 300
    }
  },
  onReady() {
    const ctx = uni.createCanvasContext('myCanvas')
  }
}

实现简单的动画，可利用 requestAnimationFrame 方法来控制动画的帧率与循环。以绘制一个不断移动的圆形为例，先定义圆形的初始位置、半径等参数。

data() {
  return {
    circleX: 50,
    circleY: 50,
    circleRadius: 20,
    speedX: 1,
    speedY: 1
  }
},

然后在 onReady 方法里开启动画循环。

onReady() {
  const ctx = uni.createCanvasContext('myCanvas')
  const drawCircle = () => {
    ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
    this.circleX += this.speedX
    this.circleY += this.speedY
    if (this.circleX + this.circleRadius >= this.canvasWidth || this.circleX - this.circleRadius <= 0) {
      this.speedX = -this.speedX
    }
    if (this.circleY + this.circleRadius >= this.canvasHeight || this.circleY - this.circleRadius <= 0) {
      this.speedY = -this.speedY
    }
    ctx.arc(this.circleX, this.circleY, this.circleRadius, 0, 2 * Math.PI)
    ctx.setFillStyle('red')
    ctx.fill()
    ctx.draw()
    requestAnimationFrame(drawCircle)
  }
  requestAnimationFrame(drawCircle)
}

若要实现更复杂的动画，比如逐帧动画，可将动画的每一帧图片提前准备好，存储在数组中。通过控制当前显示的帧索引，在 canvas 上绘制相应帧的图片。

利用 Uniapp 的 canvas 结合 JavaScript 的动画控制方法，能创造出丰富多样的动画效果，为用户带来独特的交互体验。无论是简单的图形运动，还是复杂的角色动画，都可以通过灵活运用这些技术来实现。