kineticjs: rotate image by certain angle and stop

I'm completely new in HTML and kineticjs and I want to create an animation, which rotates an image around a certain point and by a certain angle. Then it has to stop. Later I want to implement a way to control the angle by clicking a button. But to the first problem: This is the code so far:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.0.min.js">      </script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();

      var imageObj = new Image();
      imageObj.onload = function() {
        var yoda = new Kinetic.Image({
          x: 200,
          y: 50,
          image: imageObj,
          width: 106,
          height: 118,
          //offset: [x:250, y: 100]
        });


      /*var imageObj2 = new Image();
      imageObj.onload = function() {
        var background = new Kinetic.Image({
          x: 200,
          y: 50,
          image: imageObj,
          width: 106,
          height: 118,
        }); */

        // add the shape to the layer
        layer.add(yoda);
        //layer.add(background)

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

        var angularSpeed = 360 / 4;
        var anim = new Kinetic.Animation(function(frame) {
          var angleDiff = frame.timeDiff * angularSpeed / 1000;
          yoda.rotate(angleDiff); 
        }, layer);

        anim.start();
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
      //other image source

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

Source: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/

So how can I make the animation stop after - say - 50°? Thanks for your help!

Answers


You can use Tween:

var tweaktween = new Kinetic.Tween({
      node : yoda,
      rotation : 50,
      duration: 1
 });
 tween.start();

demo: http://jsfiddle.net/lavrton/2DDtW/


Need Your Help

Detecting if a program is installed and where using cmd.exe

windows batch-file powershell cmd

Windows has the program start.exe which somehow knows how to open programs by their lay-name like "firefox"