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. JavaScript

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

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

  2. JavaScript

    WebアプリでCanvasを使うための指定方法

    Webアプリをデザインするときのお決まりになりつつあるHTML5の…

  3. JavaScript

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

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

  4. JavaScript

    Android端末のデフォルト・ブラウザでJavaScriptのデバッグをする方法

    Webアプリをデザインするときに必須となるのがJavaScript…

  5. JavaScript

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

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

  6. JavaScript

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

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

最近の記事

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

アーカイブ

  1. 日常

    考える必要
  2. 日常

    予定通り
  3. iOS

    インスタンス変数について
  4. LEGOはやぶさ

    LEGO® CUUSOO 新作提案ランキング1位!
  5. ジャケ買いブランデーを飲んでみた。ちっちゃいカルヴァドス

    グルメ

    ジャケ買いブランデーを飲んでみた。ちっちゃいカルヴァドス
PAGE TOP