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

2016-04-11
#html

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

TweenJS用プラグインの作り方

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

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

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

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

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

スケールプラグイン

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

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
})()
  • initでstyleのtransformからscaleの初期値を取り出す
    • 本当ならxとyで別々のスケールを指定できるが、TweenJSで複数の値を補間してくれるのかわからなかったので、xy共通とする
  • tweenでtransformのscale部分を書き換える
    • アップデート毎に正規表現使うとか、富豪的…！
  • 戻り値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))

関連記事

新着記事