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

    背景画像をJavaScriptで入れ替える2種類の方法

    ものごとには「正解」というものがひとつではない、ってことが多いもん…

  2. JavaScript

    「TweenMax.js」をビジネス利用のためのライセンス購入方法

    いつもJavaScriptのアニメーション部分でお世話になってる「…

  3. JavaScript

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

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

  4. JavaScript

    【TweenMax.js】回転アニメーションも楽々!

    以前も記事に書いたアニメーション用のJavaScriptライブラリ…

  5. JavaScript

    JavaScriptでローカルストレージを使うときに覚えておきたい文字列型から数値型への変換方法

    HTML5を使ったWebアプリをデザインしているときに必要だったの…

  6. JavaScript

    JavaScriptでテキストボックスから値を取得する

    テキストボックスに入力された値を取得します。Elementオブジ…

最近の記事

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

アーカイブ

  1. シンプルで使い易い!!「雷に強い マイクロタップ 4個口」

    ガジェット

    シンプルで使い易い!!「雷に強い マイクロタップ 4個口」
  2. Google AnalyticsのWPプラグイン「Google Analyticator」を導入してみた

    WordPress

    Google AnalyticsのWPプラグイン「Google Analytic…
  3. 日常

    ヤマバ
  4. LEGOはやぶさ

    科学少年にオススメのクリスマスプレゼント「レゴはやぶさ + 『はやぶさ、そうまで…
  5. 検索フォーム

    WordPress

    検索フォームを追加。
PAGE TOP