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], ...}, ...]
こういった感じに、アニメーションするタイミングと画像の更新部分を指定したデータを用意して、ソース画像を切り出しながら再生しています。

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

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

回答の条件
  • 1人5回まで
  • 登録:2012/07/20 11:44:18
  • 終了:2012/07/27 11:45:04

回答(1件)

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932012/07/20 17:56:38

Sublime Forum • View topic - How was frontpage screencast created?
フォーラムにありました。pythonで自作したようです。
一枚の画像にまとめるのはcss spriteでよくやりますよね。


参考になるかもしれないリンク

id:fpu

ありがとうございます。作者がブログに書いてくれるようなので期待して待ってみます。
"a custom Python program that processes a series of regular .png files into a (considerably smaller) packed one. "
自分はPythonちょこちょこデータ加工に使ったりする程度ですが、series of regular .png files までは作ってもその先どうしたらいいのかわかりません…

2012/07/20 21:16:33

コメントはまだありません

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

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません