アニメーションgifならぬアニメーションjpg/png

2011.05.12 Animation HTML5/JavaScript 

今日(2011/5/11)のgoogleロゴはダンスのアニメーションになってて、
それがとてもキレイでかっこいいアニメーションだったので、
自分もアニメーション用のjsをちょこっと書いてみた。

「Google」の6文字が踊る――マーサ・グレアムさん生誕記念のホリデーロゴ

この人がロゴのアニメーション作ってた人。

ほんと細部までキレイなアニメーション。このアニメーターのモーション技術すっげぇ。。

んで、googleロゴの中身見てみると、gifアニメかと思いきやpngのポジションをずらす方法を取ってて
これがネタばらしの一枚絵

そういえば、一昨日公開された、thaのFRAMED*のページでも使われてたなぁ、これ。と思い、
普通にjs書ける人には一瞬でできるだろうから関係ないけど、
この1枚絵さえ作れれば、誰でもアニメーションgifならぬ、
アニメーションjpgとか、アニメーションpngつくれるよね
ということでjs書いてみました。

使い方

・jQuery必要です。
・アニメとか映像の連番を縦につなげた1枚絵が必要です。こんなん
(これの用意が一番大変なんだけど、なんかいい書き出しの方法があるのかな??)→ 2011.07.04 追記 なかったのでflashで書き出しツールつくった。

後はヘッダーに以下スクリプト。

<script src="jqueryまでのパス" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
var id  = "animation_target";
var width  = 100;
var height = 100;
var fps    = 30;
var src    = "./sample.jpg";

var frame = 0;
var max_frame = 30;

var onceFlg = false;

$(document).ready(
	function (){

		$("#"+id).css({
			"background":"url("+src+")",
			"width":width,
			"height":height
		});

		var interval = 1/fps*1000;
		animation = setInterval(intervalEvent, interval);
});

function intervalEvent(){
	$("#"+id).css({
		"background-position":"0 "+ -height * frame +"px"
	});
	frame++;
	if(frame>=max_frame){
		if(onceFlg) clearInterval( animation );
		frame = 0;
	};
}
</script>
</header>

んでhtml内には空divとかにid指定するだけでおk。

<body>
<div id="animation_target"></div>
</body>

では簡単にパラメータ説明を。

var id = “animation_target”; ← divに指定したid名
var width = 100;      ← アニメーションの幅
var height = 100;      ← アニメーションの高さ
var fps = 30;       ← アニメーションのfps (Frame Per Secondね。何それ?って人はこっち。)
var src = “./sample.jpg”;  ← 1枚絵までのパス

var frame = 0;       ← 開始フレームなので0のままでおk
var max_frame = 30;    ← 終了フレーム。要は何枚の絵でできた1枚絵かってこと。

var onceFlg = false;    ← ループさせたくない、1回で終わらせたい人はtrueに。

で、実際にはこんな感じ。



おお、なんか滑らか!!w
(よく見ると並べるときに1pxズレたりしてて、がたついてますね。。w)
で、これが作った1枚絵。

今回はyoutubeにあったフリー映像(25s辺り)をPremiereで連番jpgに書き出して、
Photoshopで整列&一括色補正。そのまま1枚絵としてjpg書き出し。って方法だったのだけれど、
ここの書き出しでいい方法があるなら是非教えて下さい!!orz

と、まぁあの素晴らしいアニメーションが描けないと意味ないですよね、、w
jsにする迄もなかったかもですが。。orz

にしてもGoogleのは1枚絵のpngでブロックの連番を行で分けて、
止め絵を残して(透過pngかな?)文字を作っていくっていう素晴らしいアイデア。。
やっぱGoogle△ー!

you

2011.07.04 追記

上記の連番jpgを用意するのがとても面倒だと思うので、flashで書き出しツールをつくってみたよ。こっち

© rettuce.com