JavaScriptで複数のバーを伸ばすアニメーションを作成してみた。
メインループ用の処理ではカウントをして、カウントがある値になったら、別の処理をsetIntervalで動かすようにしています。メインループが長い間隔で動き、アニメーションは短い間隔で動かしたいときには、こうすれば良いですね。ただ、あまりsetIntervalで処理を登録していくと無駄が増えてくるので、同じ間隔でアニメーション処理を動かせばいいときは、専用の関数を1つだけ登録して、それに登録されたオブジェクトの更新処理をするように記述する必要があります。この例は間隔が長い処理では通信によるデータ更新をして、取ってきたデータを表示へ反映させるときにアニメーションをさせる必要があり、アニメーション処理の実行間隔は短い場合を想定しています。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>sample animation</title>
</head>
<body>
<div id="log" style="position:absolute;"></div><br/>
<div id="target1" style="position:absolute;">target1</div><br/>
<div id="target2" style="position:absolute; color: white; background-color: darkblue;">target2</div><br/>
<div id="target3" style="position:absolute; color: white; background-color: darkred;">target3</div>
<script type='text/javascript'>
var INTERVAL=1000;
var COUNT_MAX=30;
var target1 = document.getElementById("target1");
var target2 = document.getElementById("target2");
var target3 = document.getElementById("target3");
var current_width2 = 0;
var current_width3 = 0;
var target2_timer_id = 0;
var target3_timer_id = 0;
function log(message) {
document.getElementById('log').innerHTML = message;
}
var cnt=0;
function runner(time_value) {
if (cnt > COUNT_MAX) {
clearInterval(id);
return;
}
if (cnt == 5) {
var target2_timer_id = setInterval(function() {
current_width2 += 20;
target2.style.width = current_width2 + 'px';
if (current_width2 > 400) {
clearInterval(target2_timer_id);
}
}, INTERVAL/2);
}
if (cnt == 10) {
var target3_timer_id = setInterval(function() {
current_width3 += 20;
target3.style.width = current_width3 + 'px';
if (current_width3 > 800) {
clearInterval(target3_timer_id);
}
}, INTERVAL/10);
}
var v = cnt + ':' + time_value;
target1.innerHTML = v;
cnt++;
}
var id = setInterval(function() {
var time_value = (new Date()).getTime();
runner(time_value);
}, INTERVAL);
</script>
</body>
</html>
JavaScriptについては、下記の書籍の参考になるでしょう。
プログラミング言語一般については、下記が参考になるでしょう。
- クラスベースのオブジェクト指向プログラミング言語の基礎を学ぶには … 改訂版 基礎Java(CD-ROM付) (IMPRESS KISO SERIES)
- クラスベースのオブジェクト指向プログラミング言語を学ぶには … プログラミング言語Java (The Java Series)
- 関数型プログラミング言語を学ぶには … Scalaスケーラブルプログラミング第2版
- プログラミング言語の理論を学には … プログラミング言語の基礎概念 (ライブラリ情報学コア・テキスト)