2013年4月11日 星期四

【jQuery】使用jQuery製作仿Flash的動畫效果

去年底公司官網header部分要替換動畫效果因應聖誕節與新年,但由於公司考量到越來越多人使用行動裝置,某些行動裝置可能無法讀取Flash效果,所以改以jQuery效果達成。

至於本篇文章範例,礙於不便用公司的圖檔作demo,所以畫面圖檔是使用:

  • 原始圖檔來源
  • Designed By : Visionmates
  • Author Website : http://www.visionmates.com/
  • License / Usage details: Free for personal and non commercial use
  • 感謝 崇創意 協助圖片去背處理。

線上看範例請點我




關於執行邏輯:

本次demo範例中的動畫效果,採用了以下jQuery:
jQuery中的fadeInjQuery中的animatejQuery UI中的show Effects,如還不了解如何使用可先至官網查看。

以上三種效果使用方式,除了前幾個須各自帶各自的需求參數,最後一個參數都是callback function,也由於動畫效果通常都是依照時間順序去執行,所以可以利用這些callback function特性來達成動畫的順序性,例如:
   
   $("#aaa").show('slide', {direction: 'down'}, 800 ,function(){  
      $("#bbb").fadeIn(500,function(){

      });
   });

上述這段程式碼表示:id=aaa的DOM物件首先執行show slide效果,等待此效果完成結束時才換id=bbb的DOM物件接著執行fadeIn效果。

所以,只要先預想好您的效果順序,並且確定每個DOM所要使用的效果後(您也可以不使用本篇使用的這三種jQuery效果,可替換),依序帶入callback function內即可完成仿Flash動畫。

有了畫面後須要先將畫面轉為html結構,由於我本身並非設計人員,所以請了朋友崇創意協助做某些圖的去背處理,接著就是將去背完成的各個獨立圖檔組成html結構,並用css去定位各個圖檔,其中要一起同時執行同一效果的用一個大div包附。

關於demo範例:
Html部分:
   
   

div id=couple 情侶圖檔區塊。
div id=flower 花束區塊。
div id=center_heart 背景大愛心(白底心+紅框心)。
div id=word Happy Valentine's Day文字區塊。
div id=love I love you文字區塊。
div id=lovetoo I love you,too文字區塊。
div
id=white-lheart
id=white-rheart
左上白愛心區塊、右上白愛心區塊。
div
id=crsh-left
id=crsh-right
id=crsh-left-c
id=crsh-right-c
id=crbh-left
id=crbh-right
背景大愛心(白底心+紅框心)中間六個愛心區塊。
由於我要平行兩個愛心同時顯示執行相同效果,所以兩兩再各自用一個div包起來。
div id=many-heart 其他剩餘背景小愛心


上述提到的「要一起同時執行同一效果的用一個大div包附」,以id=crsh-left、id=crsh-right來說,此二div外頭還包了一個id=crsh-bottom的div:
 
   //寫法1  
   $("#crsh-bottom").fadeIn(1000 ,function(){  
      //callback function內動作
   });
   //寫法2  
   $("#crsh-left,#crsh-right").fadeIn(1000 ,function(){  
       //callback function內動作
   });

上述兩種js寫法,都可以讓id=crsh-left、id=crsh-right此二div在視覺上看起來是同時執行fadIn效果,但實際上測試會發現,若是使用「寫法2」,則callback function會呼叫執行兩次,也就是說,「寫法2」也許他只是讓我們視覺上看起來是同時執行fadIn效果、但實際上還是分開執行,所以才會呼叫執行兩次callback function,但由於我們callback function內要執行的動作只要一次,所以改用「寫法1」,讓包付此二div的DOM去執行。 

註:也許「寫法2」callback function呼叫執行兩次在某些情況下視覺上看不出差異,但先前測試過若是做類似【CSS3】使用jQuery的DOM操作、CSS3的transform製作風車旋轉效果這樣須要計算角度並去累加度數時可能就會有明顯差異,所以安全起見還是包付成一個大的div再去做處理(也可以省去jQuery selector撰寫很多的麻煩)。

