※本記事は、旧 Tech Talk Blog 内の 「Closure Library が持つアニメーション効果 (http://www.sixapart.jp/techtalk/2012/03/closure_tools.html) 」 で公開されていた記事を移転しました。

どうも。チョコレートって人を幸せな気持ちにしますよね。Lekumo キャンペーンビルダー開発担当の間です。

さて前回は、Lekumo キャンペーンビルダーの開発において、Closure Tools を使用していることを書きました。今回は、Closure Tools のうち、Closure Library が備えるアニメーションの種類を、デモを交えてご紹介します。Library にはそもそもデモが含まれているのですが、Scroll など、含まれていないものもあるので。

ソースはこちら。

goog.fx.dom.Slide

指定したエレメントを、任意の座標から任意の座標へ移動します。
SlideFrom を使えば、現在位置を起点とすることができます。

goog.fx.dom.Resize

指定したエレメントのサイズを、任意の大きさに拡大・縮小します。
Width のみリサイズする ResizeWidth、Height のみリサイズする ResizeHeight もあります。

goog.fx.dom.FadeIn/Out

エレメントをフェードイン／アウトさせます。
更に FadeInAndShow、FadeOutAndHide は display 値も変更します。
Fade を使うと、自分で細かい設定ができます（透過率何％から何％まで Fade する、とか）。

goog.fx.dom.BgColorTransform

背景色を変えます。ColorTransform は前景色を変更します。

goog.fx.dom.Scroll

スクロールを制御します。

goog.fx.dom.Swipe

指定サイズから指定サイズへ、エレメントをリサイズしながらスライドさせます。
スライドする距離や方向は、リサイズの割合いよって自動的に決定され、直接制御することができません。
あまり使い道は無いような気がします。

まとめ

Lekumo キャンペーンビルダーでは上記のうち、実際に FadeInAndShow、FadaOutAndHide、Scroll の３つを使用しています。

UI にアニメーションを取り入れると、リッチになって何か「すげーことしてる感」が出て、実はたいしたことしてないのに煙に巻けてしまう感じが僕は好きです（笑）