The original apple Watch
Puzzling good-looking have not!
So I want to use JS to write to see if it can be simple to achieve this effect, so it really achieved a very simple (simple) effect.
Image preview:
p5.js
This simple effect is not difficult to achieve with the native Canvas drawing API, but for this effect, I used p5.js, the JS animation library. Can help you achieve this effect in an elegant way. Focus on implementation rather than various low-level API calls.
The API reference
CodePen preview
The Demo preview
Demo many flaws, welcome to fork modification, free creation, make good…
code
The code part is actually very simple, according to the comments a little look can understand, roughly divided into:
- Get the current time
- Hours (note base 24 and dial 12)
- minutes
- Seconds (I’m actually taking milliseconds here to smooth the movement of the second hand)
- Map time to angles
- Call the p5.js drawing API, passing in parameters such as angles
- P5.js uses Canvas to draw animation
Pay attention to
There is a bug in the p5.js drawing function Arc ()
arc(x, y, xd, yd, start_angle, end_angle);
Copy the codeThere is a bug in this function when start_angle == end_angle. In particular, I tested drawing a semicird when start_angle == end_angle == -pi /2, but obviously this is not correct. When start_angle == end_angle, we should draw nothing.
Later, I went to the official Github warehouse and found an issue about this issue.
Finally I changed the mapping interval to avoid start_angle == end_angle == 0, from 0 -> 360 to 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);
Copy the code