Multiple Animations Tutorial : Loading, complete and fail animations using QuartzCode

Starting from version 1.3, QuartzCode now supports multiple animations. In this post I'm gonna show how to create loading, complete and fail animation as multiple animations in QuartzCode.

These are how final animations we will create,

Loading Animation

Loading to Complete Animation

Loading to Fail Animation

Loading Animation

1. For first step, change canvas size to 30 x 30. This should be suitable for the loading animation.

2. To create a loading animation, create an oval, then rename it to loadOval.

3. We'll set the loadOval properties which can be changed using Layer Inspector as follow

• Size : 22 x 22
• Line width : 3
• Fill Color : Clear color
• Stroke Color : Yellow

4. So this is initial loadOval,

5. Now to make the oval open, double click at loadOval to change to 'Vertex Mode'. You can also click loadOval then click at 'Vertex Mode' at toolbar.

6. Click at loadOval stroke to create a new control point, then right mouse click between last control point and 'Delete Subpath' to make loadOval open.

7. To make end of loadOval round, go to Layer Inspector and set Line End and Line Join both to round as shown in the image below.

8. Now we will add a loading animation to loadOval, first add a animation using 'Animation List' and rename it to 'loading'. Then add a Transform Timeline to loadOval in 'loading' animation.

9. While Transform Timeline still selected, in Keyframe Inspector change the following

• Timing : Ease In Ease Out
• Start Time : 0
• Duration : 1
• Repeat : Infinity
• At keyframe 2, change rotation:z to -360

10. Try play it, you will have a nice loading animation.

Loading to Complete Animation

11. Now we will create 'Loading to Complete Animation'. First hide loadOval layer using Layer List or using shortcut SHIFT + CMD + H so we can focus on creating completePath.

12. Create complete path using vector tool, adjust the points as necessary and rename the path to completePath.

13. To use path animation, it is recommended to make both paths to have same point to make a path interpolate nicely to other path.

14. In this case, loadOval has 5 control points so we'll need to add 2 more control points to completePath as shown below,

15. Unhide loadOval and hide completePath because completePath will only be used for path animation.

16. Add a new animation and rename it to 'completeLoading'.

17. While 'completeLoading' animation selected, select loadOval and add a path timeline to it.

18. Select path timeline second keyframe, and change the path to completePath using Keyframe Inspector. This should be how the project looks like now.

19. Now add fillColor timeline, then select its second keyframe then set the color to green using Keyframe Inspector. Try playing the animation.

20. To add more touch to the animation, add a transform timeline, set timing function to Ease In and change the keyframes as follow,

• Keyframe 1 : No changes
• Keyframe 2:
  • Scale X : 0.2
  • Scale Y : 0.2
  • Rotation Z : -170
• Keyframe 3:
  • Rotation Z: No Changes

Note: For rotation animation, the rotation direction is undefined and usually based on least angle. Thats why rotation Z -170 is used in this case. Using QuartzCode you can easily check which direction it go.

21. This is final completeLoading animation, nice isn't it?

Loading to Fail Animation

22. Add a new animation and rename it to 'failLoading'.

23. Create a fail path as shown below, you can either group the fail component or append them. Rename it as failPath.

23. Because failPath initially should not be shown, hide it using Layer List or by using shortcut SHIFT + CMD + H.

23. We will use different technique to animate from loading to fail. You can  use path animation as in 'completeLoading' animation, but the result will not seem too good as shown below,

Loading to fail animation using path animation

24. While still selecting 'failLoading' animation, add a new transform to loadOval, and set its keyframes  as follow,

• Duration : 0.4
• Keyframe 1 : No changes
• Keyframe 2:
  • Scale X : 0.1
  • Scale Y : 0.1
  • Rotation Z : -170

25. Add also transform timeline to failPath layer, then set its keyframes as follow,

• Duration : 0.7
• Keyframe 1:
  • Scale X : 0
  • Scale Y : 0
• Keyframe 2:
  • Scale X : 0
  • Scale Y : 0
  • Time : 0.2
• Keyframe 3:
  • Scale X : 1
  • Scale Y : 1

26. Add hidden transform to failPath layer. Set both first and second keyframe bool value to NO. The duration does not matter because we have set both of the keyframe values to NO, which means the layer will be shown as soon the animation start. Try play the animation, seems better than using path animation, right?

27. This will be final look of our finished project.

I have created a Xcode project that shows use case for these animations,

You can download QuartzCode and Xcode projects here,