省流速览

给大家介绍一个自己摸鱼时间摸出来的一个canvas 2.5D风格方块交互动画的实现方法。

实现出来长这个样子：

完整源代码：

实现

虽然画的是3d效果，但还是通过渲染绘制二维多边形去实现的。基本的核心思想是通过一个二维数组去维护小方块矩阵的位置、运动状态。而每个小方块都会根据自身的当前状态，用三个平行四边形拼接出立方体的效果，这样是不是听起来就很容易了。

定义一些常量和存储器

一些常量参数在代码中手动修改后运行，运行起来的动画效果也完全不一样哦。

 // 常数设置
const RADIX3 = 1.73205 // 更号3常数
const UNITLONG = 20 // 单个方块大小
const TOPCOLOR1 = '#96eaea' // 方块配色
const TOPCOLOR2 = '#c9f1f1'
const LEFTCOLOR1 = '#16c2cd'
const LEFTCOLOR2 = '#1c878e'
const RIGHTCOLOR1 = '#2edad4'
const RIGHTCOLOR2 = '#08beb8'
const ROW = 15 // 渲染行数
const COL = 20 // 渲染列数
const GRAVITY = -10 // 重力加速度
const POWER = 15 // 升力加速度

var height = [] // 高度储存器
var speed = [] // 运动速度储存器
var touch = { x: 0, y: 0, work: false } // 被触发位置储存器

初始化运动状态储存器

把方块矩阵按照行列数初始化出两个二维数组，分别记录运动高度和垂直运动速度。

function initParam() {
    for (let y = 0; y < ROW; y++) {
        height[y] = []
        speed[y] = []
        for (let x = 0; x < COL; x++) {
            height[y][x] = 0
            speed[y][x] = 0
        }
    }
}

封装绘制函数

分别封装绘制顶部，左侧，右侧三个平行四边形的函数，再合起来调用一遍，就得到了绘制单个立方体的方法。

function drawBox(x, y, h) { // 画整个方体
    drawTop(x, y, h)
    drawLeft(x, y, h)
    drawRight(x, y, h)
}
function drawTop(x, y, h) { // 画方体顶部
    ctx.beginPath()
    let grd = ctx.createLinearGradient(x, y - h - UNITLONG, x, y - h + UNITLONG);
    grd.addColorStop(0, TOPCOLOR1)
    grd.addColorStop(1, TOPCOLOR2)
    ctx.fillStyle = grd
    ctx.strokeStyle = grd
    ctx.moveTo(x, y - h)
    ctx.lineTo(x + RADIX3 * UNITLONG, y - UNITLONG - h)
    ctx.lineTo(x + 2 * RADIX3 * UNITLONG, y - h)
    ctx.lineTo(x + RADIX3 * UNITLONG, y + UNITLONG - h)
    ctx.stroke()
    ctx.fill()
    ctx.closePath()
}

function drawLeft(x, y, h) { // 画方体左侧
    ctx.beginPath()
    let grd = ctx.createLinearGradient(x, y, x - UNITLONG, y + 2 * UNITLONG);
    grd.addColorStop(0, LEFTCOLOR1)
    grd.addColorStop(1, LEFTCOLOR2)
    ctx.fillStyle = grd
    ctx.strokeStyle = grd
    ctx.moveTo(x, y - h)
    ctx.lineTo(x, y + UNITLONG * 2)
    ctx.lineTo(x + RADIX3 * UNITLONG, y + UNITLONG * 3)
    ctx.lineTo(x + RADIX3 * UNITLONG, y + UNITLONG - h)
    ctx.stroke()
    ctx.fill()
    ctx.closePath()
}

function drawRight(x, y, h) { // 画方体右侧
    ctx.beginPath()
    let grd = ctx.createLinearGradient(x + RADIX3 * UNITLONG, y + UNITLONG, x + RADIX3 * UNITLONG + UNITLONG, y
    + UNITLONG * 3);
    grd.addColorStop(0, RIGHTCOLOR1)
    grd.addColorStop(1, RIGHTCOLOR2)
    ctx.fillStyle = grd
    ctx.strokeStyle = grd
    ctx.moveTo(x + RADIX3 * UNITLONG, y + UNITLONG - h)
    ctx.lineTo(x + RADIX3 * UNITLONG, y + UNITLONG * 3)
    ctx.lineTo(x + RADIX3 * UNITLONG * 2, y + UNITLONG * 2)
    ctx.lineTo(x + RADIX3 * UNITLONG * 2, y - h)
    ctx.stroke()
    ctx.fill()
    ctx.closePath()
}

实时运算与渲染

这一模块由3个函数构成：监听onmousemove事件：鼠标移动对方块产生向上的加速度，把运动状态写入到速度存储器中。计算瞬时状态：从存储器读取当前位置和速度，计算下一帧的位置和速度。 draw方法：计算完成下一帧的位置信息后，调用drawBox绘制下一帧的画面。

function draw() { // 渲染一帧画面
    calStatus() // 运算实时状态
    for(let y = 0; y < ROW; y++){
        for (let x = 0; x < COL; x++) {
            if (y/2 === Math.floor(y / 2)){
                drawBox(x * UNITLONG * RADIX3 * 2, y * UNITLONG * 3, height[y][x])
            } else {
                drawBox(x * UNITLONG * RADIX3 * 2 - UNITLONG * RADIX3, y * UNITLONG * 3, height[y][x])
            }
        }
    }
}

function calStatus() { // 计算瞬时状态
    for (let y = 0; y < ROW; y++) {
        for (let x = 0; x < COL; x++) {
            if (x === touch.x && y === touch.y && touch.work) {
                speed[y][x] += POWER
                touch.work = false
            } else {
                speed[y][x] = height[y][x] === 0 ? 0 : speed[y][x] + GRAVITY
            }
            height[y][x] = height[y][x] + speed[y][x] < 0 ? 0 : height[y][x] + speed[y][x]
        }
    }            
}


myCanvas.onmousemove = e => { // 监听鼠标在画布上移动
   let pt = getPointOnCanvas(myCanvas, e.clientX, e.clientY)
   touch.work = true
   touch.y = Math.floor(pt.y / (3 * UNITLONG))
   if (pt.y/2 === Math.floor(pt.y / 2)) {
       touch.x = Math.floor(pt.x / (2 * RADIX3 * UNITLONG))
   } else {
       touch.x = Math.floor((pt.x + UNITLONG * RADIX3) / (2 * RADIX3 * UNITLONG))
   }
}

开始动起来！

调用初始化！用计数器循环调用draw方法绘制画面，成功啦！

initParam()
var itv = setInterval(() => draw(), 50) // 计时器 0.05秒渲染一次 20帧

结语

前端工作不那么饱和的时候，随意地摸点奇怪的动画效果也是挺有趣的。

有时候一开始也并不知道自己要做成什么效果，一步一步慢慢完善出来，最后才发现，摸掉的时间已经太久啦。

摸鱼时间！canvas 2.5d风格交互动画