canvas版人体时钟的实现示例


Posted in HTML / CSS onJanuary 29, 2021

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

canvas版人体时钟的实现示例

作为网上冲浪十数载的网虫,不久前看到这个图瞬间破防,直接梦回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人体时钟内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
CSS3中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
Jun 09 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 HTML / CSS
HTML基础详解(下)
Oct 16 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
Jan 27 #HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 #HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 #HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 #HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 #HTML / CSS
浅析HTML5页面元素及属性
Jan 20 #HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 #HTML / CSS
You might like
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
Python的gevent框架的入门教程
2015/04/29 Python
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
如何在sublime编辑器中安装python
2020/05/20 Python
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
小学运动会表扬稿
2014/01/19 职场文书
会计专业求职信范文
2015/03/19 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
早安问候语大全
2015/11/10 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
详解Laravel框架的依赖注入功能
2021/05/27 PHP
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
sql注入教程之类型以及提交注入
2021/08/02 MySQL