webの素材と技術でGIFアニメを作ってみる 2

webの技術でGIFアニメを作ってみる！
今回はnode.js+socket.ioを使って、複数のウィンドウ、複数のPC(スマフォ)で表示されるアニメーションをコントロールした。

コントロールしたアニメーションはコチラ

http://ikeryou.jp/test/gif2/1/

何かに追っかけられてる人！
こちらスマフォでも見せたかったのでHTML+CSS+Javascriptで作成。
CSS3のtransform:rotate()とかをごにょごにょした。

まずはこの人物が複数のウィンドウをまたいで駆け回るGIFアニメを作成。
node.js+socket.ioを使用し、FPS60(たぶん出てない！)で各ウィンドウに「アニメーションを一回更新せよ」みたいな内容でemit()していった。
それによってウィンドウをまたぐ瞬間とかもきれいにできたかと。

こちらがGIFアニメ化したもの。ウィンドウの配置でいくつか作ってみた。

最終的にGIFアニメになるとなんか楽しい！

webの素材と技術でGIFアニメを作ってみる

最近GIFアニメを作ってみたいと思っていて、けど僕はAFとかで素敵な映像は作れないので、普段からなじみのある素材(web)と技術(HTML&Javascript)で作ってみる事にした。

なんか派手なのを作りたい！

とりあえずこいつをベースにする。なんかウネウネさせてみる。
重いけど気にしない。

GIFアニメテスト1

素材はON/OFFのデザインがあるチェックボックスとラヂオボンを採用。
ベースアニメーションで使ってる素材をチェックボックス、ラヂオボタンに変更(ベースではbackgroundColor:#000, opacity:0~1とかやってる)。
こいつを動画キャプチャする

GIFアニメテスト3

そしてこれをめいっぱい敷き詰めてみたのがコチラ

GIFアニメテスト6

ちょっとたのしい