p5.js簡易實現 apple watch 三色錶盤

apple watch原圖欣賞

莫名其妙的好看有不！

因而我就想着用js寫寫看，可否簡單的實現這個效果，因而就真的實現了一個很簡單（簡陋）的效果。

圖片預覽一下：

p5.js

想要實現上述的簡單效果用原生的canvas繪圖API也不難實現，可是從實現這個效果來說，我選用了 p5.js 這個js動畫庫。能夠幫助你以優雅的方式實現這個效果。將注意力集中在實現效果上，而不是各類偏底層API的調用問題上。

API查閱

CodePen預覽

Demo預覽

Demo不少瑕疵，歡迎fork修改、自由創做、使優秀...

代碼

代碼部分其實很簡單，根據註釋稍微看看就能明白，大體分爲：

1. 獲得當前時間

• 小時（注意24進制和錶盤的12進制）
• 分鐘
• 秒（我這裏實際上是獲取的毫秒，爲了平滑秒針的運動）

2. 將時間映射(map)到角度
3. 調用p5.js的繪圖API，傳入角度等參數
4. 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);
複製代碼

最後等我寫完了我才發現，這東西看不了時間，一看官方也不是用來看時間用的—.—