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


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

![plugin-header-3.png](http://blog.createjs.com/wp-content/uploads/2018/12/plugin-header-3.png)

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


# TweenJSのプラグインのあゆみ

## CSSPlugin
2012年のTweenJS 0.2.0には[`CSSPlugin`](https://www.createjs.com/docs/tweenjs/classes/CSSPlugin.html)が備わっていました。プラグインの機能を示すごく簡単なサンプルです。`Tween`オブジェクトに対して、プラグインはつぎのような手助けをします。

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

## MotionGuidePlugin
TweenJS 0.4.0には[`MotionGuidePlugin`](https://www.createjs.com/docs/tweenjs/classes/MotionGuidePlugin.html)が加わりました。ベジエ曲線に沿ってオブジェクトをトゥイーンさせるプラグインです。このプラグインは、Adobe Animateのモーションガイドに対応するためにつくられました。その機能をTweenJSのコードでも使えるようにしたのです。

<p data-height="345" data-theme-id="0" data-slug-hash="RQMXPB" data-default-tab="js,result" data-user="createjs" data-pen-title="CreateJS: Simple Motion Guide" class="codepen">See the Pen <a href="https://codepen.io/createjs/pen/RQMXPB/">CreateJS: Simple Motion Guide</a> by CreateJS (<a href="https://codepen.io/createjs">@createjs</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


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

## ColorPlugin
[`ColorPlugin`](https://www.createjs.com/docs/tweenjs/classes/ColorPlugin.html)は、ふたつのカラー値を簡単にトゥイーンできるプラグインです。つぎのように、ほとんどのカラー形式に対応します。

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

<p data-height="345" data-theme-id="0" data-slug-hash="MQGWYL" data-default-tab="js,result" data-user="createjs" data-pen-title="TweenJS: ColorPlugin" class="codepen">See the Pen <a href="https://codepen.io/createjs/pen/MQGWYL/">TweenJS: ColorPlugin</a> by CreateJS (<a href="https://codepen.io/createjs">@createjs</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

<p data-height="345" data-theme-id="0" data-slug-hash="YdKVXP" data-default-tab="js,result" data-user="createjs" data-pen-title="TweenJS: RelativePlugin Demo" class="codepen">See the Pen <a href="https://codepen.io/createjs/pen/YdKVXP/">TweenJS: RelativePlugin Demo</a> by CreateJS (<a href="https://codepen.io/createjs">@createjs</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# RotationPlugin
角度をトゥイーンすると、近い方向に回転してしまいます。たとえば、5度から355度のトゥイーンでは、時計方向でなく、その反対に10度回るだけになってしまうのです。最新の[`RotationPlugin`](https://www.createjs.com/docs/tweenjs/classes/RotationPlugin.html)では、[パラメータに`rotationDir`が加わりました](https://www.createjs.com/docs/tweenjs/classes/RotationPlugin.html)。時計回りが1、反時計回りは-1で、0を与えるとプラグインは無効になります。

<p class='codepen'  data-height='345' data-theme-id='31824' data-slug-hash='894acc02f11ccdc38492ee5a1928cc38' data-default-tab='js,result' data-animations='run' data-editable='' data-embed-version='2'>
See the Pen <a href='https://codepen.io/createjs/pen/894acc02f11ccdc38492ee5a1928cc38/'>TweenJS: RotationPlugin</a> by CreateJS (<a href='https://codepen.io/createjs'>@createjs</a>) on <a href='https://codepen.io'>CodePen</a>.31824</p>
<script async src="//codepen.io/assets/embed/ei.js"></script>

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

<p data-height="345" data-theme-id="0" data-slug-hash="WXzJME" data-default-tab="js,result" data-user="createjs" data-pen-title="TweenJS: CSS Transform" class="codepen">See the Pen <a href="https://codepen.io/createjs/pen/WXzJME/">TweenJS: CSS Transform</a> by CreateJS (<a href="https://codepen.io/createjs">@createjs</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


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

```js
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](https://threejs.org/)とともに使えるように開発されました。three.jsのプロパティはネストされた参照が多いのです(たとえば、`.position.x`など)。`DotPlugin`を使えば、深い階層にあるプロパティがドット(`.`)の連結で参照できます。各階層のオブジェクトごとに別々のトゥイーンを定めずに済むのです。

<p data-height="345" data-theme-id="0" data-slug-hash="dKpPOy" data-default-tab="js,result" data-user="lannymcnie" data-pen-title="TweenJS Dot Plug-in Remix" class="codepen">See the Pen <a href="https://codepen.io/lannymcnie/pen/dKpPOy/">TweenJS Dot Plug-in Remix</a> by Lanny (<a href="https://codepen.io/lannymcnie">@lannymcnie</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## プラグインライブラリのダウンロード
TweenJSのプラグインは、`MotionGuidePlugin`以外は標準のライブラリには含まれていません。ダウンロードした[プラグイン](https://github.com/CreateJS/TweenJS/tree/master/src/tweenjs/plugins)を個別に読み込まなければならないことにご注意ください。