タイムリマップの作り方

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

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

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

150629_sample_1

(別ウインドウで再生する)

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

// "#rect"の参照を取得する
var 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);

150629_sample_2

(別ウインドウで再生する)

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

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

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

150629_sample_3
(別ウインドウで再生する)

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

プログラムによってタイムリマップを実現する最大のメリットはフレームレートが落ちないという点です。どんなに微小時間をスローモーションで再生しても、スクリプトによってコマが生成され、ハイスピードカメラで撮影したように微細な動きまでもが再現されます。

※なお、TweenMaxの導入方法や基本的な使い方は次の記事を参考くださいませ。

最後に

日本全国花粉飛散マップ Pollen Map in Japan」をはじめ、弊社のHTML5コンテンツの多くはCreateJS(TweenJS)を採用しています。TweenJSはバランスがよくAdobe Animate CCとの連携にも優れていますが、TweenJSだけでは機能が足らず実装が困難な場合があります。冒頭のデモでは「タイムリマップ」と「3次元(任意プロパティ)のベジェトゥイーン」を実現するにあたりTweenJSでは実現できなかったためTweenMaxを採用しました。現在採用中のトゥイーンライブラリに不足を感じたら、TweenMaxを検討してみてはいかがでしょうか?

追記 (2015/08/11)

ICS Facebookページへの「いいね!」が、4000件を超えたことを記念して本記事のテクニックをもとにデモを作成しました。ぜひICS Facebookページをフォローくださいませ!