fpu回答ポイント なしウォッチ 1
1342752258

JavaScriptでのアニメーションのためのデータ作成について、ヒントをください。


http://www.sublimetext.com/ こちらのページの上部に、HTMLのcanvas要素を利用したアニメーションがあります。
一枚の画像にアニメーションする箇所の断片をすべて詰め込んで(http://www.sublimetext.com/anim/command_palette_packed.png)、
command_palette_timeline=[{"delay":1811,"blit":[[0,0,800,450,0,0]]},{"delay":48,"blit":[[0,450,400,344,200,36],[66,982,63,15,0,36]]},{"delay":798,"blit":[]},{"delay":137,"blit":[[494,762,186,142,206,43],[239,505,42,111,552,131], ...}, ...]
こういった感じに、アニメーションするタイミングと画像の更新部分を指定したデータを用意して、ソース画像を切り出しながら再生しています。

このデータを制作する方法がわかりません。今自分でやろうとすると、一般的な画像編集アプリケーションを使って、手作業で画像をまとめたり座標を指定したりしか思いつきません。

上記のような、断片をまとめた画像と更新シーケンスのデータを作成するには、どのような方法があるでしょうか。
ツールやアルゴリズム等ヒントがありましたら教えてください。

ログインして回答する

みんなの回答

この質問へのコメント

コメントはありません

この質問への反応(ブックマークコメント)

質問の情報

登録日時
2012-07-20 11:44:18
終了日時
2012-07-27 11:45:04
回答条件
1人5回まで

この質問のカテゴリ

この質問に含まれるキーワード

JavaScript2781アルゴリズム292Canvas45HTML5036アプリケーション2247アニメーション326シーケンス12

人気の質問

メニュー

PC版