HTML5 Canvas All Tween Controls with KineticJS

To play, pause, reverse, reset, finish, and seek tweens with KineticJS, we can use the play(), pause(), reverse(), reset(), finish(), and seek() methods. This tutorial demonstrates each control.

Open in new window

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #buttons {
        position: absolute;
        top: 5px;
        left: 10px;
      }
      #buttons > input {
        padding: 10px;
        display: inline-block;
        margin-right: 5px;
      }
    </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">
      <input type="button" id="reset" value="Reset">
      <input type="button" id="seek" value="Seek 3">
      <input type="button" id="finish" value="Finish">
      
    </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: 200
      });
      var layer = new Kinetic.Layer();
      var rect = new Kinetic.Rect({
        x: 100,
        y: 130,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 2,
        opacity: 0.2
      });

layer.add(rect);
      stage.add(layer);
      
      var tween = new Kinetic.Tween({
        node: rect, 
        duration: 6,
        x: 400,
        y: 75,
        rotation: Math.PI * 10,
        opacity: 1,
        strokeWidth: 6,
        scaleX: 1.3,
        scaleY: 1.3,
        easing: Kinetic.Easings.Linear,
        fillR: 0,
        fillG: 0,
        fillB: 255
      });

// pause tween
      document.getElementById('pause').addEventListener('click', function() {
        tween.pause();
      }, false);
      
      // reverse tween
      document.getElementById('reverse').addEventListener('click', function() {
        tween.reverse();
      }, false);
      
      // play tween forward
      document.getElementById('play').addEventListener('click', function() {
        tween.play();
      }, false);
      
      // reset tween
      document.getElementById('reset').addEventListener('click', function() {
        tween.reset();
      }, false);
      
      // force tween to finish
      document.getElementById('finish').addEventListener('click', function() {
        tween.finish();
      }, false);
      
      // seek to 3 seconds
      document.getElementById('seek').addEventListener('click', function() {
        tween.seek(3);
      }, false);
      
    </script>
  </body>
</html>

< Finish Event Tween Filter >

More Examples

Modified on May 11th, 2013 by Eric Rowell