2013年3月26日 星期二

【CSS3】使用jQuery的DOM操作、CSS3的transform製作風車旋轉效果

在jQuery出現後,有蠻多的機率遇到需要使用他來製作一些客戶想要的效果,大部分的需求都大同小異,但是風車旋轉,是我第一次遇到。

線上看範例請點我

跟平常搜尋一樣,以為關鍵字輸入「jQuery 旋轉 或 特效」之類的字眼,會得到jquery本身的一些用法或套件,但似乎沒有,不過到是查到很多CSS3跟旋轉有關的文章。

由於本篇主要是要介紹旋轉,也就是transform中的rotate,所以transform其餘屬性不特別描述,如果有需要詳細了解CSS3中transform的用法,以下推薦兩篇文章:

  • 文章一:關於transform各個屬型、用法的說明與demo。
  • 文章二:這作者介紹的方式很生動很有趣,可以很清楚理解抽像的transform。
找不到jQuery有任何關於旋轉的資料,又看過transform:rotate的介紹後,當下就決定要利用CSS3來達成。




主要基底:CSS3 transform中的rotate用法
 
transform:rotate(3deg);

  • deg前方數字表示要旋轉的度數。
  • transform中任何變形皆以參考點為變形中心點,預設中心點為旋轉物件的中心點,若要另外設定參考點可再增加transform-origin去設定。


製作邏輯:

  • 本次範例製作時,由於風車旋轉所需要的參考中心點就是風車葉片的交接處,所以為了方便確認並對齊中心點,風車葉片圖檔製作時是裁切成正方形背景透明圖檔,風車交接點直接與正方形背景的中心點重疊以對齊位置,範例中將同時呈現風車與正方形背景以方便查看。
  • 採用javascript中的setInterval方法,讓固定時間內重複執行增加旋轉角度的動作以達到旋轉效果。

關於demo範例:

Html部分:
 
   
旋轉速度: (單位:毫秒) (例:1000=1秒)
  • 左圖:顯示風車葉片框線,注意製作風車圖片時,中心點必須與正方型的中心點一致。
  • 右圖:預期顯示樣式。
  • 由於本效果是使用css3,若您的瀏覽器看不到旋轉效果可能需要升級您的瀏覽器。

CSS部分:(用來定位圖檔、DOM位置)
 
 body {
  margin:0 10%;
  position:relative;
 }   
 #wind {
  float:left;
  width:600px;
  position:relative;
 }
 #borderline {
  float:left;
  width:300px;
  position:relative;   
 }
 #view {
  float:left;
  width:300px;
  position:relative;   
 }
 #bl-top {
  margin-top:20px;
  margin-left:20px;
  width:141px;
  height:141px;
  position:absolute;  
 }
 #v-top {
  margin-top:20px;
  margin-left:20px;
  width:141px;
  height:141px;
  position:absolute; 
 }
 #bl-bottom {
  margin-top:93px;
  margin-left:85px;     
 }
 #v-bottom {
  margin-top:93px;
  margin-left:85px;     
 }
 #intro {
  float:left;
  width:350px;
  color:blue;
 }

JS部分:
載入必要檔案:
 




本次範例詳細JS部分:
 
   var deg = []; //須執行旋轉動作物件的旋轉角度陣列
   var id = [];  //須執行旋轉動作物件,執行setInterval時各自回傳的id陣列
   var rotateSpeed = 0; //執行毫秒速度
 
   $(document).ready(function(){
      SpeedReSet(); //初次載入以輸入框內預設速度開始旋轉

      //重設毫秒後,重新設定旋轉速度
      $("#reSpeed").click(function(){
         if ( isNaN($.trim($("#rotateSpeed").val()))==true )
         {
            alert("請輸入數字毫秒。");
         }else
         {
            //先將前次執行旋轉相關的設定值清除
            deg = [];
            clearInterval(id["#bl-top"]);
            clearInterval(id["#v-top"]);
            //重新設定速度開始旋轉
            SpeedReSet();
         }    
      });
   });

   function SpeedReSet()
   { 
      //以輸入框內數值做為執行毫秒速度
      rotateSpeed = $("#rotateSpeed").val();
  
      //風車旋轉(含框線)
      rotation( "#bl-top" , rotateSpeed  );
      //風車旋轉
      rotation( "#v-top" , rotateSpeed  );
   }
 
   function rotation( objName , speed , degID)
   {       
      //由於範例中不只一個物件需要執行旋轉,並且旋轉動作包成rotation function後,
      //若deg不以陣列方式處理會造成多物件同時呼叫rotation function彼此的deg會互相影響
      //所以在此旋轉角度deg部分以陣列處理
      deg[objName] = 0; 
      //同上,為避免各自物件id受影響也為了重設速度時方便讀取哪個id需clear,亦以陣列處理
      id[objName] = setInterval(function(){
                        (deg[objName])++;         
                        $(objName).css("transform","rotate(" + deg[objName] + "deg)");
                        $(objName).css("-webkit-transform","rotate(" + deg[objName] + "deg)"); //給Chrome看的css
                        $(objName).css("-ms-transform","rotate(" + deg[objName] + "deg)");  //給IE看的css
                    },speed);   
   }


如果您喜歡我的分享、或是我的文章對您有幫助的話,希望能到我的粉絲專頁點個讚追蹤我唷~~

寫程式、技術分享文章很辛苦,寫一篇要花非常久的時間,希望您能幫我點一下頁面上的廣告給我支持跟肯定,讓我更有動力寫這類文章唷~

沒有留言:

張貼留言

writing for work~writing for life~