Photo by Chris Greenhow on Unsplash

Chain multiple animations to tell a story.

I want my work to have a purpose. It should have a story to tell when people look at it. So, whenever I learn something, I tend to create things with it that convey meaning. That’s what todays post is all about.

creating an animation that tells a story.

Pick-A-Boo

This is what we’ll be making today. A window opens and a stick figure says hi! Pretty cool, right?

Let’s break it down.

1. The window border(doesn’t have animation)
2. Two window shades open up with rotation animation
3. A stick figure pops up with position animation
4. Then its waves with a bubble head (rotation animation)

The window border:

This part is the simplest. First, create a CALayer, give it a frame, and some border and you’re all set.

The window border

In case you didn’t know, UIImage can be used as UIColor. Here’s the documentation. I used it to give the window border a texture.

Two window shades

This will create the left window shade. Let’s go through it line by line:

1. Create a CALayer.
2. Change the anchor point, since it needs to rotate from the top left. Read this to know more about anchorPoint.
3. Give the layer a frame. It will start after the border and end in the center of the window.
4. Set an image for the layer
5. Make the layer masks to its bounds so that the content image doesn’t go beyond its bounds
6. Add the layer to the parent view

The window left shade

Similarly, we can also create the right shade for the window.

This time the anchorPoint will be (1,0) since we need to rotate it from the right side and the frame will start from the center of the window to the border.

Right window shade added

Perfect! Our window design is complete. Now the real fun begins. Let’s start animating.

We will begin with the left shade. Here’s what we’re going to do:

1. Transform the left shade on the Y axis
2. Animate the transformation
3. Add spring effect to the animation

The important thing to note here, we want to apply perspective transformation to our shades. To learn more about perspective transformation, read my previous post here.

CASpringAnimation is used here to give the windows a bouncy feel. We can use the same animation but with -240 degree angle to complete the right window shade animation. So exciting, let’s see the result:

Animating the window shades

Great! Let’s move on to create the stick figure.

Stick Figure

Before creating the stick figure we need to create a mask layer. It will have the frame of the inside of the window, so that the figure animation doesnt’t overlap with the window border.

Parent Layer for the stick figure

Let’s create a person layer. We will later add head, body and hand to it. It’ll have position animation attached to it so that all part of the figure comes into frame together.

Now comes another fun part. We have to create a bubble head, a stick body and a hand that waves.

Head

Head layer and Bubble animation

Head is just a simple CALayer with cornerRadius to give it a circular shape. X position animation is added to it with CASpringAnimation. Spring animation gives it the bubble effect.

Body

To add some excitement to it, I’ve used CAShapeLayer and UIBezierPath to draw the body and the hand but you can use basic CALayer.

Finally add the wave animation to the hand

Finally everything is complete. Run it and Voila!

Final Result

If you want to look through the code base, i’ve provided the github repo link below. Have fun and don’t forget to let me know if you have any suggestion.

GitHub - ASMCorp/PickABoo