title: How to create an scaling animation in Kinetic.js?
body: <p>I have the following code that is supposed to scale up a shape on mouseover and then scale it back to its original size on mouseout. I have a few problems:</p>
  
  <ol>
  <li>How do I change the scale amount?</li>
  <li>How do I end the animation in a certain time?</li>
  <li>How do I do 1 and 2 without causing a glitch.</li>
  <li>When the mouse pointer passes over the shape fast, some frames jump suddenly. How do I fix that?</li>
  </ol>
  
  <p>All I need is a shape that get's bigger slowly when it is moused over, and then returns to its original size when mouse is out.</p>
  
  <pre><code>    &lt;div id="container"&gt;&lt;/div&gt;
      &lt;script src="js/kinetic.min.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script defer="defer" type="text/javascript"&gt;
          function zoomHex() {
          }
          var stage = new Kinetic.Stage({
              container: 'container',
              width: 500,
              height: 500
          });
          var shapesLayer = new Kinetic.Layer();
          var hex = new Kinetic.RegularPolygon({
              x: 250,
              y: 250,
              sides: 6,
              radius: 80,
              fill: '#00D2FF',
              stroke: '#00D2FF',
              strokeWidth: 30,
              lineJoin: 'round'
          });
          var zoomIn = new Kinetic.Animation(function(frame) {
              var period = 1000;
              var duration = 1000;
              zoomAmount = 1;
              var scale =frame.time / period;
              hex.setScale(frame.time / period + zoomAmount);
              if(frame.time &gt; duration) {
                  zoomIn.stop();
                  this.frame.time = 0;
              }
          }, shapesLayer);
          var zoomOut = new Kinetic.Animation(function(frame) {
              var period = 1000;
              var duration = 1000;
              zoomAmount = 2;
              hex.setScale(frame.time / period - zoomAmount);
              if(frame.time &gt; duration) {
                  zoomOut.stop();
                  this.frame.time = 0;
              }
          }, shapesLayer);
          hex.on('mouseover', function() {
              zoomIn.start();
              //zoomIn.stop();
          });
          hex.on('mouseleave', function() {
              zoomOut.start();
              //zoomOut.stop();
          });
          shapesLayer.add(hex);
          stage.add(shapesLayer);
      &lt;/script&gt;
  </code></pre>