Easing into your servo animations

Unless you want any of your future walking bots to be very firmly in the uncanny valley, you'll need to use easing to create a more fluid, natural motion with your animation segments.

How easing fits into an animation segment

Easing functions are added into the keyframes of a servo; so not only are we saying what position we want the servo to be, but how it gets there. For example, these keyframes:

let keyframes = [
  null,
  {degrees: 180, easing: 'inoutcirc'}
]

Will take a servo starting at any position and move it to 180, starting out slow, speeding up in the middle, and slowing down again towards the end.

There are many different options for easing, and they are documented in the ease-component (https://www.npmjs.com/package/ease-component) npm module included as a dependency to Johnny-Five. We'll be using incirc, outcirc, and inoutcirc to start.

Adding easing to our first animation

Copy the contents of my-first-animation.js into a new file called easing-animations...