Apple Watch Animation Explained and Recreated using QuartzCode

After watching Apple Watch transition animation, I immediately think how to reproduce this animation in QuartzCode.

And this is my answer, see my version below.

I'm not gonna explain full tutorial, however I'll explain some important techniques to create this animation. However you can download full project below to try it yourself using QuartzCode.

I'm going to answer few questions regarding this animation,

1. How layers are drawn
2. How to create Xor animation
3. How to create digit animation
4. How to make small clock animate seamlessly to minor ticks

1. How layers are drawn

Layers and its usage in this animation

• CALayer : As container for other layer and for mask animation.
• CAShapeLayer : Used to draw hour, minute and second hands using vector tool in QuartzCode
• CATextLayer : Digits 1-12 created one by one then arranged on an oval path using Layers > Arrange Layers On Path...
• CAReplicatorLayer : Used to create major, medium and minor ticks.

It is easy to create the clock ticks using CAReplicatorLayer. First add a line into a replicator and set replicator frame appropriately. Then set instance count 300 and instance transform z rotation to 1.2 to create complete circle. This will create the clock's minor ticks.

One challenge is to arrange all layers correctly at its place. As of QuartzCode 1.03, you can now align layers at middle of its anchor point using ALT + align middle located at small toolbar.

2. How to create Xor animation

Using Core Animation, I don't find a way to create actual Xor animation. However there is a way to fake it. For this animation, two clocks are used, one is small clock with white background, the other one is big clock with digits and ticks. Both clocks have their own hours, minute and seconds hand.

The trick to create Xor animation is by using masking layer animation. First, a CALayer is created and masked with oval shape. Inside the CALayer it should have big clock hands. Initially, the CALayer should be scaled to 0 using transform property. The CALayer is then scaled to 1 using transform animation, that should reveal another clock hands inside.

Mask transform animation

How to create digit animation

Digits animation is transform animation with delay. It can easily created using effect layer in QuartzCode. This digit animation use 0.193 animation duration with 0.02 instance delay.

How to make small clock to animate seamlessly to minor ticks

This is tricky part. At first I thought it is possible by animating the tick's scale y transform itself. This technique works, but it is extremely slow. It seems taken a toll to animate 300 minor ticks layers at once.

Transform scale y animation of 300 instance count. ~15fps

Workaround for this problem is by animating scale of a CALayer on top the minor tick layers. I intentionally put a blue color to show the layer on top of the minor tick layers.

A layer scaled on top minor ticks. >50 fps

To make the transition between small white clock to minor ticks seamlessly, opacity animation is added to the white clock. Notice how white background changed seamlessly to minor ticks in final animation.

Conclusion

I'm going to highlight why using QuartzCode make this animation possible or easier to create,

1. Set anchor point of clock hands and align it at middle anchor correctly.
2. Align digits on path. You can create algorithm to arrange at circle if you want to create this animation manually.
3. Use effect layer to delay animation of digits.
4. Compare advantages of using certain animation technique. I'm referring this to minor ticks animation.
5. Most importantly is animation tweaking. This animation contain nested layers and multiple animations which I think is very hard to create by coding and get it right at the same time.

QuartzCode fully generate drawing and animation codes. However if you want to use it as actual clock, you will still need to modify the generated codes. Although most of difficult part of creating the animation should have been solved. You can download QuartzCode project with UIView generated files below. You can try or purchase QuartzCode here.