我要评论不知道老网民们还记不记得这个魔性的时钟插件：
作为网上冲浪十数载的网虫，不久前看到这个图瞬间破防，直接梦回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>
到此这篇关于canvas版人体时钟的实现示例的文章就介绍到这了,更多相关canvas人体时钟内容请搜索代码网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持代码网！
发表评论