Motion path

In the previous lesson we learned about Forces.

As we discussed, one of the main use cases for Forces is to apply a motion path to a Shape.

Helpfully, Wilderness provides a motionPath function that can create a Force for us.

The motionPath function takes one argument, a Plain Shape Object, and returns a Force function.

Let's get stuck staight into the code.

const { motionPath, shape, timeline, render, play } = Wilderness

const plainShapeObject = {
  type: 'circle',
  cx: 5,
  cy: 5,
  r: 5,
  fill: '#DBF8A1'
}

const motionPathPlainShapeObject = {
  type: 'path',
  d: 'M0,0l22.5,10l22.5,-10l22.5,10l22.5,-10'
}

const keyframe1 = plainShapeObject

const keyframe2 = {
  ...plainShapeObject,
  forces: [ motionPath(motionPathPlainShapeObject) ]
}

const circleOnMotionPath = shape(keyframe1, keyframe2)

const animation = timeline(circleOnMotionPath, {
  duration: 2000,
  iterations: Infinity,
  alternate: true
})

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

play(animation)
    

For the purposes of visualising the motion path, in the render above we have added a line to show the trajectory of the motion path.

As the Plain Shape Object that we pass to the motionPath function is relative to the effected Shape. The first point should almost always be at { x: 0, y: 0 }. Anything other than this will offset the Shape's first Keyframe.

There are three special properties that can be set on the Plain Shape Object we pass to the motionPath function – accuracy, easing and rotate. For more detail, take a look at the API documentation.