p5.js简易实现 apple watch 三色表盘

发布于 2020-9-4 18:05
浏览
0收藏

 

apple watch原图欣赏
p5.js简易实现 apple watch 三色表盘-开源基础软件社区

莫名其妙的好看有不!

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

图片预览一下:

p5.js简易实现 apple watch 三色表盘-开源基础软件社区

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

API查阅

CodePen预览

Demo预览

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

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

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

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

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



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

作者:RandomYang
来源:掘金

已于2020-9-4 18:05:00修改
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