Warning: Parameter 1 to multibyte_patch::wplink_js() expected to be a reference, value given in /home/voidgraphics/www/crunchlog/wp-includes/plugin.php on line 579

Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/voidgraphics/www/crunchlog/wp-includes/plugin.php on line 579
強力なアニメーション用のJavaScriptライブラリー「TweenMax.js」が便利! | Crunchlog
Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/voidgraphics/www/crunchlog/wp-includes/plugin.php on line 579

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. tweenmax_js_oncomplete.jpg

    JavaScript

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

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

  2. tweenmax_license01.jpg

    JavaScript

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

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

  3. scope.jpg

    JavaScript

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

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

  4. js_style.jpg

    JavaScript

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

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

  5. js_global.jpg

    JavaScript

    JavaScriptでグローバル変数を減らす方法

    グローバル変数はいいことない!もしかしたら使っているライブラリー…

  6. tweenmax_js_totation.jpg

    JavaScript

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

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

最近の記事

  1. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  2. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  3. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  4. 【コレクション】カードダス:SDガンダム外伝シリーズ
  5. 懐かしい!!カードダスSD戦国伝!!
  6. 【無印良品】作り置きに欠かせない!バルブ付き密閉保存容器
  7. 【UNIQLO】冬のジム通いにブロックテックフリースパーカをお得に購入!!
  8. 【UNIQLO】冬のジム通いにブロックテックフリースパンツをお得に購入!!
  9. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  10. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」

アーカイブ

  1. 日常

    スタジオで
  2. iphone_sarudeki9

    読書

    iPhoneアプリ勉強用に『iPhoneアプリ開発塾』を買ってみた
  3. iphone4_iphone5-1.jpg

    iPhone

    iPhone4 → iPhone5 へ機種変更したときにやったことまとめ
  4. 日常

    「宮田識氏講演会」
  5. 日常

    オフライン
PAGE TOP