Question

我是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°后停止？谢谢你的帮助！

Answer 1

您可以使用Tween：

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

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

kineticjs：以特定角度旋转图像并停止

1 个答案: