JavaScript

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

tweenmax_js_totation

以前も記事に書いたアニメーション用のJavaScriptライブラリー「TweenMax.js」で、回転アニメーションもできます。いろいろ便利ですね「TweenMax.js」♪ メモしておきます。

「TweenMax.js」のダウンロードとかは以前の記事を参照ということで、以下です。
基本的なアニメーションの方法も載せてあります。

回転アニメーションの構文

TweenMax.to( DOMのID名, アニメーション秒数, {css:{rotation:角度}, ease:アニメーションの効果});
※角度は時計まわりが「+」、反時計まわりが「-」

1
2
3
4
5
6
7
8
//jQueryを使用
//アニメーションのイーズ効果をつけない→ease:Linear.easeNone
TweenMax.to($('#hoge'), 2, {css:{rotation:90}, ease:Linear.easeNone});
 
//jQueryを使用しない、DOM取得での書き方
//アニメーションのイーズ効果をつけない→ease:Linear.easeNone
var hogehoge = document.getElementById('hoge');
TweenMax.to(hogehoge, 2, {css:{rotation:90}, ease:Linear.easeNone});

これだけです!
カンタン!!

同じライブラリーを使っているので、
ほとんど線形アニメーションと変わりません。
そこも「TweenMax.js」の魅力ですね♪
ひとつのJSライブラリーで線形アニメーションも、回転アニメーションもいけちゃう♪

アニメーションのJSライブラリーを探している方にはオススメします!

▼基本は大事♪

関連記事

  1. js_global.jpg

    JavaScript

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

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

  2. css_sprite.jpg
  3. QueryString.jpg

    JavaScript

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

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

  4. oncomplete_function.jpg

    JavaScript

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

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

  5. trycatch.jpg

    JavaScript

    JavaScriptでエラーが起っても固まらないように「try-catch」する

    HTML5とJavaScriptでこねこねしてWebアプリを作って…

  6. 20120716134815

    JavaScript

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

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

アーカイブ

  1. 20130908182840.jpg

    Mac

    Macの「このアプリケーションで開く」のデフォルトを変更する方法
  2. 留学

    初「EXCURSION」
  3. 日常

    『デザイン基礎講座レイアウト&タイポグラフィ』
  4. 日常

    ブラウン「360°コンプリート」
  5. WordPressの基本的な設定項目をおさらい1「一般設定」篇

    WordPress

    WordPressの基本的な設定項目をおさらい1「一般設定」篇
PAGE TOP