0

For ループ画像にランダムに動くアニメーションを追加するにはどうすればよいですか?

私は画像用にこのコードを持っています:

var imageSRCC = ["images/image1.png","images/image2.png","images/image3.png"];

function Images(i,x,y) {

  var CreatImage = new Image();
  Image= new Kinetic.Image({
     x:x,
     y:y,
     image: CreatImage,
     width: 100,
     height: 200,
  });
  CreatImage.src = imageSRCC[i];    
  layer.add(Image);

}

for (var i =0; i <imageSRCC.length; i++) {

    x: Math.floor(Math.random()*2 + 15)
    y: Math.floor(Math.random()* 2 + 15)

    Images(i,x,y)
}

そして、私はこのようなことをしたい:

http://chimera.labs.oreilly.com/books/1234000001654/ch05.html#balls_with_simple_interactions

上記のリンクでは、スクロールダウンの例を見ることができます。

.....

誰かが私を助けてくれるなら、私はとても感謝しています。

4

1 に答える 1

1

ここでは、あまり的を絞った質問をしていません。しかし、本の例を見ると、これは私が提案するものです:

まず、本で提供されている例を実行するフィドルを作成します。これには、本からコードをコピーして貼り付けるだけではありません。そうすることで、サンプル アプリケーションの HTML5 要素と Javascript 要素を区別するのに役立ちます。JSFiddle に慣れていない場合は、StackOverflow や他の場所でコードをデモンストレーションするための便利なツールです。

次に、Javascript コードを調べて、さまざまな機能が実行されていることを理解してください。特に注目したいのは、drawScreen、update、およびrender関数です。これらの各機能の目的は何ですか?

最後に、KineticJS はこれのどこに当てはまりますか? KineticJS はグラフィックス ライブラリであるため、ここでは、例で使用されているネイティブの HTML5 キャンバス コードをよりユーザー フレンドリーに置き換えるためにのみ使用します。contextブック コード内のオブジェクトに注目します。目標は、これを KineticJS コードに置き換えることです。

理想的には、これらの手順を完了すると、自分の質問に対する回答としてコード スニペットを提供できるようになります。がんばれ！

于 2014-07-07T23:49:51.027 に答える