// 抽象激活方法 functon rect(point, canvas){ let {x, y, dx, dy} = getPosition(point) ctx.shadowOffsetX = 2 ctx.shadowOffsetY = -2 ... ... ctx.clearRect(0, 0, canvas.width, canvas.height) // 擦除整个水果盘 ctx.strokeRect(x, y, dx, dy) // 绘制激活区域 } function run(){ setTimeout(()=>{ if (ret.length) { let point = ret.shift() rect(point, canvas) run() } }, 100) }
执行run方法后可以看到水果盘的激活状态一步一步的往前走(100毫秒)，拖拉机终于可以启动了
配上运动算法
经过上面的试验我们终于可以看到基本的运动效果了，接下来配上运动算法和计时器方法
// Quart 四次方的缓动 const easeInOutQuart = function (t, b, c, d) { if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b; return -c / 2 * ((t -= 2) * t * t * t - 2) + b; } let start = 0 // 开始时间 let begin = 0 // 开始奖品位置 let end = 23 // 终点位置，这里跑一圈 let during = 5000 // 运动总时间 // 1000/60 ≈ 17， // 17毫秒即表示屏幕60帧刷新率每秒 ≈ requestAnimationFrame计数频率(一般情况) const steper = () => { // left为位移距离 // 老虎机的运动位移是节点位移，不是精确位移 // 所以这里用parseInt处理，只取整数部分 // 数据变化为 0,1,2,3,4,5...23 // 间隔时间/距离由easeInOutQuart算法计算 var left = easeInOutQuart(start, begin, end, during); let idx = parseInt(left) start = start + 17; if (idx <= end) { let point = this.ret[idx] // 取节点位置信息 this.rect(point) // 绘制 } // 时间递增 if (start <= during) { this.ctx.requestAnimationFrame(steper); // 计时器 } else { // 动画结束，这里可以插入回调... // callback()... } }; steper(); // 启动
总结
以上所述是小编给大家介绍的微信小程序canvas开发水果老虎机的思路详解，希望对大家有所帮助！
您可能感兴趣的文章: