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.

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.

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

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

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

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.

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.

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.

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.

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

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.

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.

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

You can download complete QuartzCode project below.

Have any comments? please let me know below!