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

2017.07.22

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

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

じゅうたんホリホリ

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

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

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

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

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

そんな感じです。
　

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