HTML5テクニカルノート

CreateJS: TweenJS 1.0.0アップデート

2017年9月14日付でGitHubにTweenJS 1.0.0がリリースされました(実際には処理し忘れていて、日本時間2017年9月27日の公開となりました)。CreateJSのライブラリがすべて出揃ったということです。VERSIONS.txtに沿って、説明やリンクを補いつつご紹介します。

01 大きな変更(後方互換性を損なうことがある)

プラグインモデルが大幅に変わりました。詳しくは、SamplePluginクラスをご参照ください。

Timeline.setPosition()メソッドの第2引数が、整数(actionsMode)からブール値(ignoreActions)に変わりました。さらに、第3および第4引数も加わっています。

// 0.6.2
setPosition(value, [actionsMode])
// 1.0.0
setPosition(rawPosition, [ignoreActions=false], [jump=false], [callback])

定数Tween.NONEとTween.LOOPおよびTween.REVERSEが除かれました。

Tween()コンストラクタの第3引数(pluginData)は除かれ、第2引数(props)のプロパティに含められました。

// 0.6.2
Tween(target, [props], [pluginData])
// 1.0.0
Tween(target, [props])

静的メソッドTween.installPlugin()を除きました。替わって、Pluginのinstall()メソッドを用いることとします(SamplePluginクラス参照)。

インスタンスメソッドTween.tick()は除き、Tween.advance()を使うこととします。

Timelineインスタンスのトゥイーンアクションは、すべてのTweenプロパティが更新された後に実行されるようになりました。

Tweenプロパティを確かめるとき、継承されたプロパティをObject.hasOwnProperty()メソッドでフィルタリングするようにしました。

ライブラリ名にバージョン番号を含めることは止め、tweenjs.jsと改めましました。

02 非推奨の項目(将来おそらく除かれる)

Timeline()コンストラクタには引数(props)ひとつを渡すようにします。これまでの第1および第2引数(tweensとlabels)はまだ使えるものの、推奨されません。

// 0.6.2
Timeline(tweens, labels, props)
// 1.0.0
Timeline([props])

Tween.loopプロパティのデータ型が、ブール値からループ回数を示す整数に変わりました。トゥイーンをループし続けるには、-1を与えてください。

以下のふたつのget/setメソッドは使わないようにしてください。替わって、getter/setterプロパティを用います^[*1]。

// 0.6.2
Tween.setPaused([value=true])
Timeline.getCurrentLabel()
// 1.0.0
AbstractTween.paused
AbstractTween.currentLabel

廃止されたget/setメソッドは名前の頭にアンダースコアをつけて残ししました(_setEnabled()など)。

非推奨のメソッドとプロパティは引き続き使える代わり、コンソールに警告が示されます。

03 その他のアップデート

Tweenとプラグインのパフォーマンスが大幅に高まりました。

プラグインモデルは、これまでよりはるかに強力で柔軟になりました。

クラスAbstractTweenを新たに備えて、TweenとTimelineが継承するようにしました。

クラスTweenとTimelineのインターフェースが揃い、一貫性を増しました。

AbstractTweenクラスにつぎのプロパティを加え、クラスTweenとTimelineが継承します。

AbstractTween.reversed
AbstractTween.bounce
AbstractTween.rawPosition (読み取り専用)
AbstractTween.useTicks
AbstractTween.timeScale

AbstractTween.loopプロパティはループ回数を整数で定め、クラスTweenとTimelineが継承します。

Timelineオブジェクトを加えるとき、他のタイムラインからのトゥイーンは除くようにしました。

クラスAbstractTweenに備えたつぎのメソッドは、Tweenも継承します。

AbstractTween.addLabel()
AbstractTween.getLabels()
AbstractTween.setLabels()
AbstractTween.gotoAndPlay()
AbstractTween.gotoAndStop()
AbstractTween.resolve()

Tween.label()メソッドが加わりました^[*2]。

新たにクラスColorPluginとRelativePluginおよびRotationPluginが備わりました。

CSSPluginクラスはどのようなスタイルの値でも扱えるようになり、オプションで計算されたスタイルも使えます。

長さが0のトゥイーンの問題を修正しました。

タイムラインでループするトゥイーンのアクションが正しく実行されるようになりました。

Timeline.tweensプロパティを加えました。

サンプルの改善と追加を行いました。

MovieClipが使うTimeline.setPosition()メソッドの第4引数にコールバックを加えました。

setPosition(rawPosition, [ignoreActions=false], [jump=false], [callback])

Tween.set()メソッドのバグを修正しました。

ユニットテストを強化ました。

共有のメソッドcreatejs.deprecate()を加えました。古いメソッドとgetter/setterプロパティをラップするメソッドです。呼び出されるとコンソールに警告を示します。

---

作成者: 野中文雄
更新日: 2017年10月3日 注[*2]につぎのアップデートで修正される旨追記。
作成日: 2017年9月29日

---

Copyright © 2001-2017 Fumio Nonaka.  All rights reserved.