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. fb022d1ac056d555673c17937de7f431.png

    JavaScript

    強力なアニメーション用のJavaScriptライブラリー「TweenMax.js」が便利!

    jQueryでもアニメーションはできるのですが、それよりも表現力豊…

  2. tweenmax_js_oncomplete.jpg

    JavaScript

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

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

  3. offset_style_data.jpg

    JavaScript

    「offset」と「style」で取得する値が違う

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

  4. chrome_touchevents.jpg

    JavaScript

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

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

  5. getElementById

    JavaScript

    JavaScript内で、HTMLのIDを直接指定したらダメ

    Webアプリをデザインしていて、JavaScriptの記述について…

  6. parseInt.jpg

    JavaScript

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

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

最近の記事

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

アーカイブ

  1. WordPressの基本的な設定項目をおさらい2「投稿設定」篇

    WordPress

    WordPressの基本的な設定項目をおさらい2「投稿設定」篇
  2. LEGO Advent Calendar

    LEGO

    LEGO Advent Calendar
  3. obj_clear.jpg

    JavaScript

    配列に入れた無名オブジェクトの値をクリアする
  4. 日常

    音→映像
  5. kishin_shinoyama-1.jpg

    展覧会

    ハイコントラストが美しかった「篠山紀信展」
PAGE TOP