フロントエンド技術を学ぼう 2-12.Webアニメーションについて学ぶ

Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。

www.mojage.club

第22回はPart II: Learning Front-End Devから、12項のLearn Web Animationを紹介します。

Webアニメーションについて学ぶの説明です。

Sponsored Link

Webアニメーションについて学ぶ

日本語でよくまとまった学習リソースが見当たりませんでしたが、Flashが衰退してから現在主なWebアニメーション技術としてSVGアニメーションがあります。また、GIFアニメーションも最近見直されてきているとのこと。
SVGアニメーションを作成する方法は以下

  • HTML5&CSS3
  • JavaScriptやJavaScriptライブラリの使用
  • Illustratorなどのベクター画像描画ソフトウェア

本記事では、Illustratorなどのソフトウェアを使用したアニメーション以外のHTML, CSS, JavaScriptを使用したWebアニメーションについて学んでいきます。
また、CSSアニメーションを記述する際、ブラウザ毎のベンダープレフィックスも追記する必要があるかもしれません。その時間を短縮できる以下のJavaScriptライブラリを読み込んでおくようにしましょう。これは、アクセス元のブラウザに必要なベンダープレフィックスのみを自動的に追記してくれるライブラリです。
Prefix free: Break free from CSS vendor prefix hell!

CSSアニメーション(Keyframe Animations)

CSSアニメーションは、@keyframesプロパティを記述してアニメーションを制御する方法です。これは、始点を0%、終点を100%として、何%の時にこの状態であるというフレームを記述します。

See the Pen css keyframe animation test by mojage (@mojage) on CodePen.

CSSトランジション

CSSトランジションは、CSSプロパティが変化する際のアニメーションスピードを操作します。
※オンマウスで赤い四角と中の白い四角がアニメーションします。

See the Pen test css transition by mojage (@mojage) on CodePen.

MDNにあるとおりtransition-timing-functionではアニメーションスピードを自由に定義できるcubic-bezier()と、そのプリセット5つが使用できます。

ease は cubic-bezier(0.25, 0.1, 0.25, 1.0) と同等です。
linear は cubic-bezier(0.0, 0.0, 1.0, 1.0) と同等です。
ease-in は cubic-bezier(0.42, 0, 1.0, 1.0) と同等です。
ease-out は cubic-bezier(0, 0, 0.58, 1.0) と同等です。
ease-in-out は cubic-bezier(0.42, 0, 0.58, 1.0) と同等です。

アニメーションスピードの記述方法は、以下のx,y軸に対してベジェ曲線を数値で描くことによって可能です。

  • x軸が時間
  • y軸がアニメーションの進捗

これは以下の様なジェネレータを使用することで解決しましょう。
cubic-bezier.com

CSSアニメーションとCSSトランジションの比較

両者の比較ですが、殆どの場合CSSトランジションの使用で期待した表現を実装できそうです。

比較要素 CSSアニメーション CSSトランジション
起動トリガー なし(勝手に動き出す) あり(リアクティブ)
ループ あり なし
JavaScript制御 おすすめしない(記述が複雑になる) JavaScriptフレンドリー

JavaScriptアニメーション

JavaScriptアニメーションはコードによってアニメーションを制御するので、CSSを使用したアニメーションよりも自由な制御が可能になります。 これは、CSSのキーフレームアニメーションが「50%の時にこの位置、75%のときにこの位置、、」と決められた瞬間での位置同士を直線で結ぶ表現なのに対し、Math.cos()Math.sin()などによってキレイな放物線を描ける事などが挙げられます。

See the Pen requestAnimationFrame test by mojage (@mojage) on CodePen.

一般的な学習リソース

有料の学習リソース

Foundation HTML5 Animation with JavaScript [読み物][$]
(JavaScriptを使ったHTML5アニメーションの基礎)

Web Animation using JavaScript: Develop & Design (Develop and Design) [読み物][$]
(JavaScriptを使用したWebアニメーション:開発&デザイン)

標準仕様