このページの本文へ

「動き」はどの技術で実装すべきか？ Web Animations APIの登場で常識が変わる

2016年10月28日　04時32分更新

文●Dudley Storey

  • この記事をはてなブックマークに追加
本文印刷
CSS AnimationsやTranstions、Canvas、JavaScriptによるDOM操作など、Webアニメーションの実装にはさまざまな手法がありますが、決定版となる新しいJavaScript APIの策定が進んでいます。CSSアニメーションのスペシャリストであり、the new codeを運営するDudley Storeyさんによる特別寄稿です。

従来のWebアニメーションの問題を解決するAPI

Webにおけるアニメーションは、性質のまったく異なる4つのグループに分けられます。

  • CSS TransitionsとAnimationsはパフォーマンスに優れ、キーフレームを提供しているが、構築に膨大な時間を必要とし、基本的な開始と終了の制御のみをCSSとJavaScriptで提供している。UIの応答、ループ、ページ読み込みなどのシンプルなアニメーションに利用される傾向がある
  • SMIL（同期マルチメディア統合言語）はとても強力だが、非常に書きづらく、ブラウザーサポートが不完全だ。また、もっぱらSVGコンテキスト内の要素の制御に限られる
  • JavaScriptは要素を直接制御できるが、キーフレームやイージングなどのデザイナーフレンドリーな関数はなく、ネイティブ最適化やCSSのパフォーマンスが欠けている。Canvas APIのアニメーションはすばらしいものの、アニメーションの基礎的な理解が必要であり、任意のDOM要素をアニメーション化できない
  • GreensockのようなJavaScriptのアニメーションフレームワークは、JavaScriptでアニメーションするときの従来の欠点を補うものだが、ページの読み込み、パフォーマンス、新しい構文の学習といった、すべてのフレームワークが抱える短所がある

Web Animations APIは、これらの欠点を解消しようというものです。ネイティブのキーフレームとイージング、JavaScriptでの要素の制御、CSSと同等のパフォーマンスなど、最高の機能を1つの統一した仕様に統合しようとしています。コアコンポーネントはすでにChromeとFirefoxでサポートされており、SafariとEdgeでも開発が進行しているほか、堅牢なポリフィルが利用可能です。Webページをすばらしいものとするために、Web Animations APIについて真面目に考える、良い良いタイミングなのです。

シンプルなキーフレームアニメーション

キーフレームアニメーションのもっとも簡単な例として、赤いボールの要素がページの端から端へ移動するサンプルを見てみましょう。これから紹介するサンプルでは、手法に関わらず同じHTMLの要素を使います。

<div id="redball"></div>

最初に、アニメーションをCSSで実装すると、次のようになります。

body {        
 margin: 0;      
 background: #000;       
 overflow: hidden;       
 min-height: 100vh;      
}        
#redball {      
 background: red;        
 width: 30vmin;      
 height: 30vmin;         
 border-radius: 50%;         
}

要素がビューポートのサイズに対応して常に対応するように、単位にはvminを使いました。

ボールをページの端から端へ移動させるのに必要なCSSは、次のようになります。

@keyframes moveBall {         
 from {      
 transform: translateX(-20vw);       
 }       
 to {        
 transform: translateX(100vw);       
 }       
}

このアニメーションは、赤いボール要素の宣言から呼び出されます。

#redball {        
 animation: moveBall 3s infinite;        
}

CodePenに表示される結果は次のとおりです。

イージング（開始で加速、終了で減速）が自動的に組み込まれていることなど、この時点でアニメーションについて注意すべき点がいくつかあります。

WebアニメーションAPIによる実装

HTMLと初期スタイルを維持しながら同じことを実現するために、CSSアニメーションを削除し、Web Animations APIを使ってJavaScriptに置き換えてみましょう。

var moveBall = document.getElementById('redball').animate([{      
 transform: 'translateX(-20vw)'      
}, {         
 transform: 'translateX(100vw)'      
}], {        
 duration: 3000,         
 iterations: Infinity,       
 easing: 'ease'      
});

アニメーションの構文はCSSとほぼ同じですが、キーフレームを表す配列を持つオブジェクトとして表していることが分かります。キーフレームでtoやfromを明示的に宣言する必要はありません。宣言もできますが、JavaScriptが自動的にキーフレームを均等に割り当てます。

この時点ではアニメーションはまだ再生されません。CSSのように呼び出す必要があります。

moveBall.play();

なお、従来はtransitionsの値だったCSS translate構文は次のようなプロパティとして使えるようになりました。キーフレームの部分は今後のブラウザーでは、もっと簡単になります。

