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

    JavaScript

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

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

  2. scope.jpg

    JavaScript

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

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

  3. tweenmax_license01.jpg

    JavaScript

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

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

  4. parseInt.jpg

    JavaScript

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

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

  5. style_backgroundImage.jpg

    JavaScript

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

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

  6. about_debug-4.jpg

    JavaScript

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

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

最近の記事

  1. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  2. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  3. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  4. コミックのイラストが新鮮だった!『MARVEL展』
  5. ジム用に購入♪ リバーサル・オッシュマンズ別注「ドライスウェットショーツ」
  6. 暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」
  7. 水引と風呂敷の包み方のデザインが美しい引き出物「祝づつみ」
  8. 【無印良品】ちょっと小さいクリップも買っておいて損はない「袋止めクリップ・小」
  9. 【無印良品】普通に使えるクリップが安くてうれしい「袋止めクリップ・大」
  10. 今年の手帳はコレに決めた♪「ほぼ日手帳 2017 オリジナル」

アーカイブ

  1. jins_pc02.PNG

    プロダクト

    「JINS PC」をかけて数ヶ月、ホントに眼の疲れが軽減した!
  2. 日常

    新年会シーズン
  3. 日常

    レディングのつながり
  4. 日常

    新宿ピカデリー
  5. nameserver

    ブログツール

    ドメインは『お名前.com』、『さくらのレンタルサーバ』で運用する方法
PAGE TOP