kineticjs：将图像旋转一定角度并停止答案

【问题标题】：kineticjs: rotate image by certain angle and stopkineticjs：将图像旋转一定角度并停止
【发布时间】：2014-01-21 23:39:21
【问题描述】：

我是 HTML 和 kineticjs 的新手，我想创建一个动画，它将图像围绕某个点和某个角度旋转。然后它必须停止。后来我想实现一种通过单击按钮来控制角度的方法。但是对于第一个问题：这是到目前为止的代码：

<!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>

来源：http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/

那么我怎样才能让动画在 50° 之后停止？感谢您的帮助！

【问题讨论】：

标签： javascript html rotation kineticjs

【解决方案1】：

你可以使用补间：

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

演示：http://jsfiddle.net/lavrton/2DDtW/

【讨论】：