canvas版人体时钟的实现示例

朴灿烈づ我的快乐病毒、 2022-10-25 00:49 5阅读 0赞

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

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

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

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

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

核心的API是PIXI.AnimatedSprite。

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

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
34  
35  
36  
37  
38  
39  
40  
41  
42  
43  
44  
45  
46  
47  
48  
49  
50  
51  
52  
53  
54  
55  
56  
57  
58  
59  
60  
61  
62  
63  
64  
65  
66  
67  
68  
69  
70  
71  
72  
73  
74  
75  
76  
77  
78  
79  
80  
81  
82  
83  
84  
85  
86  
87  
88  
89  
90  
91  
92  
93  
94  
95  
96  
97  
98  
99  
100  
101  
102  
103  
104  
105  
106  
107  
108  
109  
110  
111  
112  
113  
114  
115  
116  
117  
118  
119  
120  
121  
122  
123  
124  
125  
126  
127  
128  
129  
130  
131  
132  
133  
134  
135  
136  
137  
138  
139  
140  
141  
142  
143  
144  
145  
146  
147  
148  
149  
150  
151  
152  
153  
154  
155  
156  
157  
158  
159  
160  
161  
162  
163  
164  
165  
166  
167  
168  
169  
170  
171  
172  
173  
174  
175  
176  
177  
178  
179  
180  
181  
182  
183  
184  
185  
186  
187  
188  
189  
190  
191  
192  
193  
194  
195  
196  
197  
198  
199  
200  
201  
202  
203  
204  
205  
206  
207  
208  
209  
210  
211  
212  
213  
214  
215  
216  
217  
218  
219  
220  
221  
222  
223  
224  
225  
226  
227  
228  
229  
230  
231  
232  
233  
234  
235  
236  
237  
238  
239  
240  
241  
242  
243  
244  
245  
246  
247  
248  
249  
250  
251  
252  
253  
254  
255  
256  
257  
258  
259  
260  
261  
262  
<!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>