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
【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

【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. parseInt.jpg

    JavaScript

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

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

  2. obj_clear.jpg

    JavaScript

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

    オブジェクトの値を配列にいれて管理することってけっこうあります。…

  3. tweenmax_js_oncomplete.jpg

    JavaScript

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

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

  4. trycatch.jpg

    JavaScript

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

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

  5. chrome_touchevents.jpg

    JavaScript

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

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

  6. getElementById

    JavaScript

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

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

最近の記事

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

アーカイブ

  1. 日常

    『日本デザイン論』
  2. 日常

    『日本美の特質』
  3. 日常

    『新アートディレクター入門』
  4. 日常

    祝日も
  5. コメント欄

    WordPress

    コメント覧とBlogのタイトル画像追加
PAGE TOP