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：按一定的角度旋轉圖像並停止

回答

相關問題