Closure Library が持つアニメーション効果

  • このエントリーをはてなブックマークに追加

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

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

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

ソースはこちら

goog.fx.dom.Slide

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

Slide to Left Top
Slide to Right Top
Slide to Left Bottom
Slide to Right Bottom

goog.fx.dom.Resize

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

Size Up
Size Down

goog.fx.dom.FadeIn/Out

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

Fade Out
Fade In

goog.fx.dom.BgColorTransform

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

White
Red
Blue
Green
Yellow
Pink
Black

goog.fx.dom.Scroll

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

Scroll Top Left
Scroll Middle Center
Scroll Bottom Right

Altocumulus that shines in morning

goog.fx.dom.Swipe

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

Swipe Left

まとめ

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

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

Six Apart のメールマガジンを購読しませんか?

月に2〜3回、WEBマーケ、WEB制作、オウンドメディア運営に役立つTIPSや無料セミナー情報をお届けします。

Six Apart をフォローしませんか?

次の記事へ

Six Apart ブログをはじめます

前の記事へ

.vimrc と tender