皆さんはHTML5でモーションを作るときにどのトゥイーンライブラリを使用していますか? 代表的なものを挙げると、CreateJS(TweenJS)Velocity.jsjQueryのanimate()などが有名でしょう。本記事ではGreenSock製のTweenMaxと呼ばれるFlash(ActionScript 3.0)全盛の時代から存在する歴史あるトゥイーンライブラリを紹介します。JS版TweenMaxはCSS/HTML5 Canvas/WebGLなど様々なコンテンツでも制御できるのは当然ながら、類似トゥイーンライブラリよりも高機能であり、かつ実行パフォーマンスも優れています(参考)。日本国内では採用実績はあまり聞きませんが、欧米では一番使われているライブラリです。下記の図はGoogleトレンドの結果ですが、世界的にみても検索ボリュームが類似のJSトゥイーンライブラリを大きくリードしています。

150629_trends

TweenMAXを使って、HTML5モーションデモを作成しました

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

▲空間に無数に配置された赤い立方体が落下する演出。落下途中にスローモーションになる。別ウインドウで再生したり、ソースコードを確認するには、CodePenの投稿からご覧ください。

▲無数のアイコンが四方から集まっていき、最終的にワードの形に配置される。これも演出途中にスローモーションになる。別ウインドウで再生したり、ソースコードを確認するには、CodePenの投稿からご覧ください。

ちなみにこのデモの制作にはTypeScript 1.4Three.js r71TweenMax 1.17.0CreateJS 2015年版を使っていますので、お手元で試すときは環境を準備してください。

タイムリマップとは

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

150629_timescale

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

次のページでは、TweenMaxを利用したタイムリマップ表現の具体的な作成方法を解説します。