HTML5 Canvas More Easing Functions with KineticJS

This tutorial demonstrates all of the easing function sets provided by KineticJS, including Linear, Ease, Back, Elastic, Bounce, and Strong.

Instructions: Press "Play" to transition all of the text nodes.

Open in new window

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #buttons {
        position: absolute;
        top: 10px;
        left: 10px;
      }
      #buttons > input {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <div id="buttons">
      <input type="button" id="play" value="Play">
      <input type="button" id="pause" value="Pause">
      <input type="button" id="reverse" value="Reverse">
    </div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 480
      });
      var layer = new Kinetic.Layer();

var easings = [
        {name: 'Linear', color:'blue'},
        {name: 'EaseIn', color:'green'},
        {name: 'EaseOut', color:'green'},
        {name: 'EaseInOut', color:'green'},
        {name: 'BackEaseIn', color:'blue'},
        {name: 'BackEaseOut', color:'blue'},
        {name: 'BackEaseInOut', color:'blue'},
        {name: 'ElasticEaseIn', color:'green'},
        {name: 'ElasticEaseOut', color:'green'},
        {name: 'ElasticEaseInOut', color:'green'},
        {name: 'BounceEaseIn', color:'blue'},
        {name: 'BounceEaseOut', color:'blue'},
        {name: 'BounceEaseInOut', color:'blue'},
        {name: 'StrongEaseIn', color:'green'},
        {name: 'StrongEaseOut', color:'green'},
        {name: 'StrongEaseInOut', color:'green'}
      ]; 
      
      var tweens = [];

for(var n = 0; n < easings.length; n++) {
        var num = n + 1;
        var ease = easings[n];
        var text = new Kinetic.Text({
          x: 10,
          y: 60 + (n * 400 / easings.length),
          padding: 4,
          text: num + ') ' + ease.name,
          fontSize: 18,
          fontFamily: 'Calibri',
          fill: ease.color
        });

layer.add(text);
        
        var tween = new Kinetic.Tween({
          node: text, 
          x: 420,
          easing: Kinetic.Easings[ease.name],
          duration: 2
        });
        
        // add tween to tweens array
        tweens.push(tween);
      }

stage.add(layer);

// play
      document.getElementById('play').addEventListener('click', function() {
        for (var n=0; n<tweens.length; n++) {
          tweens[n].play(); 
        }
      }, false);
      
      // pause
      document.getElementById('pause').addEventListener('click', function() {
        for (var n=0; n<tweens.length; n++) {
          tweens[n].pause(); 
        }
      }, false);
      
      // reverse
      document.getElementById('reverse').addEventListener('click', function() {
        for (var n=0; n<tweens.length; n++) {
          tweens[n].reverse(); 
        }
      }, false);

</script>
  </body>
</html>

< Common Easings Finish Event >

More Examples

Modified on May 11th, 2013 by Eric Rowell