Animation is one of the main features of Haiku, and the heart of creating animations in Haiku is the Timeline. Using a combination of the Timeline and Stage, you can move and transform elements in your component over time, with the result being... animation!
Think of it like this: While the Stage shows what each element in your Haiku looks like as it animates, the Timeline depicts how the elements' properties change.
The Stage is pretty self-explanatory — especially if you're familiar with a drawing tool like Sketch.
But the Timeline may seem intimidating if you're new to animation. Don't be scared! We'll do our best to make it as accessible and familiar as possible. (If you've used Adobe After Effects, Flash, or even Final Cut, then you're probably already familiar with the idea.)
It's helpful, first of all — especially if you're just starting out — to try to get into the mindset of an animator.
To think like an animator means to think about what elements will look like at various points in time, and then how those elements will transition between one point in time and the next.
In more technical terms, the same idea could be expressed as this question: How does the
X position or the
Y position of some element change over the span of 1 second?
Using the Timeline, you can precisely control the answer.
The Timeline consists of a few fundamental pieces:
- A list of all of the elements currently on stage
- Beneath each element heading, a list of the element's properties
- Property input fields showing the value for each property
- Keyframes and transitions, which show how values change over time
- A ticker, which represents the current point in time being edited
Stepping back and taking a wider view, this is the overall anatomy of the Timeline. (These terms are defined visually here for clarity when they're referenced elsewhere in the docs.)
To understand how the Timeline and Stage interact, let's look at how a simple design (a heart, as shown here) moves around on the stage when animations have already been defined on the timeline.
When the ticker is at frame 0, the heart is shown on the stage at its initial position (150, 168).
If we press the play button and wait until frame 10 is reached, we see that the heart jumps to a new position, (211, 217). That's because frame 10 is marked as a keyframe for a change in the
position.y properties of the element.
Keep playing, and soon the ticker will reach frame 15. The heart's position jumps again, this time to the position (288, 97). As you can see, there are two more keyframes defined at frame 15, which explains the jump to the new position.
The keyframes at frame 15 indicate the beginning of a transition (or tween) for the
position.y properties. Thus, instead of jumping instantly from the baseline position (288, 97), the heart will slide smoothly between until it reaches the destination position (84, 119).
Each transition is associated with an easing curve, which designates what the smooth movement between the two values should look like. There are many easing curves to choose from, but we'll cover those later.
When you drag the timeline ticker left or right, you're changing the current time.
Any changes you make while the ticker is at a certain position will affect the values (keyframes) specifically at that time.
Once you've affected values at two such points in time (i.e., created keyframes), you can then create a transition to have Haiku automatically ease between the values. Experiment with different easing curves to finesse your animations!
Advanced: Animating along curves
While we plan to support custom, visual animation along paths in the future, there's a lot you can do with Haiku today. Since you can animate X and Y position separately, try out different easing curves for each of X and Y positions. For example, if you animate
linearwith X and
ease in > quadraticwith Y, you can plot half of a parabola (then
ease out > quadraticwith Y while continuing linearly with X to plot the other half.) You can do the same thing with
bounce, and any number of other transitions to create complex parametric path animations.
If you drag an element across the stage at a point in time, keyframes will automatically be created at that time. That is, dragging an element on stage is exactly the same as editing the
X Position and
Y Position properties in the at that point in time!
Both techniques are 'windows' into the same underlying data.
In fact, both of these techniques also have exactly the same outcome as editing the values manually in the code — which you can read more about under Advanced: Editing Haiku as Code.
First, move the ticker to frame 10, then double click the "rotation" value to focus the input:
Then, change the value to the desired rotation value, and press
Enter to save the value. Keyframes for the value
1.234 will be created at that point in time:
Property inputs can contain more than just simple values. They can be little snippets of code that we call expressions. A la Microsoft Excel, just begin your property input value with an equals sign, and the input will recognize that you're typing in an expression.
Expressions are a powerful tool and there's a lot you can do with them, so we've covered them in detail in the expressions guide.
New keyframes are automatically created when you:
- advance the ticker to a new point in time and then
- change properties on the stage (e.g. by resizing or moving an element) or numerically in the properties panel.
You can also create a keyframe by right-clicking on any property in the timeline and selecting "Create Keyframe".
To move a keyframe itself, simply click and drag to the left or right.
To edit the value of a keyframe, simply align the ticker over the keyframe, then edit the property visually on stage (e.g. drag the object), or numerically via the property inputs (e.g. change the value in the input field to the desired value).
Once you've created two keyframes (there's always a keyframe at the first frame) you can create a Transition. Haiku will then ease between the values of the two keyframes, along the Easing Curve that you specify.
To create a transition, right-click between two keyframes, then choose
"Create Tween" > and select your desired curve.
Coming soon: we'll be adding support for custom easing curves, plus the ability to better visualize the shape of a given curve.
You can zoom in or out with the timeline by dragging either end of the horizontal scroll bar. Notice the white vertical tick in the scrollbar — this shows you where the Ticker is along the timeline, while the width of the scrollbar shows how much of the timeline is currently visible in the viewport.
You can click the number in the "Ticker Position (Current Frame)" box on the top of the timeline to toggle between showing units in Seconds vs Frames.