share555

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
AmazingCounters.com
查看: 132|回复: 0

canvas版人体时钟的实现示例

[复制链接]

398

主题

781

帖子

2193

积分

金牌会员

Rank: 6Rank: 6

积分
2193
发表于 2021-3-15 09:42:50 | 显示全部楼层 |阅读模式

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

脚本之家-share555canvas版人体时钟的实现示例(1)

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

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

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

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

核心的API是PIXI.AnimatedSprite。

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

  1. <!doctype html>
  2. <html lang=&quot;zh-CN&quot;>
  3. <head>
  4. <meta charset=&quot;UTF-8&quot;>
  5. <meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;>
  6. <title>HoneHoneClock</title>
  7. <style>
  8. * {
  9. padding: 0;
  10. margin: 0;
  11. }
  12. html, body {
  13. width: 100%;
  14. height: 100%;
  15. }
  16. body {
  17. background-color: lightcyan;
  18. }
  19. canvas {
  20. position: absolute;
  21. left: 0;
  22. top: 0;
  23. width: 100%;
  24. height: 100%;
  25. z-index: 1;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <canvas class=&quot;canvas&quot;></canvas>
  31. <script src=&quot;pixi_5.3.4.min.js&quot;></script>
  32. <script src=&quot;Stats.min.js&quot;></script>
  33. <script>
  34. (async function () {
  35. const stats = new Stats()
  36. document.body.appendChild(stats.domElement)
  37. let pageWidth = 0
  38. let pageHeight = 0
  39. let clockHour1, clockHour2
  40. let clockMin1, clockMin2
  41. let clockSec1, clockSec2
  42. const $canvas = document.querySelector('canvas')
  43. const renderer = new PIXI.Renderer({
  44. view: $canvas,
  45. width: pageWidth,
  46. height: pageHeight,
  47. transparent: true,
  48. autoDensity: true,
  49. antialias: true
  50. })
  51. // 人体时钟
  52. class Clock extends PIXI.Container {
  53. constructor (name) {
  54. super()
  55. const textures = loader.resources[honeHoneClockJson].textures
  56. let frames = []
  57. let aniData = []
  58. if (this.frames) {
  59. frames = this.frames
  60. aniData = this.aniData
  61. }
  62. else {
  63. aniData = [
  64. {
  65. prefix: '0',
  66. count: 6,
  67. frameFrom: -1,
  68. frameTo: -1,
  69. },
  70. {
  71. prefix: '1',
  72. count: 9,
  73. frameFrom: -1,
  74. frameTo: -1,
  75. },
  76. {
  77. prefix: '2',
  78. count: 7,
  79. frameFrom: -1,
  80. frameTo: -1,
  81. },
  82. {
  83. prefix: '3',
  84. count: 6,
  85. frameFrom: -1,
  86. frameTo: -1,
  87. },
  88. {
  89. prefix: '4',
  90. count: 9,
  91. frameFrom: -1,
  92. frameTo: -1,
  93. },
  94. {
  95. prefix: '5',
  96. count: 14,
  97. frameFrom: -1,
  98. frameTo: -1,
  99. },
  100. {
  101. prefix: '6',
  102. count: 7,
  103. frameFrom: -1,
  104. frameTo: -1,
  105. },
  106. {
  107. prefix: '7',
  108. count: 10,
  109. frameFrom: -1,
  110. frameTo: -1,
  111. },
  112. {
  113. prefix: '8',
  114. count: 7,
  115. frameFrom: -1,
  116. frameTo: -1,
  117. },
  118. {
  119. prefix: '9',
  120. count: 9,
  121. frameFrom: -1,
  122. frameTo: -1,
  123. },
  124. ]
  125. let k = 0
  126. for (let i = 0; i < aniData.length; i++) {
  127. const data = aniData[i]
  128. data.frameFrom = k
  129. for (let j = 1; j <= data.count; j++) {
  130. k++
  131. frames.push(textures[`${data.prefix}(${j}).png`])
  132. }
  133. data.frameTo = k - 1
  134. }
  135. this.frames = frames
  136. this.aniData = aniData
  137. }
  138. const ani = new PIXI.AnimatedSprite(frames)
  139. ani.anchor.set(0.5, 1)
  140. ani.animationSpeed = 0.4
  141. this.stopAt = -1
  142. ani.onFrameChange = () => {
  143. if (ani.currentFrame === this.stopAt) {
  144. ani.stop()
  145. }
  146. }
  147. this.addChild(ani)
  148. this.name = name
  149. this.ani = ani
  150. this.num = -1
  151. }
  152. set number (number) {
  153. if (this.num !== number) {
  154. this.num = number
  155. this.stopAt = this.aniData[number].frameTo
  156. this.ani.gotoAndPlay(this.aniData[number].frameFrom)
  157. }
  158. }
  159. }
  160. const stage = new PIXI.Container()
  161. stage.name = 'stage'
  162. let clockWrap
  163. const ticker = new PIXI.Ticker()
  164. let now = new Date()
  165. let lastTime = now.getTime()
  166. const loop = function () {
  167. stats.begin()
  168. now = new Date()
  169. if (now.getTime() - lastTime >= 1000) {
  170. let hours = now.getHours()
  171. if (hours > 9) {
  172. clockHour1.number = Math.floor(hours / 10)
  173. clockHour2.number = hours % 10
  174. }
  175. else {
  176. clockHour1.number = 0
  177. clockHour2.number = hours
  178. }
  179. let minutes = now.getMinutes()
  180. if (minutes > 9) {
  181. clockMin1.number = Math.floor(minutes / 10)
  182. clockMin2.number = minutes % 10
  183. }
  184. else {
  185. clockMin1.number = 0
  186. clockMin2.number = minutes
  187. }
  188. let seconds = now.getSeconds()
  189. if (seconds > 9) {
  190. clockSec1.number = Math.floor(seconds / 10)
  191. clockSec2.number = seconds % 10
  192. }
  193. else {
  194. clockSec1.number = 0
  195. clockSec2.number = seconds
  196. }
  197. lastTime = now.getTime()
  198. }
  199. renderer.render(stage)
  200. stats.end()
  201. }
  202. ticker.add(loop)
  203. const honeHoneClockJson = 'HoneHoneClock.json'
  204. const loader = new PIXI.Loader()
  205. loader.add([honeHoneClockJson])
  206. loader.onComplete.add(async (res) => {
  207. clockWrap = new PIXI.Container()
  208. clockWrap.position.set((pageWidth - 630) * 0.5, (pageHeight + 150) * 0.5)
  209. clockHour1 = new Clock('hour')
  210. clockHour2 = new Clock('hour')
  211. clockMin1 = new Clock('min')
  212. clockMin2 = new Clock('min')
  213. clockSec1 = new Clock('sec')
  214. clockSec2 = new Clock('sec')
  215. clockHour1.position.set(0, 0)
  216. clockHour2.position.set(100, 0)
  217. clockMin1.position.set(250, 0)
  218. clockMin2.position.set(350, 0)
  219. clockSec1.position.set(500, 0)
  220. clockSec2.position.set(600, 0)
  221. clockWrap.addChild(clockHour1)
  222. clockWrap.addChild(clockHour2)
  223. clockWrap.addChild(clockMin1)
  224. clockWrap.addChild(clockMin2)
  225. clockWrap.addChild(clockSec1)
  226. clockWrap.addChild(clockSec2)
  227. stage.addChild(clockWrap)
  228. // 开始动画循环
  229. ticker.start()
  230. })
  231. loader.load()
  232. const onResize = (e) => {
  233. pageWidth = document.body.clientWidth
  234. pageHeight = document.body.clientHeight
  235. if (clockWrap) {
  236. clockWrap.position.set((pageWidth - 630) * 0.5, (pageHeight + 150) * 0.5)
  237. }
  238. renderer.resize(pageWidth, pageHeight)
  239. }
  240. onResize()
  241. window.onresize = onResize
  242. })()
  243. </script>
  244. </body>
  245. </html>
复制代码

完整代码戳这里

在线演示1 、 在线演示2

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


来源:https://www.jb51.net/html5/762750.html
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|分享论坛

GMT+8, 2021-6-13 13:52 , Processed in 0.254393 second(s), 21 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表