png、jpgアニメーション(Javascript + AfterEffects)でデバイス、ウインドウサイズに縛られないアニメーション
ここ最近(でもないか…)gifアニメで簡単なアニメーションやムービーを再生したりというサイトを見ると思います。
今日はそれをpngで、更にAfterEffectsのエフェクトを利用したアニメーション作成をしてみたいと思います。AfterEffectsはムービーエフェクト専門のソフトですので迫力あるアニメーションが作れます。
↓Gifアニメーションをうまく利用したサイトの紹介
http://www.infact1.co.jp/staff_blog/webmarketing/webdesign/3019/
なぜPNG,JPGアニメ？
FLASH、CANVAS、CSS3、WEBGL…などなど、どの方法も一長一短、どれが適しているかは状況、表現によりますがクロスブラウザでアニメーションさせる場合はブラウザ毎に処理を変えたりひと手間かかります。
でも画像のパラパラアニメーションならブラウザを心配する必要がありませんし、レスポンシブの際も画像を縮小、拡大すればいいだけです。
またgifアニメは256色しか使えませんがpngであれば非圧縮、jpgなら適当な圧縮率に出来るのため画質の表現は豊かになります。
ただpngやjpgはgifと比べると重いのでなるべく画像は小さめ、再生時間は短めを意識して作る事をオススメします。
制作の流れ
- 1.AfterEffectsで動画エフェクトを作る
- 2.png画像出力
- 3.画像圧縮
- 4.jsで操作
1. AfterEffectsで動画エフェクトを作る
今回はafterEffectsでエフェクト制作します。
afterEffectsは動画エフェクトを作れるソフトです。エフェクトを使うだけで簡単に迫力あるアニメーションが作れます。またtrapcode等プラグインも豊富です。エフェクトを極めたい方はその他チュートリアル系サイト等で調べてみてください。
コンポジションのフレームレートは30fpsで作成してみます。
30fps～24fps(滑らか – 粗い) / 1秒あたりのフレーム数
2. png,jpg画像出力
AfterEffectsで動画エフェクトが作成できたら次にこれを画像化します。
今回は画像の美しさを感じてもらう為にpngで吐き出します。
「コンポジション」→「レンダーキューに追加」で形式をjpg、pngに設定して「レンダリング」で書き出し出来ます。
3. 画像圧縮(pngの場合)&リネーム
jpgはAfterEffectsで書き出す時に圧縮率を選べますが、pngの場合は下記のようなWEBツールを使うと便利かと思います。(別に圧縮しなくてもいいですが、サイズは小さい方がいいでしょう)
また、次の行程のJSで操作する時に画像を連番にリネームしておく必要があります。
この辺はググれば沢山ソフトが出てくると思うので詳しく説明しませんがAdobe Bridgeで画像をリネームする場合は「リファインアイコン」押下 →「ファイル名をバッチで変更」で出来ます。
4. jsで操作
画像の制作が終わったらjsです。今回はプラグインを使っていますが
0からソースを組む場合はsetIntervalで切り替えます。
↓プラグイン
http://isthatclear.com/jquery/canimate/
↓オリジナルで組む場合(参考)
http://www.blinderhidden.com/parapara-animation-jquery-307.html
あとはパララックス等の任意のイベントに紐づけて使ってみてください。
※画像アニメーションなので実際に使う場合はページ読み込み時にプリロードなどの対応をしてください。
Related posts
