もとは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))