光で始めるSilverlight
全ては時の流れに
2010/10/10  

「それは時間の流れだ!」 ・・・by 業界の人
 
え、時間の流れ?!
 
「そう、アニメーションとは、時間の流れの上に配置されたオブジェクトのことだ。
 だから、アニメーションを完成させるには、時を刻む時計が必要なのだ(クワッ!)」

 
時を刻む・・・時計・・・そうか、タイマーのことね!
JavaScriptには、一定時間ごとに実行をかける「タイマー機能」があるわ。
たとえばこんな風にすれば、5秒に1回、プログラムを実行するってことができるの。

<script type="text/javascript" language="JavaScript">
var TimerID //タイマーID
var sec = 0;

// タイマー開始の処理 -- こうすると、TimerMain処理が5秒に1回動くようになる。
function start_timer()
{
  TimerID = setInterval( "TimerMain()", 5000 ); // 1000=1秒
}

// 時間ごとの処理 -- ここが5秒に1回動くわけ。
function TimerMain()
{
  sec += 5 ;
  alert("スタートしてから" + sec + "秒経過!");
}

// タイマー終了の処理 -- これを動かすと、TimerMainの呼び出しが停止する。
function stop_timer()
{
  clearInterval( TimerID );
  alert("タイマー、ストップ!");
}

</script>

    

このタイマー機能と、さっきの「モノの形を変えるサンプル」を合わせれば・・・

できた! これが「時間の流れ」で動くアニメーションだっ! >> サンプルをダウンロード
(青マルを右クリックでスタート、左クリックで停止)

サンプルの内容:
・TimerSample.html -- 5秒に1回動作するタイマーのサンプル。
・hajimete05.html -- ブラウザから直接見る、HTMLページだね。
・Silverlight.js -- Silverlightを使うときに必要な、お約束。
・hikaru2.xaml -- Xaml 「ザムル」ファイル。
・myScript.js -- タイマーを使ったアニメーション。
アニメーションの動きは、myScript.js の中に書いてあるんだよ。
まず、いままでと違っているのは、ここ。
// 全体の初期化処理
function startAll()
{
  var agCtrl = document.getElementById("MoveSample");
  Elli1 = agCtrl.content.findName("Ellipse1");

  startTimer();
}
いままでは sender っていうので、どのマルかを見分けていたけれど、
今度のサンプルでは findName("Ellipse1"); っていうのでマルを見つけているんだ。
そんでもって、最初に startTimer(); ってすることで、アニメーションがスタートするの。

startTimer の中身は、こうだね。

TimerID = setInterval( "TimerMain()", 30 ); // 1000=1秒
後に書いてある 30 っていう数字は 30/1000 秒のこと。
普通のTV放送が 1/30秒だから、だいたいこれくらいだね。

アニメーションの、本当の中身はここ。

// 時間ごとの処理
function TimerMain()
{
  // 幅を変える
  Elli1.Width += 3; // 3 ずつ増やしてゆく
  if( Elli1.Width > 200 ){ // 200を超えたら
    Elli1.Width = 1; // 1 に戻す
  }

  // 縦の位置を変える
  Elli1["Canvas.Top"] += 3; // 3 ずつ増やしてゆく
  if( Elli1["Canvas.Top"] > 200 ){ // 200を超えたら
    Elli1["Canvas.Top"] = 0; // 0 に戻す
  }
}
こうやって、幅と位置を足し算で少しずつ増やしていってるの。

プログラムの計算で動きを作るのって、けっこー頭を使うんだ。
でも、ゲームを作るんだったら、どうしてもプログラムで動きをコントロールしなくっちゃ。
次回から、いよいよゲーム作りに入るんだから、がんばろーね!

ページ先頭に戻る▲