kineticJs的transitionTo方法不适用于点击事件答案

【问题标题】：transitionTo method of kineticJs not working on click eventkineticJs的transitionTo方法不适用于点击事件
【发布时间】：2012-07-06 03:59:23
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： html html5-canvas kineticjs html5-animation

【解决方案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 度。

【讨论】：