We’ve done a lot of things with the timeline and tracks in previous posts, but today we’re going to make an analog clock. The main idea is to use one as the dial, three rectangles as the hour hand, minute hand and second hand respectively, through their respective tracks to set the number of turns under the same time axis in a certain proportion.

1. Dial

The first step is to add the ellipse component. Here we need to set its origin horizontal and vertical coordinates to 50%, so that the XY coordinate of the ellipse component is its center coordinate. This XY coordinate will also be used when we set the pointer.

The pointer is shown in a rectangle. Since the pointer rotates around the center of the dial, we need to set the origin of the rectangle and the origin of the ellipse at the same position. So first set the rectangle’s origin abscissa to 50% and the origin ordinate to 100%, i.e. the middle of the rectangle’s lower boundary, and then set the rectangle’s coordinates to be the same as those of the elliptical component (50,50). The minute hand and second hand are the same, but the shape and color of the rectangle are changed.

Finally, the setting of the track, we managed the track of the hour hand, minute hand and second hand in the time axis. In fact, this step is more numerical calculation. With the clockwise turning 360° for a full circle as the benchmark, two key frames are added to the track of the clockwise. At 0s, the clockwise is in the initial state, and at 10s at the end of the time axis, the rotation Angle of the rectangle of the clockwise is 360°. In the same way, two key frames are added for the track of minute hand and second hand. It takes 12 hours for the hour hand to rotate 360°, so the minute hand rotates 4320° in total, and 12 hours is 720 minutes. When the minute hand rotates 360°, the second hand rotates 259200° in total.

Note our timeline of only 10 s, and in our demo turn clockwise 360 represents time is 12 hours or 43200 s, so may be considering the actual length to 43200 of the timeline, but you can see the playback speed becomes zero after fill in, this is because the play after the calculation speed is too small and was judged to be zero, If we want to make it look like a real clock at 1 to 1, we can increase the original length of the timeline by at least 0.5% (rounded).