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

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以外は標準のライブラリには含まれていません。ダウンロードしたプラグインを個別に読み込まなければならないのです。