はじめに
今回は、Webサイトにおけるアニメーションの効果、役割についてまとめていきます。基本を押さえて、今後どんなサイトでも動きを付けられる＆対応できるよう学んでいきます。
Webサイトにおけるアニメーションの役割とは？
Webサイトにおけるアニメーションの役割は、ユーザー体験を向上させ、サイトのインタラクティブ性や視覚的魅力を高めるために非常に重要です。具体的には、以下６つの役割があります。
1. ユーザーの注意を引く
アニメーションは、重要な情報や機能にユーザーの視線を誘導するために使われます。ボタンのホバー効果や通知のスライドインなど、ユーザーに特定のアクションを促すための視覚的なヒントとして役立ちます。
2. ナビゲーションの改善
ページ遷移やメニューの表示など、アニメーションはサイト内の動きをスムーズにし、ユーザーが操作しやすくする役割を果たします。
3. フィードバックの提供
アニメーションは、ユーザーの操作に対してリアルタイムのフィードバックを提供します。例えば、ボタンをクリックした際に色が変わったり、フォーム送信後にスピナーが回ったりすることで、操作が成功したかどうかを視覚的に伝えることができます。
4. 視覚的なストーリーテリング
アニメーションは、ブランドのメッセージやストーリーを効果的に伝えるための手段として使われます。ウェブサイトの背景やヘッダー部分に動きを取り入れることで、ユーザーに魅力的な体験を提供し、ブランドの印象を強化します。
5. ページの読み込みや待機時間の軽減感
ページがロード中の待機時間をアニメーションでカバーすることで、ユーザーの離脱を防ぎます。ローディングアニメーション（例：スピナーや進捗バー）は、ユーザーに処理が進行中であることを示し、待つことへのストレスを軽減します。
6. コンテンツの理解を助ける
動的なインフォグラフィックや、アニメーションを使ったチュートリアルは、静的なテキストよりも情報を効果的に伝える手段です。ユーザーが視覚的に内容を把握しやすくなるため、複雑な内容を簡潔に説明する際に役立ちます。
アニメーションの基本
JavaScriptのWeb Animations APIは、ウェブ上でアニメーションを直接作成・制御できるAPIです。これを使うと、CSSアニメーションやJavaScriptベースのアニメーションよりも柔軟で強力なアニメーションが可能になります。具体的には、HTML要素に対して時間経過に応じてスタイルを変化させることができ、アニメーションの再生、停止、逆再生、スピード調整、進行度の取得や変更などが行えます。
主な３つの特徴
JavaScriptでアニメーションを行う際に３つの特徴があります。それぞれの使い方、役割について以下にまとめました。
keyframes
キーフレームアニメーションとは、要素のスタイルをキーフレームで定義し、その間を補間してアニメーションを作成。
再生制御
アニメーションの開始、停止、一時停止、再生速度変更などが簡単に制御できる。
プログラム的な操作
JavaScriptで細かい制御が可能。例えば、アニメーションの進行状態を取得したり、イベントに応じてアニメーションを動的に変更することができる。
例）
See the Pen 下から文字をフワッと表示させる by Uka Suzuki (@uukasuzuki_) on CodePen.
このコードは、Web Animations APIを使って#headingというIDを持つ要素にアニメーションを適用しています。具体的には、要素が「下からフワッと現れながら、不透明度が0から1になる」アニメーションを定義しています。
動きの詳細を加える
See the Pen Untitled by Uka Suzuki (@uukasuzuki_) on CodePen.
JavaScriptのコード解説
// Web Animations APIの基本の書き方
const heading = document.querySelector("ID名");
// 動かす内容(キーフレーム)の指定
const keyframes = {
opacity: [0, 1],
translate: ["0 50px", 0],
};
// 動きの詳細(タイミング)指定
const options = {
duration: 2000,
easing: "ease",
};
heading.animate(keyframes, options);
- heading.animate(keyframes, options);は、animate() メソッドを使って、heading要素に対して指定したキーフレーム（keyframes）とオプション（options）でアニメーションを実行します。
- 要素が最初は透明で、下から50pxの位置にあります。2秒かけて、要素は不透明度が0から1に変化し、同時にY軸方向に50px移動して元の位置に戻ります。easeによって、アニメーションの動きは最初と最後がゆっくり、中間が速い滑らかな動きになります。
指定できる色々なプロパティ
delay
delayとは、アニメーションの開始を遅らせる時間のことを指します。整数値のミリ秒で記述するので、１秒の場合１０００と記述します。
direction
directionとは、アニメーションを実行する方向のことをいいます。
| 値 | 意味 |
|---|---|
| normal | 通常の方向で再生する。 |
| alternate | 奇数回で通常、偶数階で反対方向に再生する。 |
| reverse | 逆方向に再生する。 |
| alternate-reverse | alternteの逆方向に再生する。 |
duration
durationとは、アニメーションの再生時間のことを指します。これは必須項目で、整数値を記述します。
easing
easingとは、アニメーションが変化する速度やタイミングを指します。
| 値 | 意味 |
|---|---|
| linear | 一定の速度で変化する。 |
| ease | 開始時と終了時は緩やかに変化する。 |
| ease-in | 最初はゆっくり、だんだん速く変化する。 |
| ease-out | 最初は速く、だんだんゆっくりと変化する。 |
| ease-in-out | 開始時と終了時はかなり緩やかに変化する。 |
| steps() | 段階ごとに変化する。 |
| cubic-bezier() | ベジェ曲線の座標に沿って変化する。 |
fill
fillとは、アニメーションの再生前後の状態を指します。
| 値 | 意味 |
|---|---|
| none | なし（初期値） |
| forwards | 再生後、最後のキーフレームの状態を保持する。 |
| backwards | 再生前、最初のキーフレームの状態を適用する。 |
| both | forwardsとbackwardsの両方を適用する。 |
「iterations」は、アニメーションを繰り返す回数です。無限ループを繰り返す際に指定します。
色んな見出しパターン
背景が伸びる見出し
See the Pen Untitled by Uka Suzuki (@uukasuzuki_) on CodePen.
ふよふよ動く見出し
See the Pen ふよふよ動く見出し by Uka Suzuki (@uukasuzuki_) on CodePen.
JavaScriptのコード解説
const heading = document.querySelector("#heading");
const keyframes = {
borderRadius: [
"20% 50% 50% 70%/50% 50% 70% 50%",
"50% 20% 50% 50%/40% 40% 60% 60%",
"50% 40% 20% 40%/40% 50% 50% 80%",
"50% 50% 50% 20%/40% 40% 60% 60%",
],
};
const options = {
duration: 8000,
direction: "alternate",
iterations: "Infinity",
};
heading.animate(keyframes, options);
- const heading = document.querySelector("#heading");は、id="heading" を持つHTML要素を選択し、headingという変数に代入しています。これにより、#heading要素にアクセスできるようになります。
- const keyframes = { ... }の中身、boraderRadiusの各キーの値は、「左上 右上 右下 左下 / 上左 上右 下右 下左」の順で変化し、変形する形状がアニメーションで表現されます。
- const options = { ... }では、アニメーションのオプション設定を行っています。duration: 8000 は、アニメーションが1サイクルするのにかかる時間（8秒）をミリ秒で指定しています。
direction: "alternate"は、アニメーションが交互に再生されることを意味します。つまり、最初のキーから最後のキーまで行った後、逆方向に戻ります。
- heading.animate(keyframes, options);のanimateメソッドは、heading要素に対して、指定した keyframesとoptionsに基づいたアニメーションを実行します。このコードを使うと、#heading要素が異なるborder-radiusの形に変形しながらアニメーションし、それが無限に繰り返される動きを作り出します。
まとめ
今回はJavaScriptのAPIを使って、Webサイトでよく見かけるアニメーションを作りました。次回は、スクロールすると画像が表示される仕組みについて復習していきます。