87 lines
2.8 KiB
Vue
87 lines
2.8 KiB
Vue
<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>
|