全ては時の流れに
2010/10/10
「それは時間の流れだ!」 ・・・by 業界の人
<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>
このタイマー機能と、さっきの「モノの形を変えるサンプル」を合わせれば・・・
できた! これが「時間の流れ」で動くアニメーションだっ! >> サンプルをダウンロード
サンプルの内容:
アニメーションの動きは、myScript.js の中に書いてあるんだよ。・TimerSample.html -- 5秒に1回動作するタイマーのサンプル。 ・hajimete05.html -- ブラウザから直接見る、HTMLページだね。 ・Silverlight.js -- Silverlightを使うときに必要な、お約束。 ・hikaru2.xaml -- Xaml 「ザムル」ファイル。 ・myScript.js -- タイマーを使ったアニメーション。 まず、いままでと違っているのは、ここ。
// 全体の初期化処理
いままでは sender っていうので、どのマルかを見分けていたけれど、function startAll() { var agCtrl = document.getElementById("MoveSample"); Elli1 = agCtrl.content.findName("Ellipse1"); startTimer(); } 今度のサンプルでは 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 に戻す } }
プログラムの計算で動きを作るのって、けっこー頭を使うんだ。 |