Canvas实现小球自由下落的效果

效果图

requestAnimationFrame

利用这个API可以让动画在渲染时不那么卡顿，比setTimeOut以及setTimeInterval要好上不少。这里提供一个实现动画方法：参考链接

    animate (time /* s */, callback, easing = t => t) {
      let start = performance.now()

      const loop = () => {
        let passed = performance.now() - start // ms
        if (passed - time * 1000 >= 0) {
          cancelAnimationFrame(raf)
        } else {
          callback(easing(passed / 1000)) // 返回时间
          raf = requestAnimationFrame(loop)
        }
      }
      let raf = requestAnimationFrame(loop)
    }

canvas中实现自由下落

• 画出一个小圆，利用arc函数

drawCircle (x, y, radius) {
      this.context.clearRect(0, 0, this.width, this.height)
      this.context.beginPath()
      this.context.arc(x, y, radius, 0, 2 * Math.PI, false)
      this.context.stroke()
      this.context.closePath()
    }

为了实现动画效果，每一次画圆都需要清除所有区域（视情况而定）

• 利用自由落体公式

 // 实现小圆自由落体运动
    fall (height, a = 9.8) {
      let time = Math.sqrt(2 * height / a)
      this.animate(time, y => {
        this.drawCircle(this.x, this.radius + y, this.radius)
      }, passedTime => 1 / 2 * a * Math.pow(passedTime, 2))
    }

如果一个像素对应现实世界的一米的话，这个加速度取9.8会让动画变得比较慢，为了更直观我们在使用的时候将加速度调成98

  mounted () {
    this.init('#container')
    let height = this.height - this.radius * 2 // 小球从最高处落到地面的高度
    this.fall(height, 98) // 这里把加速度提升10倍获取直观的加速效果
  },