FPSとフレームを指定して、なんか動かす Movietime.js を作りました。

Timeline.js って名前にしようとしたら、同じような内容で、同じようなのがあったので笑った。

http://kjirou.net/main/public/js/lib/timeline/test/index.html

で、上記と何が違うかというと、
FPS（Frame Par Seconds） を指定して、
Flashみたいに、特定のフレームになったらなんかを表示するような事ができます。
ちなみに、ちゃんとFPSとか計ってないから、ずれたりしたらごめんね。

jsdoit にコードをアップしました。
なんか、前に作ったアカウントがどのOpenIDプロバイダで登録したかわからなくなったので、
仕方がないからpsychedesire1というアカウントを作ってやりました。

デモでは、指定したフレームが経過したら、
文字が太くなります。



test2 が二番目に来てるけど、500フレーム経過したら動いてねって指示をしているので、
一番最後に動きます。
そこら辺は、機能として、前回の経過フレームに加算する方法で動かすか、
それともそのままの経過フレームで動かすかを選べるようにしたほうが良いかなー。

そのままの経過フレームで動かすほうがよいメリットは、
コードを書き換えなくても、メソッドチェーンのケツにくっつければよいという点。

　hoge.next(0,func1).next(150,func2).next(200,func3);
　0フレーム目→150フレーム目→200フレーム目

となんか作ってて、100フレーム目にもアクション追加したいよ！
ってなった時に、普通にメソッドチェーンのケツに新しいアクションを追加すればよいだけ。

　hoge.next(0,func1).next(150,func2).next(200,func3).next(100,func4);
　0フレーム目→150フレーム目→200フレーム目→100フレーム目




前回の経過フレームに加算する方法だと、

　hoge.next(0,func1).next(150,func2).next(50,func3);
　0フレーム目→150フレーム目(150を指定)→200フレーム目(50を指定 200-150 = 50だから)

と作ってて、100フレーム目にもアクションを追加したいよ！
ってなった時に、

　hoge.next(0,func1).next(100,func4).next(50,func2).next(50,func3);
　0フレーム目→100フレーム目(100を指定)→150フレーム目(50を指定)→200フレーム目(50を指定)

って感じで、書き換えが頻繁になる気がする。
結構、動画を作る立場で考えるに、こういう計算作業は極力やりたくないものでござるので、
あまり経過フレーム加算のパターンを使うことは少ないかなーとか重いつつ。


でもまぁ、メインでフレーム数を管理する変数を用意すれば良いだけなので、
機能を追加するのは、たいした問題ではないのだけれども。
というわけで、早速直した。
Forkしたぜっ！イエイイエイ！



全部作っても一時間もかからなかったぜーい。
動画メインのFlasherもHTML5とかでなんかやる時に、使いやすいと思いますよ。
参考にしたブログ。

メソッドチェーンの作り方 - あと味
http://taiju.hatenablog.com/entry/20100307/1267962826