Tutorial : Water Fill Animation using QuartzCode

In this post, I'm going to explain how to create water fill animation using QuartzCode.

This will be final result and the animation is fully vector which means no image will be used.

water fill animation

 

So, let us get started.

1. Create a rectangle to act as glass for the water.

 

2. Use Insert > CALayer to add CALayer to the canvas. The CALayer act as water filling the glass so set the CALayer background color to blue using layer Inspector.

 

3. Make the size for both the rectangle and CALayer to {150, 180}.

 

4. Rename the CALayer to water and set the height of the CALayer to 1. This indicate that the glass is initially empty.

 

5. Set the water anchor point to {0.5, 1}. This is to ensure the height animation will animate up because the anchor point is at the bottom.

calayer 1

 

6. Then at Timeline Panel, add bounds timeline to the water layer.

bounds timeline2

 

7. At Keyframe Inspector panel, at toValue keyframe set the height to 160 as maximum water fill.

animation keyframe inspector

 

8. So here is our first result for the animation.

water fill animation early

 

9. Ok, seems good. If you wonder why we dont use normal rectangle which use CAShapelayer, this is because in QuartzCode layers that support bounds animation are only CALayer and UIView.

 

10. To create the water's noise, we use few animations combination.

 

11. First create a path similar to this path using vector tool, this act as first state of our water's noise. Rename the path to noise.

path

 

12. Set the noise's fill to blue color, similar to the water color and set its line width to 0.

 

13. Move the noise to bottom of the glass and make the noise as sublayer to the water, so the layers order should look like this.

water initial state2

 

14. We need to make the noise as sublayer so that the noise will follow its parent animation, which means that it will go up when the water height is increasing.

 

15. To create different noise, copy noise layer and paste it two times at the canvas. Using vertex mode, Change the noise's path to something similar like these. It is important to copy original noise layer because the paths need to have same control point count for it to animate correctly.

paths

 

16. To animate the water's noise, we need to animate the noise using path animation. First, add path timeline using Timeline Panel. Add a keyframe at middle of the path's timeline which means the path animation will have 3 keyframes or 3 different state. Then at Path section in Keyframe Inspector, change the path to noise2 and noise3 respectively for keyframe 2 and keyframe 3.

noise timeline 3

 

17. Because we are not using noise2 and noise3 layer, make it hidden using Layer List

layer list hidden

 

18. Play the animation. Now you'll see the noise animating! Now for the noise path's timeline, set Auto Reverse to Yes and Repeat Count to 3. This will make the animation repeat and seems more natural.

water fill animation medium

 

19. To make the animation better, we are going to use transform and position animation and apply them to noise layer to make the shaking water seems more real.

 

20. Add transform timeline to the noise layer and make it to have 3 keyframe with equal time. Change the timeline keyframe value as these and make Auto Reverse to Yes,

Keyframe 1: Leave as it is

Keyframe 2: Translation {2, 12, 0}, Rotation {0, 0, -9}

Keyframe 3: Translation {-3, 14, 0}, Rotation {0, 0, 7}

Feel free to try other value if it is better.

 

21. Add position timeline to the noise layer. At toValue, move it down so that the water level is below the glass and below the water layer. This is how your final Timeline Panel should look like.

final timeline

 

22. So this is how final animation will look like,

water fill animation

 

You can download complete QuartzCode project below.

Have any comments? please let me know below!

4 Comments

  1. Artem on July 24, 2015 at 7:52 am

    Will be great if you show here some piece of code that make program.

    • BlackJack on May 9, 2016 at 3:44 pm

      me too. Will be great if you show here some piece of code that make program.

  2. Tiffany on July 14, 2016 at 3:05 pm

    The animation in this file you provided doesn’t look the same!
    how do you adjust those joint ?
    Every time I do it the app crashed. Can you make a video to record it?
    Thanks.

    • Wan Lutfi on July 15, 2016 at 4:26 pm

      Sorry about that Tiffany, the project file has been fixed. I’m not sure what do you mean about joint though?

Leave a Comment





Documentation