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. css_sprite.jpg
  2. scope.jpg

    JavaScript

    JavaScriptでは「変数のスコープ」を正しく理解してエラーを減らそう!

    変数の「スコープ」は正しく理解しないと、エラーにならないエラーが起…

  3. QueryString.jpg

    JavaScript

    クエリーストリングを利用してWebページ間でデータを受け渡してみる

    「クエリーストリング」っていうのは以下のようなGoogleで検索し…

  4. 20120716134815

    JavaScript

    正規表現で入力されたテキストが有効かをチェックする

    テキストボックスに入力されたテキストが整数かどうかをチェックします…

  5. chrome_touchevents.jpg

    JavaScript

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

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

  6. js_style.jpg

    JavaScript

    CSSのプロパティをJavaScriptで指定する

    Elementオブジェクトのstyleプロパティでその要素に対し…

最近の記事

  1. 【無印良品】作り置きに欠かせない!バルブ付き密閉保存容器
  2. 【UNIQLO】冬のジム通いにブロックテックフリースパーカをお得に購入!!
  3. 【UNIQLO】冬のジム通いにブロックテックフリースパンツをお得に購入!!
  4. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  5. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  6. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  7. コミックのイラストが新鮮だった!『MARVEL展』
  8. シンプルで使い易い!!「雷に強い マイクロタップ 4個口」
  9. ジム用に購入♪ リバーサル・オッシュマンズ別注「ドライスウェットショーツ」
  10. 暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」

アーカイブ

  1. 日常

    onとoff
  2. bttf.jpg

    LEGO

    LEGO CUUSOO第4弾「デロリアン」のプロダクトモデルがちらり!
  3. 【無印良品】コンパクトな収納ケース「収納ケース・引出し式・小」

    無印良品

    【無印良品】コンパクトな収納ケース「収納ケース・引出し式・小」
  4. 日常

    Blue White
  5. 日常

    「ブルース・ウェーバー展」
PAGE TOP