うちのうさぎ、悪事編~JavaScriptでGIFアニメっぽいのを作った

JPEG画像をGIFアニメにするとファイルがでかくなる、と学んだので、こんどはJavaScriptを使ってみました。
素直に動画を撮れって? おんなじ動きを繰り返すのが面白いんじゃないですか。

※使用画像については、旦那のとちフォルダが火を噴きました。

スポンサーリンク

じゅうたんホリホリ

バリバリと勢いよく掘ります。実物はもっと速いです。じゅうたんが傷みそうです。

ケージをかじかじ

遊ぶ時間は終わりだよ。かじっても出さないよ。出さないからね!?

ちょっと大変だった

スクリプト書くのは楽しいけども、画像の加工が意外と面倒でした。
ビューアーで切り替えながら見ていると違和感がなくても、繋げて見るとブレてブレて仕方ない、ってのが多すぎ。アニメ化するなら、気合入れて連続シャッターで、カメラをできる限り固定して撮るべきなのでしょう。

ひとつめのホリホリは、比較的良さそうな写真を、うさぎの位置が合うように切り抜いて使いました。座卓の足とか、写り込んでいる物品を物差し代わりにして切り抜きます。元の画像をそのまま使うより、だいぶ動きが滑らかになりました。

二つ目のカジカジは、もとの画像そのままです。ちょっとズレます。

そんな感じです。
 

JavaScriptのソースが気になる方は、フレームのソースを見てみてください。画像をすべて重ねておいて、z-indexで切り替えています。
開発履歴が気になる方はこちらへどーぞ。うちの子サイトです。 → うさすくりぷと
 

関連記事

うさぎの鼻がピクピクするGIFアニメ作った
暑さのあまり変なもの作り始めました、文月です。 GIFアニメ、いっぺん作ってみたかったんです。思い立った日が吉日。 (写真は旦那・・・

コメント

スポンサーリンク