以前も記事に書いたアニメーション用のJavaScriptライブラリー「TweenMax.js」で、回転アニメーションもできます。いろいろ便利ですね「TweenMax.js」♪ メモしておきます。
「TweenMax.js」のダウンロードとかは以前の記事を参照ということで、以下です。
基本的なアニメーションの方法も載せてあります。
回転アニメーションの構文
TweenMax.to( DOMのID名, アニメーション秒数, {css:{rotation:角度}, ease:アニメーションの効果});
※角度は時計まわりが「+」、反時計まわりが「-」
//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ライブラリーを探している方にはオススメします!