<template>
  <div class="canvas-wrap">
    <canvas id="carCanvas" width="645" height="686"></canvas>
  </div>
</template>

<script>
import Easing from '@config/Easing.js'
export default {
  data () {
    return {
      keyPoints: [{x: 112, y: 183}, {x: 112, y: 425}, {x: 43, y: 427}, {x: 112, y: 425}]
    }
  },
  mounted () {
    setTimeout(() => {
      this.handleCanvasCar()
    }, 3000)
  },
  methods: {
    handleCanvasCar () {
      const canvas = document.querySelector('#carCanvas')
      const ctx = canvas.getContext('2d')
      let img = new Image()
      img.src = require('../images/che.png')
      let nextX
      let nextY
      // 第一帧执行的时间
      let startTime
      // 期望动画持续的时间
      const duration = 1000
      // 动画被切分成若干段,每一段所占总进度的比例
      const partProportion = 1 / (this.keyPoints.length - 1)
      // 缓存绘制第n段线段的n值,为了在进行下一段绘制前把这一段线段的末尾补齐
      // 动画帧绘制方法currentTime是requestAnimation执行回调方法step时会传入的一个执行时的时间(由performance.now()获得).
      const step = (currentTime) => {
        // 第一帧绘制时记录下开始的时间
        !startTime && (startTime = currentTime)
        // 已经过去的时间(ms)
        const timeElapsed = currentTime - startTime
        // 动画执行的进度 {0,1}
        let progress = Math.min(timeElapsed / duration, 1)
        // 加入二次方缓动函数
        progress = Easing.Quadratic.In(progress)
        // 描述当前所绘制的是第几段线段
        const lineIndex = Math.min(Math.floor(progress / partProportion) + 1, this.keyPoints.length - 1)
        //  当前线段的进度 {0,1}
        const partProgress = (progress - (lineIndex - 1) * partProportion) / partProportion
        // 绘制方法
        const draw = () => {
          ctx.beginPath()
          ctx.clearRect(0, 0, 400, 500)
          nextX = ~~(this.keyPoints[lineIndex - 1].x + ((this.keyPoints[lineIndex]).x - this.keyPoints[lineIndex - 1].x) * partProgress)
          nextY = ~~(this.keyPoints[lineIndex - 1].y + ((this.keyPoints[lineIndex]).y - this.keyPoints[lineIndex - 1].y) * partProgress)
          ctx.drawImage(img, nextX - 15, nextY - 50, 30, 50)
        }
        draw()
        if (progress < 1) {
          requestAnimationFrame(step)
        } else {
          console.log('动画执行完毕')
        }
      }
      requestAnimationFrame(step)
    }
  }
}
</script>

<style lang="stylus" scoped>
.canvas-wrap
  position relative
  width 100%
  height 100%
  background center / 100% auto url('~@/images/area_bg.png') no-repeat
#lineCanvas
  position absolute
  left 0
  top 0
  z-index 10
#carCanvas
  position absolute
  left 0
  top 0
  z-index 11
</style>
