Animated Clock
Simple animation
Let's create a simple animated clock. We'll update the clock's data and the UI will automatically recompose.
Drawing the clock hands in the circle may seem like it'll take some trigonometry, but not if we're clever! If we rotate the Canvas, we can always draw the tick marks in a straight line vertically along x = width/2 from y = 0 to whatever depth we want. For the clock hands, we can draw vertically along x=width/2, from the center of the circle to the length we want for the hands.
Think of a piece of paper one which you're drawing. Draw a line, rotate the paper. Repeat!
I'm including the video from the Summer 2026 virtual-live class session. The video covers the same content as the text for both the gauge (previous section) and clock (this section) examples.
Total video time for this module: 53:17
Note
You can change the quality and playback speed by clicking the icon when the video is playing.
If you would like to search the captions for this video, click Watch on YouTube, press "..." and choose Show Transcript.