JavaScript

強力なアニメーション用のJavaScriptライブラリー「TweenMax.js」が便利!

Announcing GreenSock Animation Platform  GSAP v12 now with tangy JavaScript flavor  GreenSock

jQueryでもアニメーションはできるのですが、それよりも表現力豊かなライブラリーです。
「GreenSock Animation Platform (GSAP)」の中のひとつ、ですね。
他にも「TweenLite.js」とかもありますが、「TweenMax.js」を使いました。

もともとはActionScript用のライブラリーみたいですね。

ざっくりとした特徴は以下に書いてあります。
英語ですが。

使い方とかのドキュメントを日本語で探しましたがなさそうなので、自分で使った部分をメモっていこうと思います。
思ったよりも簡単に使えそうですね。

まずは以下からダウンロードして「TweenMax.js」をサーバーの任意の位置にアップしておきましょう。
「TweenMax.js」だけではなくて「TweenLite.js」とかも一気にダウンロードできます。

Getting Started with the JavaScript Version of the GreenSock Animation Platform  GSAP  GreenSock

  1. HTMLで読み込む
  2. お約束の一文でライブラリーを読み込ませましょう。

    1
    
    <script src="js/TweenMax.js" type="text/javascript" charset="UTF-8"></script>
  3. 構文は以下で
  4. TweenMax.to( DOMのID名, アニメーション秒数, {css:{プロパティ:数値}, ease:アニメーションの効果});

    1
    2
    3
    4
    5
    6
    
    //jQueryを使った書き方
    TweenMax.to( $('#hoge'), 3, {css:{left:"95px"}, ease:Strong.easeOut});
     
    //DOM取得での書き方
    var hogehoge = document.getElementById('hoge');
    TweenMax.to( hogehoge, 3, {css:{left:"95px"}, ease:Strong.easeOut});

    これだけで簡単にアニメーションしてくれます。

アニメーションの効果がたくさん♪

以下のサイトの中くらいのところに、視覚的に確認できます。
バウンスとかもあったりしますよ〜。

以下のような感じで視覚的に
アニメーション効果を確認してみましょう。

確認したいアニメーション効果をプルダウンから選んで
「START」ボタンを押すだけです。

1

アニメーションがプレビューされます♪

2 2

かなり高機能で、ほかにもいろいろできるみたいなのですが、
とりあえず基本はこれ、ですかね。

けっこう豊富なアニメーション効果だけでも満足です。

とりあえず、
iOS5系、Android2.0系、3.0系、4.0系で動作することを確認しました。

いいですね〜。

ただし、ライセンスはよくよく確認してくださいね!

Club GreenSock « GreenSock
ライセンスは要確認

関連記事

  1. JavaScript

    【TweenMax.js】アニメーション終わりに関数を呼び出す!

    最近はWebアプリでアニメーションが必要になったときに、「Twen…

  2. JavaScript

    WebアプリのデバッグをChromeでやるために「touch events」を有効化する方法

    Webアプリのデバッグは「Chrome」をいつも使ってます。その…

  3. JavaScript

    JavaScript内で、HTMLのIDを直接指定したらダメ

    Webアプリをデザインしていて、JavaScriptの記述について…

  4. JavaScript

    JavaScriptでグローバル変数の使いどころを見直してパフォーマンスを改善する

    JavaScriptのコードの中では、どこにデータを格納するかでコ…

  5. JavaScript

    「offset」で取得した値を使い回す

    ちょっとはまったのでメモ。以下のように「offset」と「sty…

  6. JavaScript

    【TweenMax】「onComplete」で引数を使う方法

    TweenMaxの「onComplete」で引数を使いたい場合って…

最近の記事

  1. ホワイトハウスコックスの財布
  2. 進撃の巨人展FINAL チラシ
  3. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  4. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  5. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  6. 【コレクション】カードダス:SDガンダム外伝シリーズ
  7. 懐かしい!!カードダスSD戦国伝!!

アーカイブ

  1. プロダクト

    H&Mのコラボコレクション「H&M for BRICK LA…
  2. 日常

    エチカ
  3. 【無印良品】冬の定番「後ろから着けるイヤーマフ」

    無印良品

    【無印良品】冬の定番「後ろから着けるイヤーマフ」
  4. Appleイベント

    WWDC 2014で思ったことメモ
  5. デザインも機能も欲しい欲張りな折れない傘!「Senz Umbrella mini」

    プロダクト

    デザインも機能も欲しい欲張りな折れない傘!「Senz Umbrella mini…
PAGE TOP