0

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>
4

1 に答える 1

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 度増加するように変数を追加しました。

于 2012-07-05T19:59:23.970 に答える