Animate a shape

In the previous lesson we learned how to create a shape using the shape and render functions.

Now we are going to learn how to animate a shape using the timeline and play functions.

Creating keyframes

Previously, we created a Shape by passing a single argument (a Plain Shape Object) to the shape function.

However, the shape function can also take multiple arguments.

Each Plain Shape Object that we pass as an argument to the shape function will create a Keyframe.

import { shape } from 'wilderness'

const keyframe1 = {
  type: 'circle',
  cx: 10,
  cy: 10,
  r: 10,
  fill: '#DBF8A1'
}

const keyframe2 = {
  type: 'rect',
  x: 80,
  y: 0,
  width: 20,
  height: 20,
  fill: '#1F9FFD',
  duration: 2000
}

const morph = shape(keyframe1, keyframe2)
    

In the code above, we have created a Shape and assigned it to the variable morph. The Shape has two Keyframes – a green circle, and a blue square.

Later, when we we add morph to a Timeline and start playback, the Shape will animate from a circle (Keyframe 1), to a rectangle (Keyframe 2).

These two Keyframes are spaced 2000 milliseconds apart, as we have set a duration property on Keyframe 1.

Creating a timeline

If we went ahead and rendered our Shape at this point, without first adding it to a Timeline, it would be rendered as a static shape at its first Keyframe.

However, our aim is to create a dynamic shape that animates over time. In Wilderness can achive this by creating a Timeline using the timeline function.

At its most basic, the timeline function takes a single argument – a Shape.

import { shape, render, timeline } from 'wilderness'

const keyframe1 = {
  type: 'circle',
  cx: 10,
  cy: 10,
  r: 10,
  fill: '#DBF8A1'
}

const keyframe2 = {
  type: 'rect',
  x: 80,
  y: 0,
  width: 20,
  height: 20,
  fill: '#1F9FFD',
  duration: 2000
}

const morph = shape(keyframe1, keyframe2)

const animation = timeline(morph)

render(document.querySelectorAll('svg'), animation)
    

This time, instead of passing a Shape to the render function, we pass it our newly created Timeline (that we have assigned to the variable animation).

Playing a timeline

Once we have created and rendered a Timeline, we can then start playback of the Timeline using the play function.

import { shape, render, timeline, play } from 'wilderness'

const keyframe1 = {
  type: 'circle',
  cx: 10,
  cy: 10,
  r: 10,
  fill: '#DBF8A1'
}

const keyframe2 = {
  type: 'rect',
  x: 80,
  y: 0,
  width: 20,
  height: 20,
  fill: '#1F9FFD',
  duration: 2000
}

const morph = shape(keyframe1, keyframe2)

const animation = timeline(morph)

render(document.querySelectorAll('svg'), animation)

play(animation)
    

Setting playback options

Both the timeline and play functions can take an optional final argument. This argument is an object containing options to control playback of the Timeline.

Below, we use this feature to instruct our play function to iterate the Timeline infinitely, and to alternate playback direction every time an iteration completes.

import { shape, render, timeline, play } from 'wilderness'

const keyframe1 = {
  type: 'circle',
  cx: 10,
  cy: 10,
  r: 10,
  fill: '#DBF8A1'
}

const keyframe2 = {
  type: 'rect',
  x: 80,
  y: 0,
  width: 20,
  height: 20,
  fill: '#1F9FFD',
  duration: 2000
}

const morph = shape(keyframe1, keyframe2)

const animation = timeline(morph)

const playbackOptions = {
  alternate: true,
  iterations: Infinity
}

render(document.querySelectorAll('svg'), animation)

play(animation, playbackOptions)
    

With just a few lines of code we have created our first animation with Wilderness.

That's the basics covered! I think we can all be pretty proud of ourselves! Take some time to experiment with what we've learned.

When we're all ready to continue, we will learn just how powerful Wilderness is, by exploring some of its advanced features.