0

以下の私のコードを参照してください。例の使用: http://www.html5canvastutorials.com/kineticjs/html5-canvas-transition-easing-functions-with-kineticjs/

特大に見える最初のレイヤーに最初に画像を導入しようとしています。これはわざとです。トランジションを使用して、ページが読み込まれたときにキャンバス内に収まるように、画像を適切なサイズに縮小したいと考えています。これが私の最初のステップです。私の次のステップは、2 番目のレイヤーを追加し、いくつかのテキストをアニメーション化することです。ただし、そのための質問は待つことができます。まず、この 1 つの問題に集中したいと思います。

これまでのところ、このコードを Firefox で実行すると、Firebug デバッガーは、crosshairs.transitionToという行にtransitionTo関数がないことを通知しています。この関数が存在することを知っているので、そこには何かおかしなことがあります! どこが間違っていたのかわかりません。おそらく、そこにいる誰かが問題が何であるかを見ることができますか？また、scale プロパティの X 値と Y 値と、それらがどうあるべきかについてもわかりません。私は推測していて、今のところ画像のサイズを半分に減らすことを考えていますか? お知らせ下さい。

アラン

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        overflow: hidden;
        width: 312px;
        height: 121px;
        margin: 0px auto;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
      <div id="container"></div>
      <script src="kinetic-v4.4.0.min.js"></script>
      <script defer="defer">

      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var crosshairLayer = new Kinetic.Layer();
      var textLayer = new Kinetic.Layer();
      var imageObj1 = new Image();
      imageObj1.src = 'images/crosshairs.png';


      function runAnim(crosshairs)
      {        
        crosshairs.transitionTo({
           scale: {
              x: .5,
              y: .5
            },
          duration: 3,
          easing: 'ease-in'
        });        
      }

    var XHair = new Kinetic.Image({
          image: imageObj1,
          x: stage.getWidth() / 2 - 650 / 2,
          y: stage.getHeight() / 2 - 327 / 2,
          width: 250,
          height: 250,
          draggable: false
        });

    crosshairLayer.add(XHair);
    stage.add(crosshairLayer);

    imageObj1.onload = function() {
        runAnim(this);
      };

    </script>

  </body>
</html>

画像自体を添付しました。ご覧いただければ幸いです。

ここに画像の説明を入力

4

1 に答える 1