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!