CSS部分:
#main{
 width:600px; 
 margin:0 25%;
}
#content{
 width:600px;
 height:425px;
 background-image:url('images/bg.jpg');
 position:relative;
 overflow:hidden; /*因為Happy Valentine's Day文字要從區塊外出現,必須設定overflow把文字最初超出區塊部分作隱藏*/
}
#couple{
 width:217px;
 height:145px;
 position:absolute;
 bottom:0px;
 left:173px;
 z-index:10;
 display:none; /*for 特效,須先隱藏*/
}
#flower{
 width:75px;
 height:145px;
 position:absolute;
 bottom:80px;
 left:242px;
 z-index:10;
 display:none; /*for 特效,須先隱藏*/
}
#center_heart
{
 width:408px;
 height:368px;
 position:absolute;
 bottom:36px;
 left:110px;
 display:none; /*for 特效,須先隱藏*/
}
#word
{
 width:360px;
 height:55px;
 position:absolute;
 bottom:-51px; /*for 特效,須先將文字設在區塊外*/
 /*bottom:225px;  文字最後要停留的位置,在js特效中設定*/ 
 left:136px;
 z-index:10; 
}
#love
{
 width:117px;
 height:112px;
 position:absolute;
 bottom:85px;
 left:23px; 
 display:none; /*for 特效,須先隱藏*/
}
#lovetoo
{
 width:106px;
 height:97px;
 position:absolute;
 bottom:87px;
 left:467px; 
 display:none; /*for 特效,須先隱藏*/
}
#white-lheart{
 width:98px;
 height:99px;
 position:absolute;
 bottom:309px;
 left:9px; 
 display:none; /*for 特效,須先隱藏*/
}
#white-rheart{
 width:98px;
 height:99px;
 position:absolute;
 bottom:328px;
 left:485px; 
 display:none; /*for 特效,須先隱藏*/
}
#crsh-bottom{
 width:295px;
 height:255px;
 position:absolute;
 bottom:106px;
 left:161px;
 display:none; /*for 特效,須先隱藏*/
}
#crsh-left{
 width:48px;
 height:40px;
 position:absolute;
 bottom:30px;
 left:47px;
}
#crsh-right{
 width:48px;
 height:40px;
 position:absolute;
 bottom:45px;
 left:156px;
}

#crsh-center{
 width:295px;
 height:255px;
 position:absolute;
 bottom:106px;
 left:161px;
 display:none; /*for 特效,須先隱藏*/
}
#crsh-left-c{
 width:48px;
 height:40px;
 position:absolute;
 bottom:77px;
 left:12px;
}
#crsh-right-c{
 width:48px;
 height:40px;
 position:absolute;
 bottom:85px;
 left:203px;
}

#crbh{
 width:295px;
 height:255px;
 position:absolute;
 bottom:106px;
 left:161px;
 display:none; /*for 特效,須先隱藏*/
}
#crbh-left{
 width:64px;
 height:56px;
 position:absolute;
 bottom:170px;
 left:8px;
}
#crbh-right{
 width:64px;
 height:56px;
 position:absolute;
 bottom:182px;
 left:228px;
}
#many-heart{
 width:600px;
 height:425px;
 position:absolute;
 display:none; /*for 特效,須先隱藏*/
}
#mhwb1{
 width:32px;
 height:34px;
 position:absolute;
 bottom:237px;
 left:69px;
}
#mhwb2{
 width:32px;
 height:34px;
 position:absolute;
 bottom:87px;
 left:415px;
}
#mhws1{
 width:34px;
 height:33px;
 position:absolute;
 bottom:74px;
 left:89px;
}
#mhws2{
 width:34px;
 height:33px;
 position:absolute;
 bottom:41px;
 left:392px;
}
#mhws3{
 width:34px;
 height:33px;
 position:absolute;
 bottom:92px;
 left:123px;
}
#mhws4{
 width:34px;
 height:33px;
 position:absolute;
 bottom:61px;
 left:426px;
}
#mhws5{
 width:34px;
 height:33px;
 position:absolute;
 bottom:60px;
 left:119px;
}
#mhws6{
 width:34px;
 height:33px;
 position:absolute;
 bottom:87px;
 left:451px;
}
#mhws7{
 width:34px;
 height:33px;
 position:absolute;
 bottom:374px;
 left:147px;
}
#mhws8{
 width:34px;
 height:33px;
 position:absolute;
 bottom:288px;
 left:519px;
}
#mhrb1{
 width:48px;
 height:47px;
 position:absolute;
 bottom:43px;
 left:150px;
}
#mhrb2{
 width:48px;
 height:47px;
 position:absolute;
 bottom:381px;
 left:273px;
}
#mhrb3{
 width:48px;
 height:47px;
 position:absolute;
 bottom:237px;
 left:542px;
}

#mhrs1{
 width:32px;
 height:34px;
 position:absolute;
 bottom:74px;
 left:24px;
}
#mhrs2{
 width:32px;
 height:34px;
 position:absolute;
 bottom:265px;
 left:12px;
}
#mhrs3{
 width:32px;
 height:34px;
 position:absolute;
 bottom:191px;
 left:50px;
}
#mhrs4{
 width:32px;
 height:34px;
 position:absolute;
 bottom:305px;
 left:82px;
}
#mhrs5{
 width:32px;
 height:34px;
 position:absolute;
 bottom:392px;
 left:410px;
}
#mhrs6{
 width:32px;
 height:34px;
 position:absolute;
 bottom:43px;
 left:450px;
}
#mhrs7{
 width:32px;
 height:34px;
 position:absolute;
 bottom:181px;
 left:507px;
}

