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.

iphone vote animate 3

 

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.

people2

 

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.

layer

beforeMask

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.

afterMask

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.

fill

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.

timeline

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

vote Anim

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:

timing

 

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

vote animate initial

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.

vote animate end

final State

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.

code1

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.

code222

iphone vote animate2

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.

4 Comments

  1. HowardTheDuck on September 1, 2015 at 11:40 pm

    Hi!
    Useful tutorial. I am trying a similar approach with an horizontal bar to fill in blu and in red at the end.

    What would be advisable to accomplish this? How can we make the filling become red once we reach 90% and stay red till 100%? I am arranging a “dynamic” bar showing distance from 0m to 100m, and I would like to color my bar in blu till 80m and then becoming red from 80 to 100. But if the user comes back the bar should change color again (so I was using the reverse option for the animation…).

    I was trying with two layers of different colors but….maybe you have some suggestion on how to develop this in Swift….

    Thank you!

  2. Daniel Xavier on July 29, 2016 at 11:08 pm

    I wish QuartzCode community was bigger, I’m really trying to use it, but app crashes a lot and there’s no feedback and nobody using it. Is there any other/better tool for it?

    • Al Umis on November 3, 2016 at 2:51 am

      Try the app they ripped off: PaintCode.

  3. Stig on January 6, 2017 at 5:46 am

    I’m having some issues when i connect the animation to run when pressing a button. I get a unrecognized selector sent to instance error when i try to run the animation.

    Can you give some guidance please?
    I compiled to swift 3 code and it successfully ran but it fails when trying to run the function.

    Thanks!

Leave a Comment





Documentation