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では、プラグインモデルを組み立て直し、新たなプラグインを加えました。
2012年のTweenJS 0.2.0には
TweenJS 0.4.0には
See the Pen CreateJS: Simple Motion Guide by CreateJS (@createjs) on CodePen.
2017年9月にCreateJS 1.0.0がリリースされました(少しあとにv1.0.2がリリース)。TweenJSでは、プラグインモデルが再構築されて、より使いやすく、効率的になったことが大きな改善です(「CreateJS 1.0.0で何が変わったか」参照)。新たなプラグインも加わりました。
See the Pen TweenJS: RelativePlugin Demo by CreateJS (@createjs) on CodePen.
角度をトゥイーンすると、近い方向に回転してしまいます。たとえば、5度から355度のトゥイーンでは、時計方向でなく、その反対に10度回るだけになってしまうのです。最新の
See the Pen TweenJS: RotationPlugin by CreateJS (@createjs) on CodePen.31824
See the Pen TweenJS: CSS Transform by CreateJS (@createjs) on CodePen.
プラグインを使うためにすべきことは、
現在、CreateJS 2.0の開発が進められ、ECMAScript 2016以降に向けた再構築の最中です。けれども、新しい機能への取り組みも忘れられていません。
2019年1月には、CreateJS 1.xのマイナーアップデートが予定されています。その中に含まれるのが
See the Pen TweenJS Dot Plug-in Remix by Lanny (@lannymcnie) on CodePen.
TweenJSのプラグインは、
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文字列
- カラー名は非対応
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
以外は標準のライブラリには含まれていません。ダウンロードしたプラグインを個別に読み込まなければならないのです。
コメント
コメントを投稿