読者です 読者をやめる 読者になる 読者になる

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アニメ化したもの。ウィンドウの配置でいくつか作ってみた。

f:id:ikeryou:20160901234451g:plain

f:id:ikeryou:20160901234627g:plain

f:id:ikeryou:20160901234628g:plain

f:id:ikeryou:20160901234632g:plain

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