皆さんはHTML5でモーションを作るときにどのトゥイーンライブラリを使用していますか? 本記事ではGSAP(グリーン・ソック・アニメーション・プラットフォーム)と呼ばれるFlash全盛の時代から存在する歴史あるトゥイーンライブラリを紹介します。

GSAPはCSS/HTML5 Canvas/WebGLなど様々なアニメーション作成に利用できます。類似トゥイーンライブラリよりも高機能であり、かつ実行パフォーマンスも優れているのが魅力的です。

日本国内では採用実績はあまり聞きませんが、GSAPは欧米では一番使われているライブラリです。下記の図はGoogleトレンドの結果ですが、世界的にみても検索ボリュームが類似のJSトゥイーンライブラリを大きくリードしています(平成30年現在)。ネーミングがややこしいですが、「GSAP」はTweenMax(高機能なトゥイーンライブラリ)やTweenLite(機能をシンプルした軽量なライブラリ)を含む総称です。

作成したモーションデモを紹介

今回はTweenMaxの機能の一つ「タイムスケール」を使って、3Dの表現を試してみました。まずは次の2つのデモをご覧ください。


▲空間に無数に配置された赤い立方体が落下する演出。落下途中にスローモーションになる。

▲無数のアイコンが四方から集まっていき、最終的にワードの形に配置される。これも演出途中にスローモーションになる。

ちなみにこのデモの制作にはTypeScript 2.9Three.js r93gsap (TweenMax) 2.0CreateJS 2.0.0-beta.2を使っていますので、お手元で試すときはGitHubのリポジトリを参考に環境を準備してください。

タイムリマップとは

上述のデモはどちらも再生途中に一瞬スローモーションになりますが、これはタイムリマップ(タイムストレッチやタイムワープ)と呼ばれている演出手法です。モーションのスピードを変動させスローモーションやクイックモーションを表現しています。考え方は下図の通りで、モーションシーケンスの一部分だけをゆっくり再生させることでその部分だけがスローモーションとなり、全体に緩急のある動きにしあげることができます。

この手法は私の個人ブログで2009年に紹介した次のFlashの手法と同じものです。作り方や考え方は昔と全く変わっていません。記事「Flash Stage3Dとの比較から見えてくるWebGLのあり方」でも言及しましたが、Flashの知識はやはりHTML5/WebGLでも活用できますね。

タイムリマップの作り方

WebGLやHTML5 Canvasといった難しい技術を使わずとも、シンプルなHTMLでもこのタイムリマップを試すことができます。簡単なサンプルを通して作り方を紹介しましょう。まずは矩形のdiv要素が画面左側から右側に向かって移動するトゥイーンを作成します。TweenMaxライブラリの機能の一つ、TimelineMaxのインスタンスを作成し、to()メソッドを使ってCSSのleft値とrotationZ値をトゥイーンさせています。

// "#rect"の参照を取得する
const rect = document.getElementById("rect");

// タイムラインを作成する
const tl = new TimelineMax({repeat: -1});
// 右側に2秒かけて移動するモーションを指定する
tl.to(rect, 2.0, {left: "800px", rotationZ: 360});

TimelineMaxクラスにはモーションの倍速再生を指定できるtimeScale()というメソッドが用意されています。試しにこのメソッドに2.0と指定してみましょう。するとモーションが2倍速再生されているのがわかります。

// "#rect"の参照を取得する
const rect = document.getElementById("rect");

// タイムラインを作成する
var tl = new TimelineMax({repeat: -1});
// 右側に2秒かけて移動するモーションを指定する
tl.to(rect, 2.0, {left: "800px", rotationZ: 360});
// 2倍速再生にする(早送りとなる)
tl.timeScale(2.0);

この倍速再生の制御ができるtimeScale()メソッドを工夫すればタイムリマップ表現が実現できます。トゥイーンの特定の時間に到達したときにaddCallback()メソッドを使ってコールバック関数を仕込むことができます。このコールバック関数を使って、倍速再生速度を何度か変えてみましょう。

// "#rect"の参照を取得する
const rect = document.getElementById('rect');

// タイムラインを作成する
const tl = new TimelineMax({repeat: -1});
// 右側に2秒かけて移動するモーションを指定する
tl.to(rect, 2.0, {left: '800px', rotationZ: 360});
// 本来のタイムラインの0.25秒の地点まで到達したら
tl.addCallback(() => {
  // 0.1倍速再生にする(スローモーションとなる)
  tl.timeScale(0.1);
}, 0.25);
// 本来のタイムラインの0.50秒の地点まで到達したら
tl.addCallback(() => {
  // 1.0倍速再生にする(通常再生速度となる)
  tl.timeScale(1.0);
}, 0.5);

いかがでしたか。あっけなく仕上がってしまいましたね。

プログラムによってタイムリマップを実現する最大のメリットはフレームレートが落ちないという点です。どんなに微小時間をスローモーションで再生しても、スクリプトによってコマが生成され、ハイスピードカメラで撮影したように微細な動きまでもが再現されます。GSAP 2.0からnpmで管理できるようになったので、モダンなフロントエンド開発にも役立ちます。詳しくは記事「ES Modules対応のgsapの使い方 – Qiita」を参照ください。

最後に

日本全国花粉飛散マップ Pollen Map in Japan」をはじめ、弊社のHTML5コンテンツの多くはCreateJS(TweenJS)を採用しています。TweenJSはバランスがよくAdobe Animate CCとの連携にも優れていますが、TweenJSだけでは機能が足らず実装が困難な場合があります。

冒頭のデモでは「タイムリマップ」と「3次元(任意プロパティ)のベジェトゥイーン」を実現するにあたりTweenJSでは実現できなかったためTweenMaxを採用しました。現在採用中のトゥイーンライブラリに不足を感じたら、TweenMaxを検討してみてはいかがでしょうか? 次の記事で各種トゥイーンライブラリの機能の違いや、性能比較をしています。あわせてご覧ください。