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

DeCoder發表於2018-06-05
JSAPP

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

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);
複製程式碼
最後等我寫完了我才發現，這東西看不了時間，一看官方也不是用來看時間用的—.—

來源：https://juejin.im/post/5b1557a45188257d70691919

相關文章