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

2011年5月12日

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

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

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

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

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

使い方

・jQuery必要です。
・アニメとか映像の連番を縦につなげた１枚絵が必要です。こんなん。
（これの用意が一番大変なんだけど、なんかいい書き出しの方法があるのかな？？）→ 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;　　　　←　終了フレーム。要は何枚の絵でできた１枚絵かってこと。

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

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

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

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

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

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

you

2011.07.04 追記

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