WEB初心者必見！アニメーションの種類と始め方
今回はアニメーションを始めるにあたって、アニメーションの種類と始め方についてご紹介します。YouTubeの需要が高まる近年において、アニメーションは需要が増しています。海外ではすでにアニメーションの地位は高いものにあり、日本においても高まる可能性があります。アニメーションの始め方といっても種類がいくつかに分けられます。今回はWEBアニメーションに絞ってご紹介します。
① CSS3アニメーションの始め方
cssを利用して要素をアニメーションさせる技術のことをいいます。 TransitionとAnimationの２つの機能で実装されます。
メリット
・HTMLとCSSのみで実装可能
・JavaScriptができなくても大丈夫
・パフォーマンスを維持させながら実装可能
デメリット
・複雑な動きが苦手
CSSはHTMLで入力した要素に対して、色や大きさ配置などの細かい指示を付け加えるためのスタイルシートのことです。CSS3の新しい機能として、より複雑な動きを加えることができるようになりました。
とは言っても、これまで使用していたCSSと同様のスプレッドシートに加えることで使用できます。JavaScriptが難しく、手が出せなかった方にも簡単にアニメーションが作ことができるようになりました。
おすすめの利用例
・上下左右への単純移動
・hoverで変化を少し加えたい時
・WEBページ内で同じ動きをいくつか入れたい時
② DOMアニメーションの始め方
JavaScriptを用いて作る一番基礎的なアニメーション技術のことをいいます。HTML５が注目を浴びると同時に、WEB標準に準拠したアニメーション方法として、再度需要が高まっています。
メリット
・HTMLとJavaScriptのみで実装可能
・複雑な動きが得意
・ほとんどのブラウザで実装可能
デメリット
・コードが複雑になりやすい
・初心者にはほぼ不可能
基本的にはCSSのみで実装できないような、バウンス、停止、一時停止、巻き戻し、スローダウンなどの複雑な動きを作成したいときに使用します。最近では、WEBサイトに複雑な動きや遊び機能をつけることが必須となりつつあるので、高度な動きをさせたいときには使用することが望ましいでしょう。JavaScriptとCSSを組み合わせることで、複雑なコードをある程度短縮しながら作成することができます。
それぞれのメリットを知ることで上手く使いこなしていきましょう。
おすすめの利用例
・オープニングなどの複雑で滑らかな動きを作るとき
・クリックで変化を付けたい
・多くのブラウザで表示させるとき
③ GIF・APNGアニメーションの始め方
アニメーション動画を表示できる画像のファイルフォーマットです。動画でありながら、画像としてWEBサイトに利用することができます。
メリット
・画像一枚で完結できる
・レスポンシブ調整の必要がない
・専用ソフトが使えれば作成可能
デメリット
・専用のソフトが必要
・制作に少し時間がかかる
GIFアニメーションは従来からよく使用されてきましたが、近年ではAPNGアニメーションが注目されています。APNGはブラウザベンダーのMozillaが提供している新しい規格のアニメーションです。GIFアニメーションは色数の制限や画質の悪さなどのデメリットが多かったのですが、そのデメリットを払拭したAPNGは低容量で高画質のアニメーションを作ことができるとかなり期待されています。
おすすめの利用例
・YouTubeなどに使用したいとき
・短いアニメーションを繰り返し表示させたいとき
④ SVGアニメーションの始め方
SVGはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略で、ベクターデータで構成される画像形式です。
メリット
・拡張できるため、大きいサイズで表示できる
・文書で簡単に制作ができる
・CSSやJavaScriptと組み合わせて自由度の高い制作ができる
デメリット
・表示内容が多いときにデータが重くなる場合がある
・コードが長くなる
SVGアニメーションは開発を重ねるごとに、高度な技術が追加されていますが、ユーザーがその技術を十分に活かすことができていないのが現状です。まだまだ発展途上な技術なだけに、極めると競争率は少ない分野でもあります。ロゴや簡単なオープニングにしか使用したことはありませんが・・・これからのインフラの開発に期待していきたいですね。
おすすめの利用例
・サイトのロゴやタイトルなど
・大きな図形を動かしたいとき
⑤ Canvasアニメーションの始め方
HTML５から導入された、WEB上で図形を描くことのできる技術です。
JavaSprictを使用してアニメーションを作成することができます。
メリット
・３Dなどの複雑な物もできる
・マウスを使って要素を動かすことも可能
・グラフや表をアニメーションにできる
デメリット
・JavaSprictの知識が必要
・とても複雑なコードになる可能性大
Canvasは座標を使って細かい指示ができ、その中に画像を指定することもできます。座標を使って表示されやすいグラフや表のアニメーションでよく目にすることがあります。車やフィギュアなどの３Dモデルを３６０度から見せたいときなどに、比較的簡単に表示することができます。専用のソフトを使うことでイラストからコードを書き出すこともできます。
おすすめの利用例
・グラフや表を動かしたいとき
・三角や六角形半円などの図形を描きたいとき
・３Dモデルを表示させたいとき
⑥ まとめ
いくつかアニメーションの始め方と種類をご紹介しましたが、メリット・デメリットを把握した上で最適なアニメーションを使用することを強くお勧めします。それぞれの難易度やある程度の制作期間を把握しておかないと、納期に間に合わないということも考えられます。。
まずは自分ができそうなアニメーションから作成してみてください。新しい発見があれば嬉しいです。
最後までご覧いただきありがとうございました。