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アニメになるとなんか楽しい!