WEB初心者必見！アニメーションの種類を5つご紹介
アニメーションの種類をご紹介します！
アニメーションの解説をするために、この記事ではアニメーションの種類についてご紹介します。
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を使用してアニメーションを作成することができます。
メリット
- マウスを使って要素を動かすことも可能
- グラフや表をアニメーションにできる
デメリット
- JavaSprictの知識が必要
- とても複雑なコードになる可能性大
Canvasは座標を使って細かい指示ができ、その中に画像を指定することもできます。
座標を使って表示されやすいグラフや表のアニメーションでよく目にすることがあります。
車やフィギュアなどの３Dモデルを３６０度から見せたいときなどに、比較的簡単に表示することができます。
専用のソフトを使うことでイラストからコードを書き出すこともできます。
おすすめの利用例
- グラフや表を動かしたいとき
- 三角や六角形半円などの図形を描きたいとき
- ３Dモデルを表示させたいとき
まとめ
今回はWEBアニメーションについて大きく５種類ご紹介しました。
それぞれのメリット・デメリットを把握した上で最適なアニメーションを使用することが大事です。
それぞれの難易度やある程度の制作期間を把握しておかないと、納期に間に合わないということも考えられます。。
まずは自分ができそうなアニメーションから作成してみてください。
まだ試したことのないアニメーションもこの機会に挑戦してみましょう♪
なにか新しい発見があれば嬉しいです！
最後までご覧いただきありがとうございました☆彡