translateX: -20vw;

新しい構文はChrome Canaryではすでに提供されていますが、すべてのモダンブラウザーで使えるようになるまでには1年から2年ほどかかるでしょう。
スクリプトについて注意する点がほかにいくつかあります。

  • JavaScriptは、CSSで標準的な「秒」ではなく「ミリ秒」単位でアニメーションのタイミングをとる（msがタイミング値の末尾にある場合はCSSでもミリ秒単位を利用できる）
  • Web Animations APIは、（別々に定義されているときの）interation-countのCSSプロパティではなく、反復回数をiterationsとして指定する。キーワードはCSSのinfiniteではなく、繰り返し回数のInfinity（最初のIは大文字）
  • Web Animations APIのデフォルトのイージングはlinearなので、デモではCSSアニメーションのデフォルト値をeaseと指定している

実行結果は、CSSアニメーションと基本的には同じです。

もちろん、JavaScriptでこのようなCSSアニメーションをコピーするだけでは、スクリプト言語のダイナミズムを最大限に発揮できません。そこで、フル機能のアニメーションを作成します。

画像を使った本格的なアニメーション

Stack of images animated using the Web Animations API

以前、私はテーブルの上でトランプを素早く動かすような、Webページ上で一連の画像を扱うアニメーション作成に興味がありました。従来のCSSで各カードに個別のアニメーションを描くのはかなり時間がかかり、結果はいつも同じようなものです。そこで、その代わりとなる最適なツールとして、Web Animations APIを使うことにしました。

プログレッシブカードのためのCSS

JavaScriptやWeb Animations APIが有効かどうかに関係なく画像を表示したいので、ページに一連の画像を追加することから始めます。

<div class="shuffle expose">
  <img src="bridgefog.jpg" alt>
  <img src="daisyface.jpg" alt>
  <img src="drowninghand.jpg" alt>
  <img src="firefigure.jpg" alt>
  <img src="shellhand.jpg" alt>
  <img src="waterfeet.jpg" alt>
</div>

コードを分かりやすくするため画像のalt値は空のままにしています。公開版では説明文が挿入されます。写真は.tafo.によるもので、Creative Commons Attribution-NoDerivs 2.0 Generic licenseのもとに使用しています。

JavaScriptが無効状態のときには、画像にごくわずかなアニメーションを加えるために、CSSを追加します。

@keyframes reveal {
  to {
    opacity: 1;
  }
}
.shuffle {
  min-height: 100vh;
  position: relative;
}
.shuffle img {
  width: 33%;
  opacity: 0;
}
.expose img {
  animation: reveal 1s forwards;
}

個々の画像の表示を次のように少しずつ遅らせます。

.expose img:nth-child(1) { animation-delay: 1s; }
.expose img:nth-child(2) { animation-delay: 2s; }
.expose img:nth-child(3) { animation-delay: 3s; }
…

当然ですが、これらの宣言はSassやほかのプリプロセッサーで自動化できます。

親要素にwebanimのclassがある場合、画像にはボーダーが表示されます。JavaScriptで次のようなスタイルが適用されます。

div.webanim img {
  border: 1.4vw solid #eee;
}

JavaScriptの追加

ページの最後にスクリプトを追加します。アニメーションはランダムな値を必要とするので、次のように値を生成する関数を作成します。

function getRandom(min, max) {
  return Math.random() * (max - min) + min;
}

インクリメント変数を設定して、画像のコンテナとその中のすべての画像を収集します。

var imgContainer = document.querySelector(".expose"),
    imgSeq = document.querySelectorAll(".shuffle img"),
    i = 1;

それから、コンテナにexposeクラスがある場合はクラスを削除します。画像を不透明度0のままにし、CSSアニメーションを非アニメーションするためです。

imgContainer.classList.remove("expose");
imgContainer.classList.add("webanim");

webanimクラスは画像にボーダーを入れて配置します。

スクリプトの大部分は関数内のforEachループで発生します。David DeSandroが作成した優秀なimagesLoadedスクリプトを使用し、（DOMに表示されるだけの画像ノードだけでなく）すべての画像データが読み込まれていることが確実になった時点で、関数を呼び出します。

function racknstack() {
  Array.prototype.forEach.call(imgSeq, function(photo) {
    setTimeout(function() {
      photo.style.position = "absolute";
      photo.style.width = getRandom(33, 45) + "%";
      photo.style.left = getRandom(-5, 65) + "%";
      photo.style.top = getRandom(-6, 60) + "vh";
      var animate = photo.animate([{
        opacity: '0',
        transform: 'rotate(' + getRandom(-12, 12) + 'deg) scale(1.2)',
        boxShadow: '0 0 12px 12px rgba(0,0,0,.3)'
      }, {
        opacity: '1',
        transform: 'rotate(' + getRandom(-8, 8) + 'deg)',
        boxShadow: '0 0 6px 6px rgba(0,0,0,.3)'
      }], {
        duration: 2000,
        fill: 'forwards'
      });
    }, 1800 * i)
    i++;
  })
}

前述のように、手始めに次のような関数を呼び出す必要があります。

imagesLoaded(imgSeq, racknstack);

結果は次のようになります。

関数は次のように動きます。

  • 各画像を絶対位置に設定
  • 画像にランダムな幅を生成（パーセンテージを使用すると、可変でレスポンシブなまま画像を維持）
  • 画像のランダムな位置を生成（実行できる負の位置を含む。ビューポートの端からわずかに見えるだけという可能性があるということ）
  • Web Animations APIを使用して写真をアニメーション化。キーフレームは画像を回転させながら不透明度0から完全に表示されるまでフェードインする

アニメーションが完了した最終状態に画像を残したいので、forwardsへの入力が必要です。

ますます強力に

Web Animations APIの開発は急速に進んでいます。

最後に

Web Animations APIは、特殊で宣言型でステップバイステップのCSSアニメーションを、表現力とパフォーマンスに優れたアニメーションを可能にする動的で命令型のJavaScriptによるアプローチへ移行させるものです。

※本記事は、ゲストライターのDudley Storeyによるものです。SitePointのゲスト投稿では、JavaScriptコミュニティの著名な執筆者や講演者の魅力的なコンテンツの提供を目指しています。

（原文：Bringing Pages to Life with the Web Animations API）

［翻訳：柴田理恵／編集：Livit］

Web Professionalトップへ

WebProfessional 新着記事

Backlogは未来を楽にする　最初は手間だけど、1年後は使った自分を褒めたくなる

ビジネス

Backlogは未来を楽にする　最初は手間だけど、1年後は使った自分を褒めたくなる

　2024年12月14日、BacklogのユーザーグループであるJBUG（Japan Backlog User Group）は「Backlog World 2024 in YOKOHAMA」を開催した。Webプロジェクト、イベント運営、新規事業、オンボーディング、ミーティング、ワークスペース統合など多種多様なBacklog活用事例が披露された。

  • 0
  • 0
自動アップデートやマルウェア対策を盛り込んだ「KUSANAGI Security Edition」発表

WebPro

自動アップデートやマルウェア対策を盛り込んだ「KUSANAGI Security Edition」発表

2024年10月9日、プライム・ストラテジーはセキュリティに特化したWeb運用環境として「 KUSANAGI Security Edition」を発表した。

  • 0
  • 0
さくらのレンタルサーバの新機能として「新さくらのブログ」を開始

WebPro

さくらのレンタルサーバの新機能として「新さくらのブログ」を開始

さくらインターネットは、「さくらのレンタルサーバ」の新機能として「新さくらのブログ」を提供開始した。

  • 0
  • 0
コンサルのレポート説明付き　プライム・ストラテジーがWordPress脆弱性診断開始

WebPro

コンサルのレポート説明付き　プライム・ストラテジーがWordPress脆弱性診断開始

プライム・ストラテジーは、WordPress簡易脆弱性診断サービスを開始した。

  • 0
  • 0
ガバクラの足がかり　QTmediaとさくらがLGWAN対応のWebサイトホスティング開始

クラウド

ガバクラの足がかり　QTmediaとさくらがLGWAN対応のWebサイトホスティング開始

さくらインターネットとQTmediaは、行政専用ネットワークLGWAN「LGWAN対応自治体向けWebサイトホスティングサービス」の提供を2024年7月25日より提供開始した。事業者はLGWANに対応する環境を自ら構築することなく自治体のWebサイトを運営できるようになる。

  • 0
  • 0
「KUSANAGI」の新バージョンでは複数のNginxのバージョンのインストールが可能に

WebPro

「KUSANAGI」の新バージョンでは複数のNginxのバージョンのインストールが可能に

プライム・ストラテジーは超高速CMS実行環境「KUSANAGI」のバージョンアップを発表。新バージョンでは複数のNginxのバージョンのインストールが可能となる。

  • 0
  • 0
すぐに役立つ！プロの解説記事
一覧へ
ASCII.jp Web Professional