TweenJSで独自のプラグインを実装する

2016-04-11
blog

もとはjQueryでHTML要素をアニメーションをさせていたのだけど一時停止・復帰をさせたかったので別のアニメーション用ライブラリを探したところ、TweenJSが対応しているので使ってみた。 そこでスケールアニメーションをさせるプラグインを作ってみた。

TweenJS用プラグインの作り方

TweenJSはEaselJSと組み合わせて、キャンバス上で表示させる要素をトゥイーンさせるという使い方が一般的だと思うが、CSSPluginを使うとでHTMLの要素に対してトゥイーンをかけることができて、位置の移動、サイズの変更、透明度の変更ができる。

で拡大・縮小させたかったので、CSSのtransformscaleをいじるプラグインを作成してみた。

TweenJSのinstallPluginのドキュメントを見ても、「CSSPluginを見ろ」というだけであまり情報がない。 console.logとか差し込んでどういう具合に呼び出されるか探ったところ、

  • initで初期値を返す
  • tweenvalueに補間された値が渡ってくるので、tween.targetの値を更新してやる
  • stepは?謎

という具合に実装すればよいっぽい。

スケールプラグイン

上記のことを元にして、CSSのtransfromscaleをいじるプラグインを作ってみた:

var CssTransformScalePlugin = (function() {
'use strict'
function CssTransformScalePlugin() {
}
CssTransformScalePlugin.priority = -100 // very low priority, should run last
CssTransformScalePlugin.init = function(tween, prop, value) {
var style = tween.target.style
if (!style)
return value
var m = style['transform'].match(/scale\(([0-9.]+)(,\s*([0-9.]+))?\)/)
if (!m)
return 1
var x = m[1] //, y = m[3]
return parseFloat(x)
}
CssTransformScalePlugin.step = function(/*tween, prop, startValue, endValue, injectProps*/) {
}
CssTransformScalePlugin.tween = function(tween, prop, value
/*, startValues, endValues, ratio, wait, end*/) {
var style = tween.target.style
if (!style)
return value

var transform = style['transform']
var newTransform =
style['transform'].replace(/scale\([0-9.]+(,\s*([0-9.]+))?\)/,
'scale(' + value + ')')
if (transform != newTransform)
style['transform'] = newTransform
return createjs.Tween.IGNORE
}
return CssTransformScalePlugin
})()
  • initstyletransformからscaleの初期値を取り出す
    • 本当ならxとyで別々のスケールを指定できるが、TweenJSで複数の値を補間してくれるのかわからなかったので、xy共通とする
  • tweentransformscale部分を書き換える
    • アップデート毎に正規表現使うとか、富豪的…!
  • 戻り値IGNOREは?謎

使用例

installPluginに扱うプロパティ名を指定してやると、TweenJSの枠組みで使えるようになる:

// プラグインのインストール
createjs.Tween.installPlugin(CssTransformScalePlugin, ['scale'])

使用してみる:

var text = document.getElementById('text')
createjs.Tween.get(text, { loop: true })
.to({ scale: 4.0 }, 2000, createjs.Ease.getPowInOut(2))
.to({ scale: 0.1 }, 2000, createjs.Ease.getPowInOut(2))