kineticjs：按一定的角度旋转图像并停止

我在HTML和kineticjs中是全新的，我想创建一个动画，它将图像围绕某个点旋转一定的角度。然后它必须停止。后来我想实现一种通过单击按钮来控制角度的方法。但是到了第一个问题：这是迄今为止代码：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°？感谢您的帮助！

来源

2014-01-21 user1734984

您可以使用吐温：

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

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

来源

2014-01-21 15:39:21 lavrton

太好了，谢谢！ – user1734984

kineticjs：按一定的角度旋转图像并停止

回答

相关问题