Search code examples
resizekineticjstransition

KineticJS: Transition easing while resizing an image

See my code below. Using the example on: http://www.html5canvastutorials.com/kineticjs/html5-canvas-transition-easing-functions-with-kineticjs/

I'm trying to first introduce an image on the first layer which appears oversized. This is on purpose. Using a transition, I want to ease the image down to an appropriate size so that it fits within the canvas just as the page loads. This is my first step. My next step will be to then add a second layer and animate some text. However, questions for that can wait. I just want to concentrate on this one problem first.

So far, when I run this code in Firefox, the Firebug debugger is telling me that there is no transitionTo function on the line that reads: crosshairs.transitionTo. Well there's something screwy there because we know that this function does exist! I don't see where it went wrong. Perhaps someone there can see what the issue is? Also, I'm not sure about the X and Y values for scale property and what they should be. I'm taking a guess and just thinking reduce the size of the image by half for now? Please advise.

Alan

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        overflow: hidden;
        width: 312px;
        height: 121px;
        margin: 0px auto;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
      <div id="container"></div>
      <script src="kinetic-v4.4.0.min.js"></script>
      <script defer="defer">

      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var crosshairLayer = new Kinetic.Layer();
      var textLayer = new Kinetic.Layer();
      var imageObj1 = new Image();
      imageObj1.src = 'images/crosshairs.png';


      function runAnim(crosshairs)
      {        
        crosshairs.transitionTo({
           scale: {
              x: .5,
              y: .5
            },
          duration: 3,
          easing: 'ease-in'
        });        
      }

    var XHair = new Kinetic.Image({
          image: imageObj1,
          x: stage.getWidth() / 2 - 650 / 2,
          y: stage.getHeight() / 2 - 327 / 2,
          width: 250,
          height: 250,
          draggable: false
        });

    crosshairLayer.add(XHair);
    stage.add(crosshairLayer);

    imageObj1.onload = function() {
        runAnim(this);
      };

    </script>

  </body>
</html>

I've attached the image itself. Hope you can see it.

enter image description here

Solution

  • Actually you are requesting .transitionTo on an html image object (no such method, of course)

    I put a few parts of your code together to illustrate. The "this" in the code below refers to your html image object, not a kineticJS object.

      var imageObj1 = new Image();
  imageObj1.onload = function() {
    runAnim(this);
  };
  imageObj1.src = 'yourImage';