Hands-On Robotics with JavaScript

Adding easing to our first animation

Copy the contents of my-first-animation.js into a new file called easing-animations.js. Next, we'll modify the keyframes array to include some easing:

let keyframes = [ [null, {degrees: 0}, {degrees: 180, easing: 'inOutCirc'}, false, {degrees:90, easing:'outCirc'}], // servoOne [null, {degrees: 180}, null, null, {degrees: 90, easing:'inCirc'}] // servoTwo]

Let's also increase the duration of the animation segment so we can really see the difference easing makes:

let duration = 16000

Then, load it onto the Pi, navigate to the folder in your Pi SSH session, and run the following command:

sudo node easing-animations.js

Really watch how inCirc, outCirc, and inOutCirc affect your animation.