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

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

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

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.

一般的な学習リソース

Learn Web Animation [読み物 & 視聴]
(Webアニメーションを学ぶ)
State of the Animation 2015 [視聴]
(2015年のアニメーション事情)
Create Animations in CSS [読み物 & 視聴]
(CSSでアニメーションを作成する)
Learn to Create Animations in JavaScript [読み物 & 視聴]
(JavaScriptでアニメーションを作成する方法を学ぶ)