JS部分:
載入必要檔案:





本次範例詳細JS部分:
 
$(document).ready(function(){
   //情侶
   $("#couple").show('slide', {direction: 'down'}, 800 ,function(){
      //背景愛心群
      $("#many-heart").fadeIn(500,function(){
         //花束
         $("#flower").fadeIn(500,function(){
            //背景大愛心(白底心+紅框心)
            $("#center_heart").fadeIn(2000 ,function(){
               //左上白愛心
               $("#white-lheart").fadeIn(300 ,function(){
                  //右上白愛心
                  $("#white-rheart").fadeIn(500 ,function(){
                     //I love you文字
                     $("#love").fadeIn(1000 ,function(){
                        //I love you,too文字
                        $("#lovetoo").fadeIn(800 ,function(){
                           //背景大愛心內側下方兩個愛心
                           $("#crsh-bottom").fadeIn(1000 ,function(){
                              //背景大愛心內側中間兩個愛心
                              $("#crsh-center").fadeIn(1000 ,function(){
                                 //背景大愛心內側上方兩個愛心
                                 $("#crbh").fadeIn(1000 ,function(){
                                    //Happy Valentine's Day文字
                                    $("#word").animate({bottom:225},1000,"easeOutBounce",function(){                                                                                                                                                                                                                 
                                       //花束重複傾斜動作
                                       setInterval(GoSlant,1000);
                                    });            
                                 });
                              });
                           });
                        });
                     });
                  });
               });
            });
         });
      });
   });
 
});

   function GoSlant()
   {
      var slantDeg = 5; //傾斜度數
      var nowDeg = $("#deg").val();
      if ( nowDeg=="" || nowDeg=="-" + slantDeg ){ nowDeg=slantDeg; }else{ nowDeg="-" + slantDeg; }
      $("#deg").val(nowDeg); 
      $("#flower").css("transform","rotate(" + nowDeg + "deg)");
      $("#flower").css("transform-origin","bottom");  
   }

上述GoSlant function是花束最後的傾斜搖擺部分,相關閱讀:【CSS3】使用jQuery的DOM操作、CSS3的transform製作風車旋轉效果

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

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

4 則留言:

  1. 妳真的好用心寫!!
    給你個讚~

    回覆刪除
  2. 這位大大~您說的方法也是我目前使用的方法~

    我指的是您寫的這段

    $("#couple").show('slide', {direction: 'down'}, 800 ,function(){
    //背景愛心群
    $("#many-heart").fadeIn(500,function(){
    //花束
    $("#flower").fadeIn(500,function(){
    //背景大愛心(白底心+紅框心)
    $("#center_heart").fadeIn(2000 ,function(){
    //左上白愛心
    $("#white-lheart").fadeIn(300 ,function(){
    //右上白愛心
    $("#white-rheart").fadeIn(500 ,function(){
    //I love you文字
    $("#love").fadeIn(1000 ,function(){
    //I love you,too文字
    $("#lovetoo").fadeIn(800 ,function(){
    //背景大愛心內側下方兩個愛心
    $("#crsh-bottom").fadeIn(1000 ,function(){
    //背景大愛心內側中間兩個愛心
    $("#crsh-center").fadeIn(1000 ,function(){
    //背景大愛心內側上方兩個愛心
    $("#crbh").fadeIn(1000 ,function(){
    //Happy Valentine's Day文字
    $("#word").animate({bottom:225},1000,"easeOutBounce",function(){
    //花束重複傾斜動作
    setInterval(GoSlant,1000);
    });
    });
    });
    });
    });
    });
    });
    });
    });
    });
    });
    });

    但未來在維護上與修改實在不易=_=這點是個麻煩點~不知大大有沒有別的解法~

    回覆刪除
    回覆
    1. 這點我倒是沒特別想過耶
      因為我平常程式習慣縮排
      這個例子因為物件很多 所以我也都有補上註解
      我個人是覺得縮排加上註解應該是不會很難找要改的位置拉...

      至於其他做法
      我想了想 怎麼想都好像還是會有這種層級的方式
      ( 因為有順序阿XD )
      所以我也不是很清楚XDD

      不過
      我個人覺得
      用js來寫動畫特效
      應該還是只限於數量小 時間不會持續性的比較適合
      否則應該就會吃user電腦效能
      ( 之前寫過類似煙火效果 效能跑很高XDD )
      所以..
      數量小 時間不持續 我個人覺得維護上應該還可以拉XDD

      刪除

writing for work~writing for life~