Question

我正在使用kineticJS的transitionTo方法来显示鼠标点击事件中形状的动画旋转。如果我们第一次点击形状，然后在随后的点击它不旋转形状，它工作正常。我希望每次点击它时都会以某个角度显示形状的过渡（旋转）。请让我知道我犯的错误，如何纠正？??

这是我正在使用的代码

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.6.js"></script>
    <script>
      window.onload = function() {
        var stage = new Kinetic.Stage({
          container: "container",
          width: 578,
          height: 200
        });

        var layer = new Kinetic.Layer({
         x:stage.getWidth()/3 ,
            y: stage.getHeight()/3 
            });

        var rect = new Kinetic.Rect({
          x: 239,
          y: 75,
          width: 100,
          height: 50,
          fill: "#00D2FF",
          stroke: "black",
          strokeWidth: 4,
          centerOffset: [50, 100]
        });

        // add the shape to the layer
        layer.add(rect);

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


        rect.on("click", function() {

            rect.transitionTo({
            rotation:2*Math.PI,
            duration:1
            });
            stage.draw();
        });
      };

    </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

Answer 1

试试这个：

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.0.js"></script>
    <script>
      window.onload = function() {
       var angle = 0;
        var stage = new Kinetic.Stage({
          container: "container",
          width: 578,
          height: 200
        });

        var layer = new Kinetic.Layer();

        var rect = new Kinetic.Rect({
          x: 239,
          y: 75,
          width: 100,
          height: 50,
          fill: "#00D2FF",
          stroke: "black",
          strokeWidth: 4
        });

        layer.add(rect);

        stage.add(layer);

        rect.on("click", function() {

            angle += 2;

            rect.transitionTo({
            rotation: Math.PI * angle,
            duration:1
            });
        });

      };

    </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

点击工作得很好，但是你每次都告诉它旋转到同一个天使（为什么它只在第一次点击时动画）。我添加了一个变量，每次点击它时角度都会增加360度。

transitionTo的动力学方法不适用于点击事件

1 个答案: