体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

Webで簡単・効率的にアニメーションを実現できる最新フレームワーク・CSS3アニメーションを紹介

MozillaでWebアニメーションの機能の開発者が登壇

Webでアニメーションというと、数年前まではFlashコンテンツが当たり前に使われていた。

しかしスマートフォンの普及と共に、Webから駆逐され、今はHTML5でアニメーションを表すには、setInterval関数やrequestAnimationFrame関数を使い、DOMやCanvasを繰り返し再描画するという手間のかかる作業が求められる。

そんな苦労をせずにもっと効率的にWebでアニメーションを実現する方法として、最近注目を集めているのがアニメーションフレームワークである。

最新のアニメーションフレームワークとCSS3アニメーションの実情について、海外からのゲストも含め3人の登壇者が紹介した。

最初に登壇したのはMozillaでWebアニメーションの機能を開発しているBrian Birtles(ブライアン・バートルズ)氏と赤塚大典氏。

セッションタイトルは「Browser animation in 2017 – 動く・動かせ・動け!」。まずはブライアン氏がWebアニメーションの現状について紹介した。

Webアニメーションでは今、更新ボタンを押すと、リストが変わったり、ページのナビゲーションをするなどインターフェース部分のアニメーションとして使われることが多い。

そのようなアニメーションは、CSS TransitionsやCSS Animationsを使えば、簡単なアニメーションがすぐできる。この2つをどう使い分けるのか。

Transitionsは簡単なA→Bの切り替えができる。一方CSS Animationは、A→B→CやA→B→A、繰り返しの動作ができる。

これらの技術はFirefox、Chrome、Edgeなどすべてのモダンブラウザに実装されている。

次にJavaScriptのアニメーションについて。Script animationsであれば、いろいろなことができる。

しかし欠点がある。ブラウザのアニメーションはブラウザが自動的に最適化する。つまりブラウザの処理が忙しくなると、JavaScriptのアニメーションは動きが止まってしまったりするのだ。

それでもJavaScriptを使いたい人は、新しくできたWeb Animation APIを使ってみてほしい。これを使うと、ブラウザが忙しくても、遅れることなくアニメーションを動かすことができる。

しかもJavaScriptのライブラリ同様に書ける。足りない機能は次のGitHubをチェックしてみよう。
Polyfill: web-animations-js

Webアニメーションを調査するインスペクターツールを紹介

ここで赤塚氏にバトンタッチ。赤塚氏はCSSアニメーションで動いているハートのアニメーションを見せ、そのアニメーションがどう動いているか、調査するツールを紹介した。

使ったのは、Firefox Developer Tools。Webページがどのように構成されているか、あるいはエレメンツについているCSSがどんな値になっているかを調査できる。

Page Inspectorや、エラーやワーニングをみるWebコンソール、Webページの表示に時間がかかっている場合に調べるパフォーマンスツールなどが用意されている。

ここでは、今開発しているアニメーションインスペクターを紹介。それを使えばどんな調査ができるかデモで見せた。

同ツールを使うと、どんなアニメーションで構成されているかが容易にわかる。デモで見せてくれたアニメーションはハートを大きくするtransformとcolorによって文字色を変化させるアニメーションの2種類で構成されていた。

またドキュメントタイムラインをチェックすれば、アニメーション中のどこのプログレスを指しているかも把握できる。イテレーションの動き、タイミングファンクションの確認も容易にできる。

アニメーションがどういう風に動いているかがわかることで、どういう風に作ればいいかという勘所がつかめるようになる。

現在は調査ツールとしてのみの活用だが、近い将来はアニメーションが編集できるツールにしていく予定。タイミングファンクションも開発ツール上の変数で表したり、キーフレームの値をそのまま編集できるようにするなどして、調査も編集もできるようにしていく。

現在、DevToolsはReact化、およびmozilla-centralからGitHubへの移行が進められている。アニメーションインスペクターも同様で、React化とGitHubへの移行を進め、プルリクエストベースで更新していけるようにする。

1 2 3 4次のページ
CodeIQ MAGAZINEの記事一覧をみる
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。