htmlhtml5-canvaskineticjshtml5-animation

transitionTo method of kineticJs not working on click event

I am using transitionTo method of kineticJS to show animated rotation of a shape on click event of mouse. It works fine if we click the shape first time but then on subsequent clicks it does not rotate the shape. I want to show transition(rotation) of the shape by some angle every time I click on it. Please let me know the mistake I am making and how can I correct it??

This is the code I am using

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.6.js"></script>
    <script>
      window.onload = function() {
        var stage = new Kinetic.Stage({
          container: "container",
          width: 578,
          height: 200
        });

        var layer = new Kinetic.Layer({
         x:stage.getWidth()/3 ,
            y: stage.getHeight()/3 
            });

        var rect = new Kinetic.Rect({
          x: 239,
          y: 75,
          width: 100,
          height: 50,
          fill: "#00D2FF",
          stroke: "black",
          strokeWidth: 4,
          centerOffset: [50, 100]
        });

        // add the shape to the layer
        layer.add(rect);

        // add the layer to the stage
        stage.add(layer);


        rect.on("click", function() {

            rect.transitionTo({
            rotation:2*Math.PI,
            duration:1
            });
            stage.draw();
        });
      };

    </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>
Solution

  • Try this:

    <!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.0.js"></script>
    <script>
      window.onload = function() {
       var angle = 0;
        var stage = new Kinetic.Stage({
          container: "container",
          width: 578,
          height: 200
        });

        var layer = new Kinetic.Layer();

        var rect = new Kinetic.Rect({
          x: 239,
          y: 75,
          width: 100,
          height: 50,
          fill: "#00D2FF",
          stroke: "black",
          strokeWidth: 4
        });

        layer.add(rect);

        stage.add(layer);

        rect.on("click", function() {

            angle += 2;

            rect.transitionTo({
            rotation: Math.PI * angle,
            duration:1
            });
        });

      };

    </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

    The click was working just fine, however you were telling it to rotate to the same angel every time (why it only animates on the first click). I added a variable so that the angle increases 360 degrees every time you click on it.