Animating Animatable Shape Layer Properties in Kite Compositor
Kite Compositor, the Mac OS app for UI animation and prototyping makes it super easy to learn the Apple’s Core Animation framework and create awesome animations without writing a single line of code. In this tutorial, we will take a broad look at what makes the shape layer in Kite unique for creating animations. I am going to explain and demonstrate how to animate the animatable properties of a shape layer in Kite with some practical and useful examples.
What is a shape layer?
A shape layer is a vector-based or non-destructive layer with various animatable and non-animatable properties. Consider this like a minimal version of Sketch or Figma built directly inside Kite. There are several ways to create shape layers or bring them into Kite. You can draw a shape layer directly inside Kite with the pen tool or drag it from the built-in library onto the canvas. Another way is to create the shape layer in Sketch or Adobe Xd, and import into Kite.
The aim of this tutorial is not about creating shape layers in Kite, far from that. The aim is to explore varieties of animations you can create using the various properties of a shape layer, here inside Kite.
Let’s commence with my favorite shape layer property, path.
Path Animation
Here, I am not talking about animating on a motion path. The path property defines a shape to be rendered. It is very useful for morphing one shape into another shape.
In my opinion, path animation is the most useful among all the shape layer’s properties animations. By spending few hours learning how to create path animations you can create awesome animations that can never be achieved in other prototyping tools. Beneath are few examples of animations you can create using the path property.
How-to
For all examples below, the animations could be accomplished in one of the following ways.
- Right-click the shape layer -> Choose AddChild -> Choose animation type -> select the shape layer property you want to animate from the inspector. OR
- Select the shape layer -> Hover on the shape layer property you want to animate from the inspector -> choose the type of animation.
- Animating a Workout App Poses: Side Lunges:
Steps: Draw the poses on paper and recreate them in Sketch using the vector tool. In this example there are 3 poses, left, middle and right. Export the main pose into Kite using the Kite’s built-in import and export the other two poses as SVG and save somewhere in your file system. Select the shape layer (main pose) you imported into Kite, from the inspector, hover on the path property and select “animate with key animation”. Add 6 keyframes and select “use current canvas value” from the top right corner of the keyframe. Right-click on the third keyframe, select “edit” and choose any of the SVG shapes exported from Sketch to swap the current shape layer. You can repeat this process to swap the other keyframe values. To ensure there is a delay between the keyframes, you can repeat their values as many times as you want. For example, I made the following keyframes the same to have a delay: (#1 & #2) , (#3 & #4) , (#5 & #6).
- Animating a Count-Down Timer:
Steps: Create the numbers in Sketch using the text tool. Next, convert the numbers into an outline. Use the Kite’s built-in import feature to import the starting number from Sketch. Export the other numbers as SVG to somewhere in your file system. Select the starting number, animate the path property with Keyframe animation and follow the same process as described in the “Animating Workout Poses” above.
- Soft Body Simulation: Clothing: Using the morphing technique, you can manipulate the keyframe values of the flag and cloth in the illustration below to be seen as if the wind is blowing them. Mastering the path proper animation in Kite, you can build awesome cloth simulations such as curtains, flags and reveals.
- Morph a shape into another: Here, I used the same morphing technique described above to change the illustrated lemon from its initial state to a squeezes state.
Animating Fill Color: Let’s look at how to change the background color of an iPhone X screen from tangerine -> lime -> lemon -> banana using keyframe animation. To begin, select the background layer, hover on the “FillColor” property and select “animate with key animation”. Add 3 additional keyframes using the “+” icon and change the keyframe color values.
Create a selection or marching ants Effect with Line Dash Phase: This property only works when you apply a stroke to a shape. It can be used to simulate a selection or marching ants effect as illustrated below.
Animate the Line Width: Let’s change the line width of the shape layer with keyframe animation. Keyframe settings: #1 = 36, #2= 50.
Animate the Corners of a Star to Bevel with Miter Limit: The miter limit returns the maximum value of a miter length which is the distance between outer and inner corners where two lines join together. In our example, we will use keyframe animation to change the default miter limit of the star shape layer from 10–1. In this case, the miter length exceeds the miter limit which results in bevelling the corners of the star. I have no known practical example where you will need to animate the miter limit of a shape layer but just wanted to show how it can be animated.
Animating Stroke Color: Simply put, stroke color defines the color of a stroke of the shape layer. This example uses keyframe animation to change the color of the activity ring from Spring -> Aqua -> Strawberry.
Animating an activity ring with Stroke Start: Stroke Start is the relative location at which the path of the shape layer begins. It ranges from 0.0–1.0 and has a default value of 0.0. It can be used to create an animated activity ring as shown below.
Animating a progress ring with Stroke End: Stroke End is the relative location at which the path of the shape layer ends. The range of this property is 0.0–1.0. Its default value is 1.0. It is very useful for animating a progress or activity ring. Let’s see how to animate the progress ring for the count-down timer as shown below. We will change the default value of the stroke-end from 1–0 to simulate a reduction as the timer counts down.
In addition, you can use the stroke-end property of a shape layer to create a scribble or write-on animation as follow:
If you would like to learn more about how to get started with Kite?. Check the Kite’s official documentation or my YouTube channel which covers the basics. I will soon be covering topics which go beyond the basics.
