Introduction to BonsaiJS Animation

BonsaiJS is a lightweight graphics library with an intuitive graphics API and an SVG renderer. It’s a javascript Library. I’ve stumbled upon very useful libraries while working. But Today I want to mention Bonsaijs Animation because I found it pretty easy to use.

See the Pen ROBOT (BonsaiJS Superbasic Animation) by The SuperKat (@thesuperkat) on CodePen.

BonsaiJS Animation Features:

• It has separate runner and renderer.
• Supports different Assets like (Audio, Images, Fontsand Video).
• It Supports Keyframe and time based animation.
• Supports easing functions too.
• Path Morphing.
• It Supports most modern Browsers
• Much more…

BonsaiJS has a quite growing Community as well.

Let’s have a quick look at our Example :

and

bonsai.run(document.getElementById('movie'), {
 code: function() {
      var body=new Bitmap('http://thesuperkat.com/wp-content/uploads/2016/08/robotbody.png').on('load', function() {this.addTo(stage);}).attr({height:250,x:100});
      var eyes=new Bitmap('http://thesuperkat.com/wp-content/uploads/2016/08/roboteyes.png').on('load', function() {this.addTo(stage);}).attr({height:18,x:122,y:30});
      var upperteeth=new Bitmap('http://thesuperkat.com/wp-content/uploads/2016/08/robotteethup.png').on('load', function() {this.addTo(stage);}).attr({height:9,x:126,y:65});
      var lowerteeth=new Bitmap('http://thesuperkat.com/wp-content/uploads/2016/08/robotteethdown.png').on('load', function() {this.addTo(stage);}).attr({height:9,x:126,y:75});
      var lefthand=new Bitmap('http://thesuperkat.com/wp-content/uploads/2016/08/robothandleft.png').on('load', function() {this.addTo(stage);}).attr({height:95,x:218,y:100});
      var righthand=new Bitmap('http://thesuperkat.com/wp-content/uploads/2016/08/robothandright.png').on('load', function() {this.addTo(stage);}).attr({height:95,x:5,y:100});
 
      var eyesa = new KeyframeAnimation('1s', {
          '0s': {x: 122, y: 36},
          '1s': {y: 116, x: 30},
          '2s': {x: 122, y: 22},
          '3s': {x: 126, y: 30},
          to: {x: 118, y: 26}
      }, {repeat:Infinity});

      var rhanda = new KeyframeAnimation('4s', {
          '3s': {x: 0, y: 94},
          '2s': {x: 5, y: 90},
          '1s': {x: 10, y: 100},
          '0s': {x: 5, y: 106},
          to: {x: 5, y: 100}
      }, {repeat:Infinity});

      var uteetha = new KeyframeAnimation('2s', {
          '0s': {x: 126, y: 65},
          '1s': {x: 126, y: 62},
          to: {x: 126, y: 65}
      }, {repeat:Infinity});

      var lteetha = new KeyframeAnimation('2s', {
          '0s': {x: 126, y: 75},
          '1s': {x: 126, y: 77},
          to: {x: 126, y: 75}
      }, {repeat:Infinity});

 
 
      var lhanda = new KeyframeAnimation('4s', {
          '0s': {x: 212, y: 94},
          '1s': {x: 218, y: 90},
          '2s': {x: 224, y: 100},
          '3s': {x: 218, y: 106},
          to: {x: 218, y: 100}
      }, {repeat:Infinity});
 

      eyes.animate(eyesa); 
      lefthand.animate(lhanda); 
      righthand.animate(rhanda); 
      upperteeth.animate(uteetha);
      lowerteeth.animate(lteetha);
   },
     width: 900,
     height: 250
   });

Composition of the Robot

We got four parts of the complete Robot :

• Robot body
• Two separate robot hands
• A pair of eyes
• Upper teeth
• and Lower Teeth

We have all the above parts as separate png’s. And then we simply added them to our stage using bonsaiJS’s .addTo()method.

Then Its all thanks to the BonsaiJS’s keyframeAnimation class and manipulating it for our different components. We get a fine exploring robot :).

The post Simple BonsaiJS Animation Robot appeared first on The Superkat.