CreateJS: TweenJS 1.0.0で強化されたプラグインの機能

CreateJS Blogに2018年12月20日付で記事「New Plugins in TweenJS」が公開されました。TweenJS 1.0.0で強化されたプラグインについての解説です。本稿は、その内容をご紹介します。なお、プラグインの機能と使い方については「CreateJS: TweenJS 1.0.0のプラグインを使う」をお読みください。

プラグインモデルそのものは、TweenJSの初期のバージョンから備わっていました。プラグインの役割は、TweenJSのトゥイーンの機能を拡げたり、あるいは設定を細かくしたり、簡単にすることです。たとえば、そのままでは数値として扱えないCSSプロパティ値(32pxとか50%)やHTMLカラーコード(#ff00ff)などを用いてトゥイーンできるようにしたり、数値をプラグイン独自のルール(計算式)で変更したりする、といった使い途が挙げられます。TweenJS 1.0.0では、プラグインモデルを組み立て直し、新たなプラグインを加えました。

TweenJSのプラグインのあゆみ

CSSPlugin

2012年のTweenJS 0.2.0にはCSSPluginが備わっていました。プラグインの機能を示すごく簡単なサンプルです。Tweenオブジェクトに対して、プラグインはつぎのような手助けをします。

• 基本的なCSSプロパティの数値がトゥイーンできます。
  • width/height/left/top/bottom/right/opacity
• 位置や大きさの値に単位としてpxが使えます。
• プロパティはDOM要素のstyleオブジェクトに用いることもできます。

MotionGuidePlugin

TweenJS 0.4.0にはMotionGuidePluginが加わりました。ベジエ曲線に沿ってオブジェクトをトゥイーンさせるプラグインです。このプラグインは、Adobe Animateのモーションガイドに対応するためにつくられました。その機能をTweenJSのコードでも使えるようにしたのです。

See the Pen CreateJS: Simple Motion Guide by CreateJS (@createjs) on CodePen.

TweenJS 1.0.0の新たなプラグイン

2017年9月にCreateJS 1.0.0がリリースされました(少しあとにv1.0.2がリリース)。TweenJSでは、プラグインモデルが再構築されて、より使いやすく、効率的になったことが大きな改善です(「CreateJS 1.0.0で何が変わったか」参照)。新たなプラグインも加わりました。

ColorPlugin

ColorPluginは、ふたつのカラー値を簡単にトゥイーンできるプラグインです。つぎのように、ほとんどのカラー形式に対応します。

• 16進数
  • 6桁および3桁
  • 32ビットアルファにも対応
• RGBおよびRGBA文字列
• HSLおよびHSLA文字列
• カラー名は非対応

See the Pen TweenJS: ColorPlugin by CreateJS (@createjs) on CodePen.

RelativePlugin

RelativePluginを用いると、絶対的な数値でなく、現在値からの相対的な数値でトゥイーンできます。たとえば、角度を時計方向にあと30度トゥイーンで回したいというときには、文字列で"+30"を与えればよいのてす。開始値から決めるだけでなく、任意の終了値を定めてトゥイーンさせることもできます。

See the Pen TweenJS: RelativePlugin Demo by CreateJS (@createjs) on CodePen.

RotationPlugin

角度をトゥイーンすると、近い方向に回転してしまいます。たとえば、5度から355度のトゥイーンでは、時計方向でなく、その反対に10度回るだけになってしまうのです。最新のRotationPluginでは、パラメータにrotationDirが加わりました。時計回りが1、反時計回りは-1で、0を与えるとプラグインは無効になります。

See the Pen TweenJS: RotationPlugin by CreateJS (@createjs) on CodePen.31824

CSSPlugin 2.0

CSSPluginは、新たになりました。前のバージョンは、トゥイーンできるのはオブジェクトレベルのスタイルのみで、要素の絶対的な配置が必要とされ、スタイルの継承も扱えなかったのです。見栄えのよいサンンプルはつくれても、実用的とはいえませんでした。新しいCSSPlugin 2.0ははじめから書き直し、いまやオブジェクトの変換もトゥイーンできます。さらに、計算されたスタイルもトゥイーンに含められるのです(負荷が高いのでオプトインです)。

See the Pen TweenJS: CSS Transform by CreateJS (@createjs) on CodePen.

プラグインの使い方

プラグインを使うためにすべきことは、install()メソッドの呼び出しだけです。そうすれば、プラグインがサポートするプロパティを、トゥイーンに定められるようになります。たとえば、CSSPluginは、前のバージョンで使えた位置や大きさのプロパティのほか、transformが扱えるようになりました。あるいは、RotationPluginならrotation、RelativePluginでは“+100”といった値が、トゥイーンに与えられるのです。

createjs.CSSPlugin.install();
createjs.Tween.get(myElement)
  .to({top:20, width:100}, 1000);

プラグインのこれから

現在、CreateJS 2.0の開発が進められ、ECMAScript 2016以降に対応させる再構築の最中です。けれども、新しい機能への取り組みも忘れられていません。

DotPlugin

2019年1月には、CreateJS 1.xのマイナーアップデートが予定されています。その中に含まれるのがDotPluginです。これはもとは、three.jsとともに使えるように開発されました。three.jsのプロパティはネストされた参照が多いのです(たとえば、.position.xなど)。DotPluginを使えば、深い階層にあるプロパティがドット(.)の連結で参照できます。各階層のオブジェクトごとに別々のトゥイーンを定めずに済むのです。

See the Pen TweenJS Dot Plug-in Remix by Lanny (@lannymcnie) on CodePen.

プラグインライブラリのダウンロード

TweenJSのプラグインは、MotionGuidePlugin以外は標準のライブラリには含まれていません。ダウンロードしたプラグインを個別に読み込まなければならないことにご注意ください。