Content
[TOC]

apple watch原图欣赏

apple原图

莫名其妙的好看有不!

于是我就想着用js写写看,能否简单的实现这个效果,于是就真的实现了一个很简单(简陋)的效果。

图片预览一下:

demo截图

p5.js

想要实现上述的简单效果用原生的canvas绘图API也不难实现,但是从实现这个效果来讲,我选用了 p5.js 这个js动画库。可以帮助你以优雅的方式实现这个效果。将注意力集中在实现效果上,而不是各种偏底层API的调用问题上。

API查阅

CodePen预览

Demo预览

Demo很多瑕疵,欢迎fork修改、自由创作、使优秀…

代码

代码部分其实很简单,根据注释稍微看看就能明白,大致分为:

  1. 得到当前时间
  • 小时(注意24进制和表盘的12进制)
  • 分钟
  • 秒(我这里其实是获取的毫秒,为了平滑秒针的运动)
  1. 将时间映射(map)到角度
  2. 调用p5.js的绘图API,传入角度等参数
  3. p5.js利用canvas绘制动画

注意

在p5.js的绘图函数arc()中,有个bug

1
arc(x, y, xd, yd, start_angle, end_angle);

在这个函数中当start_angle == end_angle时会有一个bug,特定的我测试当start_angle == end_angle == -PI/2时会绘制一个半圆,但是显然这是不对的,当start_angle == end_angle时,我们应该什么都不绘制。

后来我到官方github仓库上,发现一个issue提到的就是关于这个问题。

最后我修改了映射区间避免了start_angle == end_angle == 0,从0 -> 360 改为 1 -> 360

1
2
3
secondsAngle = map(secondes, 0, 60 * 1000, 1, 360);
minitesAngle = map(minites, 0, 60, 1, 360);
hoursAngle = map(hours % 12, 0, 12, 1, 360);

最后等我写完了我才发现,这东西看不了时间,一看官方也不是用来看时间用的—.—