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 Animation

Loading to Complete Animation

Loading to Complete Animation

Loading to Fail 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,

loadOval1

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.

makeOpen1

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.

roundloadOvalRound

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.

loading timeline

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

loadOval transfom inspector2

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.

completePath2

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,

completePath3

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.

full1

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

loadToComplete1

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?

loadToComplete2

 

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.

fail

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

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?

loadToFail1

 

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

fullFinal

 

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

 

You can download QuartzCode and Xcode projects here,

7 Comments

  1. Nicolas on September 1, 2015 at 4:31 pm

    Hi ! I’m trying quartcode for the first time, and when I click on the “Delete subpath” button nothing happens .. Can you help me ? 🙂 Thanks !

    • Wan Lutfi on September 2, 2015 at 12:47 am

      Hi, what QuartzCode version are you using, there is bug that prevent ‘Delete Subpath’ from working correctly in earlier version but in v1.37 it should have been fixed.

  2. 申旭明 on January 8, 2016 at 2:02 pm

    Hi!I just contact this software, want to know can not do a horse running effect, especially the changes of the leg muscles, no resource graph, to draw with a pencil. That is, the irregular side line changes, thanks a million!

    • Carlos Carvalho on July 5, 2016 at 12:43 pm

      You can create the graphics on Sketch, export as an SVG and open in Quartz. After that the animations should be trivial… 🙂

  3. Andre on February 21, 2016 at 12:38 am

    I’m having issues using code in Xcode 7. The video tutorial isn’t helping me figure this out.

    The video tutorial says the code to perform the animation is Println(“Animation done!”)

    In xCode 7, the print function is just print I believe, but I’m not sure why my animation isn’t pulling up when I test the build.

    Here’s what I’m using : Print(“Animation done!”)

    Can someone help?

    Thanks

    • Wan Lutfi on February 21, 2016 at 7:24 am

      Hi Andre, actually println() is log function for Swift 1. In Swift to it has been changed to print().
      You can refer to this stackoverflow question.
      http://stackoverflow.com/questions/31217024/how-do-you-do-println-in-swift-2

      • Rob on October 22, 2016 at 7:22 am

        You need to update your tutorials. I wasted time with the println() error also you use cmd left mouse when it should be ctrl left mouse. Video tutorials with no sound are not good so try and get someone to help with that.

        More current Xcode integration tutorials would be good.

Leave a Comment