Tutorial : Percentage vote animation for iOS using QuartzCode

In this post I'm going to explain how to create something like percentage vote animation using QuartzCode.

I'm going to show the final result first.

In this tutorial, I will also show how to edit the generated code in Xcode so that the percentage animation can be changed.

1. First we need to create people icon. Create two oval on canvas, then edit control point as below. From Toolbar, use Boolean > Append Paths to combine those two layer into one layer. Rename the layer to peopleMask. This layer will act as mask to the main layer later.

2. Create a CALayer by using Insert > CALayer. Resize it to {90, 220}, set its background color to gray and rename it to main.

3. To mask main layer using peopleMask, we need to make peopleMask as main layer's sublayer first. Drag peopleMask into main using Layer List so it should look like this.

4. To mask main layer, select peopleMask, right mouse click and choose 'Use as Mask to Superlayer'. So this is how main layer look like after masked. 'M' symbol at Layer List indicate that peopleMask successfully become mask to its superlayer.

5. For fill animation, create a new CALayer and make it as sublayer to main layer and set its size equal to main layer. Rename the layer to fill and set its background to blue.

6. Because fill layer will increase from zero height to full height from bottom, set its anchor point to {0.5, 1} using Layer Inspector and set its height to 1.

7. Now add bounds animation to fill layer using Timeline Panel. Then set the bounds toValue to its full height which is 218 using Keyframe Inspector. Also set the timing to Ease In Ease Out.

8. Play the animation, you can see that the height is animated from bottom to top and the mask also works perfectly!

9. So, how to make the animation stop at certain percentage? To achieve that we need to edit QuartzCode generated code in Xcode.

10. However before that, create a text layer and put it below main layer and rename it to percent. Percent layer shows the percentage of the voters. Change text string to '100%'.

11. Add transform animation to percent layer and set begin time when bounds animation from fill layer about to end. Using Keyframe Inspector, set fromValue as enabled and change scale x and scale y to 0. Change timing function to Ease In, then click button to its right and change timing function as below:

12. Play the animation, you can see that something is wrong here.

13. The percent layer should be initially invisible. To hide percent layer, at Layer List tick eye button at percent layer. This step should make sure the percent layer is initally hidden.

14. To make it unhidden again, add hidden animation and set its begin time equal to the transform animation. For the hidden animation, both fromValue and toValue should be be set to NO to indicate that the layer should be unhidden. Image below show final animation and setup in QuartzCode.

15. To make it usable for different percentage, we need to edit the generated code in Xcode. I will not discuss detail on how to setup Xcode project but will jump on how to edit the generated code.

16. This is how initial generated code looks like, we need to edit startAllAnimations: and fillAnimation so that we can use the code to animate to any percentage.

17. Image below show result of edited code. Using this edited code we can call startAllAnimationsWithFraction: and pass fraction value between 0-1 for it to animate to that value percentage. For example if we put 0.35 fraction, the fill layer will animate from 0 to 35% from its height, set the percent layer color to red and its string to the percentage value. You can try it yourself using Xcode project provided below.

I hope this tutorial has been useful. Please let me know any feedback in the comment below.

You can download complete QuartzCode and Xcode project below.