WEBサイトでのアニメーションの種類を歴史順にまとめる
アニメーションといってもFlashのような派手な動きなのか、スマホでスライドナビを作るのか、jsでパララックスを作りたいのか、SVGのロゴをアニメーションさせたい等、場面によって向き、不向きがあると思います。以下アニメーション技法を歴史順？に特徴をまとめました。
GIFアニメーション
画像アニメーションとして古くからある手法。枯れた技術と思いきや最近はまたいろんな場所で使われ始めています。gifなので使い方によっては軽量で、photoshopで作れるという事もあって敷居が低いです。256色なので容量が軽く、ベタ色な物や、アイコンを動かすのに向く。また短めの動画をgif化しているサイト等もある。
Flash
アニメーションと言えばFlash。flasherと呼ばれる専門の方も少し前までいました。全ページflashのというサイトも多かったと思います。
iPhoneさえ発売されなければ今もアニメーションのスタンダードだったのではないかと思える程の滑らかさ、派手さを兼ね備えたダントツの表現力。やはり、キャンペーン系、ブランディング系サイトでは強い。現在でもWEBゲームなどで力を発揮している。
jQuery
WEBサイトでサクッとアニメーションするならこれでしょう。異なるブラウザ仕様の差異を埋めてくれるこのjQueryは今や読み込まれていないWEBサイトは無いでしょう。このjQueryのanimateを使ってアニメーションするのが汎用的で無難。
スプライトシートアニメーション(パラパラアニメ)
create.jsなどのフレームワークと一緒に使うケースが多いかもしれません。
ゲーム等のキャラクターの動きをつけるのによく使われています。使い道としては違いますが、以前ご紹介した「png、jpgアニメーション(Javascript + AfterEffects)でデバイス、ウインドウサイズに縛られないアニメーション」もこちらの一種。JS制御のパラパラアニメ。
CSS3アニメーション
css3のよさはflashに勝るとも劣らない滑らかさではないでしょうか？(デバイスの処理能力による)transformとkeyframeでアニメーションが作れるのでCSSソースだけで管理できるのも魅力です。ブラウザの種類等で使用できるプロパティに制限がかかるのが難点。
Canvasアニメーション
HTML5の出現と共に注目されたCanvas。JSフレームワークも多数出ていて作りやすくはなってきているけれどもCSS3と共にブラウザの種類等で制限がかかるのが難点。
SVGアニメーション
最近ではサイトロゴなんかのアニメーション等によく使われています。スクリプト系のロゴなんかの輪郭が動くといい感じですよね。また、画像が拡大、縮小されても劣化しないので、レスポンシブに最適です。ブラウザはIE9以降、モダンブラウザ、スマートデバイスと使用できるブラウザは広めです。以前ご紹介したSVGを使ったラインアニメーションの作り方2種で確認できます。
webGLを用いたアニメーション(three.jsなど)
ブラウザ上で3D表現が可能です。three.jsなどのライブラリを使って構築するのが今はスタンダード。動くブラウザはchrome,FFぐらいなのが難点(safariは設定を変えれば動く)
以上まとめでしたが、古ければ古い技術程ブラウザの影響を受けず、新しい技術ほど使える場面に制限があります。
(GIFアニメ、Flash、jQuery animate、スプライトシートアニメ等 この辺は汎用性が高く幅広いブラウザでで表現ができます。)
またスマホ、タブレット系ではCSS3が向いている印象です。jQueryなどではデバイスによってはカクつく場面もありますがCSS3は滑らかに動いてくれます。ただ基本的にはPCと同じような重い処理を掛けるのは無理があるので、使いどころは考えないといけません。
表現力はというとFlashなのは間違いありません。iPhone,iPadで動かないという現状Canvas,SVG,webGLがその表現力に変わるものになりつつあります。ただ、ブラウザの種類で表現の制限がかかりますのでその対応に手間がかかるのが現状です。
(本来IE8以下はサポートが切れIE9以降の対応でいいはずですが、実際にIE7対応の案件もまだある事をふまえ書いています。 2014年11月)
Related posts
