canvas版人体时钟的实现示例

时间：2021-05-08

不知道老网民们还记不记得这个魔性的时钟插件：

作为网上冲浪十数载的网虫，不久前看到这个图瞬间破防，直接梦回10年前的QQ空间，感叹一下岁月蹉跎、时光荏苒、青春不在、不胜唏嘘。

十年后的今天，flash在各个浏览器都已经不再支持，已经是个不再那个只会用脚本打扮QQ空间的我，自然得用青春换来得技术还原一下自己的青春记忆。

首先感谢原作者提供的如此优秀好玩的插件： http://chabudai.org/blog/?p=59

这次为了图方便，就直接那pixi.js来上手做动画了，动画素材来源于油管视频，拿到PS逐帧抠图并导出，这个过程就不再详细介绍了。合成后的精灵图以及对应的json文件我会放在文章末尾。

核心的API是PIXI.AnimatedSprite。

代码也是很短，就直接放到下面了

<!doctype html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HoneHoneClock</title> <style> * { padding: 0; margin: 0; } html, body { width: 100%; height: 100%; } body { background-color: lightcyan; } canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; } </style></head><body><canvas class="canvas"></canvas><script src="pixi_5.3.4.min.js"></script><script src="Stats.min.js"></script><script> (async function () { const stats = new Stats() document.body.appendChild(stats.domElement) let pageWidth = 0 let pageHeight = 0 let clockHour1, clockHour2 let clockMin1, clockMin2 let clockSec1, clockSec2 const $canvas = document.querySelector('canvas') const renderer = new PIXI.Renderer({ view: $canvas, width: pageWidth, height: pageHeight, transparent: true, autoDensity: true, antialias: true }) // 人体时钟 class Clock extends PIXI.Container { constructor (name) { super() const textures = loader.resources[honeHoneClockJson].textures let frames = [] let aniData = [] if (this.frames) { frames = this.frames aniData = this.aniData } else { aniData = [ { prefix: '0', count: 6, frameFrom: -1, frameTo: -1, }, { prefix: '1', count: 9, frameFrom: -1, frameTo: -1, }, { prefix: '2', count: 7, frameFrom: -1, frameTo: -1, }, { prefix: '3', count: 6, frameFrom: -1, frameTo: -1, }, { prefix: '4', count: 9, frameFrom: -1, frameTo: -1, }, { prefix: '5', count: 14, frameFrom: -1, frameTo: -1, }, { prefix: '6', count: 7, frameFrom: -1, frameTo: -1, }, { prefix: '7', count: 10, frameFrom: -1, frameTo: -1, }, { prefix: '8', count: 7, frameFrom: -1, frameTo: -1, }, { prefix: '9', count: 9, frameFrom: -1, frameTo: -1, }, ] let k = 0 for (let i = 0; i < aniData.length; i++) { const data = aniData[i] data.frameFrom = k for (let j = 1; j <= data.count; j++) { k++ frames.push(textures[`${data.prefix}(${j}).png`]) } data.frameTo = k - 1 } this.frames = frames this.aniData = aniData } const ani = new PIXI.AnimatedSprite(frames) ani.anchor.set(0.5, 1) ani.animationSpeed = 0.4 this.stopAt = -1 ani.onFrameChange = () => { if (ani.currentFrame === this.stopAt) { ani.stop() } } this.addChild(ani) this.name = name this.ani = ani this.num = -1 } set number (number) { if (this.num !== number) { this.num = number this.stopAt = this.aniData[number].frameTo this.ani.gotoAndPlay(this.aniData[number].frameFrom) } } } const stage = new PIXI.Container() stage.name = 'stage' let clockWrap const ticker = new PIXI.Ticker() let now = new Date() let lastTime = now.getTime() const loop = function () { stats.begin() now = new Date() if (now.getTime() - lastTime >= 1000) { let hours = now.getHours() if (hours > 9) { clockHour1.number = Math.floor(hours / 10) clockHour2.number = hours % 10 } else { clockHour1.number = 0 clockHour2.number = hours } let minutes = now.getMinutes() if (minutes > 9) { clockMin1.number = Math.floor(minutes / 10) clockMin2.number = minutes % 10 } else { clockMin1.number = 0 clockMin2.number = minutes } let seconds = now.getSeconds() if (seconds > 9) { clockSec1.number = Math.floor(seconds / 10) clockSec2.number = seconds % 10 } else { clockSec1.number = 0 clockSec2.number = seconds } lastTime = now.getTime() } renderer.render(stage) stats.end() } ticker.add(loop) const honeHoneClockJson = 'HoneHoneClock.json' const loader = new PIXI.Loader() loader.add([honeHoneClockJson]) loader.onComplete.add(async (res) => { clockWrap = new PIXI.Container() clockWrap.position.set((pageWidth - 630) * 0.5, (pageHeight + 150) * 0.5) clockHour1 = new Clock('hour') clockHour2 = new Clock('hour') clockMin1 = new Clock('min') clockMin2 = new Clock('min') clockSec1 = new Clock('sec') clockSec2 = new Clock('sec') clockHour1.position.set(0, 0) clockHour2.position.set(100, 0) clockMin1.position.set(250, 0) clockMin2.position.set(350, 0) clockSec1.position.set(500, 0) clockSec2.position.set(600, 0) clockWrap.addChild(clockHour1) clockWrap.addChild(clockHour2) clockWrap.addChild(clockMin1) clockWrap.addChild(clockMin2) clockWrap.addChild(clockSec1) clockWrap.addChild(clockSec2) stage.addChild(clockWrap) // 开始动画循环 ticker.start() }) loader.load() const onResize = (e) => { pageWidth = document.body.clientWidth pageHeight = document.body.clientHeight if (clockWrap) { clockWrap.position.set((pageWidth - 630) * 0.5, (pageHeight + 150) * 0.5) } renderer.resize(pageWidth, pageHeight) } onResize() window.onresize = onResize })()</script></body></html>

完整代码戳这里

在线演示1 、 在线演示2

到此这篇关于canvas版人体时钟的实现示例的文章就介绍到这了,更多相关canvas人体时钟内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章