人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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



1342752258
●拡大する

●質問者: fpu
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov

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


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


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 までは作ってもその先どうしたらいいのかわかりません…
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