How to Create Hamburger Animation using QuartzCode (Beta)

In this post I'm gonna show video tutorial on how to create hamburger animation using QuartzCode without writing any code.

Without further ado, here is the video:

 

The steps are summarized as follow:

1. Create circle, circle extension(middle path), top and bottom path.

2. Edit middle path using vertex mode so it appear as below

middlePath

 

3. 2. Set color and lineWidth for all paths, set line end for all paths to round then make middle path stroke end property to 0.

4. For circle path, add stroke end animation  with fromValue = 1 and toValue = -0.1. We need to make toValue -0.1 because for some reason there is leftover path when line end round type is used.

5. For middle path, add stroke end and stroke start animation with pattern shown below. For stroke end, use fromValue = 0 and toValue = 1 and for stroke start, use fromValue = 0 and toValue = 0.67. Stroke start toValue need to be adjusted later to make sure it is aligned correctly with top and bottom path.

middlePathStrokeTimeline

 

6. Align circle and middle path using alignment tool at top right of canvas.

7. For both top and bottom path, rotate and align so that it creates 'X' symbol.

xSymbol

8. Add transform animation for both top and bottom path. Change zRotation of toValue to 0, Additionally set yTranslation of top path to -24 and yTranslation of bottom path to 24.

Note that the translation respect iOS coordinate system. If OSX is chosen, the the coordinate system is inverted.

9. Align the 'X' symbol to circle.

hamburger1

10. Now you have a working hamburger animation. However you need to align the hamburger shape correctly. This might need a few try because middlePath stroke start toValue need to be adjusted to be aligned to top and bottom paths.

hamburger2

 

11. To add spring effect to top and bottom paths, change timing function for transform property.

timingFunction

Now you have a nice and smooth hamburger animation!

Download example project here:

2 Comments

  1. JP on August 5, 2014 at 12:49 am

    Wow ios and macosx code are generated on the fly?? Sign me up!

    This is not a paid advertisment lol :D. I’m geniunely excited to try this :)

  2. piyush on April 23, 2015 at 2:23 am

    wow did not know that Quartz can generate code….

    This saves sooooo much time.

    Thanks

Leave a Comment





Documentation