pageSwitch.js 實現全屏切換

移動互聯網的火熱發展，帶來了很多產品推廣傳播的html5頁面開發需求，而這類頁面又往往以單頁面滾屏（onepage-scroll）類型居多。qiqiboy開發的這個專門處理該類需求的javascript組件 – pageSwitch.js。

專門處理頁面上幻燈、走馬燈效果的組件 – Touchslider.js，支持上下左右四個方向的滾屏切換，其實它也能勝任部分這類單頁滾屏操作。但是由於實現原理限制，他也只能實現了連續滾屏的效果。而在移動端上，頁面不僅僅是滾動（scroll）切換，還會有各種切換轉場方式，例如放大縮小，飛進飛出，翻來翻去等等……而這些效果，就是pageSwitch專注的事了。

補充一下，Touchslider和pageSwitch的不同：前者專注於滾動操作，且不限於全屏滾動（即可視容器窗口中同時可見頁面數量可以不固定，具體可以參見此處例子）；後者則是專注於全屏頁面的切換操作，切換效果可以五花八門，參見此例。

內置支持的切換效果

pageSwitch.js現在已經內置支持 106 中切換效果，其實可以支持更多，只是考慮到文件體積，不想加入太多不常用的效果。pageSwitch支持自定義切換效果，可以根據示例自行定義自己需要的效果，這個如果定義後邊會講到。

現在內置支持的效果主要分爲以下幾個大類：

• fade：基於透明度（opacity）爲實現的漸顯漸隱效果，例子
• slice：基於尺寸（height、width）實現的裁切效果，例子
• scroll：基於位置（translate、top、left）實現的滾動效果，例子
• slide：基於位置（translate、top、left）實現的滑屏效果，例子
• flip：基於rotate變換實現的翻轉效果，例子
  • flip3d：3d空間翻轉，例子
  • flipPaper：翻書效果，例子
  • flipClock：翻頁鍾效果，例子
• skew：基於skew變換實現的扭曲效果，例子
• zoom：基於scale變換實現的縮放效果，例子
• bomb：基於scale變換和透明度（opacity）實現的爆炸效果，例子

基於以上幾類效果，派生出了許多微小變化的效果，共同組成了pageSwitch內置支持的效果。

如何自定義效果

除了以上組件內置支持的效果，更可以自定義自己需要的效果。自定義效果前，需要明確pageSwitch的切屏理念：

非動畫階段只有一個頁面可以被看到（全屏頁面的概念）；動畫階段最多隻有兩個頁面參與，即一前一後，他們分別有自己對應的進度比率，基於該比率定義頁面樣式以實現連續的動畫。

自定義動畫效果即通過定義一個函數用來處理頁面樣式：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

//這裏以定義一個fade動畫樣式來舉例 pageSwitch.addTransition('fade',function(cpage,cp,tpage,tp){ /* * @param HTMLElement cpage 參與動畫的前序頁面 * @param Float cp 目標頁面過渡比率，取值範圍-1到1 * @param HTMLElement tpage 參與動畫的後序頁面；如果非循環loop模式，則在切換到邊緣頁面時可能不存在該參數 * @param Float tp 目標頁面過渡比率，取值範圍-1到1；如果非循環loop模式，則在切換到邊緣頁面時可能不存在該參數 */   if('opacity' in cpage.style){ //檢測透明度css支持 cpage.style.opacity=1-Math.abs(cp); if(tpage){ tpage.style.opacity=Math.abs(cp); } }else{ cpage.style.filter='alpha(opacity='+(1-Math.abs(cp))*100+')'; if(tpage){ tpage.style.filter='alpha(opacity='+Math.abs(cp)*100+')'; } } });   //如果你有jQuery類似組件，可以更簡單 pageSwitch.addTransition('fade',function(cpage,cp,tpage,tp){ $(cpage).css('opacity',1-Math.abs(cp)); $(tpage).css('opacity',Math.abs(cp)); });

以上是自定義動畫的一個簡單例子，複雜的例子可以參見組件內置的 flipClock flipPaper等效果。

優缺點自談

沒有完美的東西，我自己對這個組件也有一些看法，並不是推薦大家說這個東西適用任何情況。

優點：組件定義了外部操作框架，可以很方面的實現自己需要的動畫效果，並且內置了許多的效果，適用起來簡單方便。

缺點：由於爲了動畫定義邏輯的簡單，動畫部分沒有使用css3的transition。與原生transition動畫相比，雖然已經使用了requestAnimationFrame，但是由於部分基於簡化操作的原因，性能損耗是不可避免的。但是這只是在老機型上的表現，在終端性能越來強大的今天，這部分性能損耗基本可以忽略。

綜上，個人建議，如果你的頁面不是大多跑到三四年前那種iphone4 android2.2等老機器上的，大可放心使用pageSwitch。

Github & Demo

pageSwitch.js

pageSwitch

與 TouchSlider.js 的區別
pageSwitch.js適用場景爲全屏切換，即一切一屏，並且在此基礎上實現了超過一百種切換效果。而TouchSlider.js則側重於在滑動效果下，不僅支持全屏切換，還支持不固定尺寸的幻燈切換。
具體使用請參看各組件所提供的示例。

Just a page Switch Javascript Library, and it has supported 121 switching animations.

頁面切換器，支持多達121種切頁效果，更可支持自定義切頁動畫， 盡情發揮想象力！

http://u.boy.im/pageswitch/pic.html

手機掃描下面二維碼查看例子：

預覽效果

  

      如何使用

// 首先在頁面中引入pageSwitch.js
// 調用 pageSwitch 方法

var pw=new pageSwitch('container id',{
    duration:600,           //int 頁面過渡時間
    direction:1,            //int 頁面切換方向，0橫向，1縱向
    start:0,                //int 默認顯示頁面
    loop:false,             //bool 是否循環切換
    ease:'ease',            //string|function 過渡曲線動畫，詳見下方說明
    transition:'slide',     //string|function轉場方式，詳見下方說明
    freeze:false,           //bool 是否凍結頁面（凍結後不可響應用戶操作，可以通過 `.freeze(false)` 方法來解凍）
    mouse:true,             //bool 是否啓用鼠標拖拽
    mousewheel:false,       //bool 是否啓用鼠標滾輪切換
    arrowkey:false,         //bool 是否啓用鍵盤方向切換
    autoplay:false,         //bool 是否自動播放幻燈 新增
    interval:int            //bool 幻燈播放時間間隔 新增
});

//調用方法
pw.prev();                  //上一張
pw.next();                  //下一張
pw.slide(n);                //第n張
pw.setEase();               //重新設定過渡曲線
pw.setTransition();         //重新設定轉場方式
pw.freeze(true|false);      //凍結頁面轉換，凍結後不可響應用戶操作（調用slide prev next方法還可以進行）

pw.play();                  //播放幻燈
pw.pause();                 //暫停幻燈

/* 2015.03.22 新增方法 */
pw.prepend(DOM_NODE);       //前增頁面
pw.append(DOM_NODE);        //後增頁面
pw.insertBefore(DOM_NODE,index);    //在index前添加
pw.insertAfter(DOM_NODE,index);     //在index後添加
pw.remove(index);           //刪除第index頁面
pw.isStatic();              //是否靜止狀態

pw.destroy();               //銷燬pageSwitch效果對象

/* 事件綁定
 * event可選值:
 * 
 * before 頁面切換前
 * after 頁面切換後
 * update 頁面切換中
 * dragStart 開始拖拽
 * dragMove 拖拽中
 * dragEnd 結束拖拽
 */
pw.on(event,callback);

     setEase 示例

內置支持 linear ease ease-in ease-out ease-in-out bounce等
bounce 彈跳過渡，很有意思，可以試試

//注：此處傳值也可直接在new pageSwitch對象時經ease參數傳入
//設置勻速linear過渡示例：
pw.setEase('linear'); //由於內置了linear支持，所以可以直接使用

//假如沒有內置linear，則使用自定義過渡曲線函數如下
pw.setEase(function(t,b,c,d){
    return c*t/d + b;
});

更多曲線函數參見：https://github.com/zhangxinxu/Tween/blob/master/tween.js

     setTransition 示例

支持以下轉場效果：

fade 漸隱漸顯 | demo

slice 裁切效果 | demo

scroll 頁面滾動 | demo
scroll3d 3d頁面滾動 | demo
scrollCover 頁面視差滾入滾出（前後頁面速度不一致） | demo
scrollCoverReverse同上反向 | demo
scrollCoverIn 總是下一張頁面視差滾入 | demo
scrollCoverOut 總是當前頁面視差滾出 | demo

slide 滑動切換，後者頁面有縮放效果 | demo
slideCover 頁面滑入滑出 | demo
slideCoverReverse 同上反向 | demo
slideCoverIn 總是下一張頁面滑入 | demo
slideCoverOut 總是當前頁面滑出 | demo

flow 封面滑動切換 | demo
flowCover 頁面滑入滑出 | demo
flowCoverReverse 同上反向 | demo
flowCoverIn 總是下一張頁面滑入 | demo
flowCoverOut 總是當前頁面滑出 | demo

zoom 縮放切換 | demo
zoomCover 頁面縮進縮出 | demo
zoomCoverReverse 同上反向 | demo
zoomCoverIn 總是下一張頁面縮入 | demo
zoomCoverOut 總是當前頁面縮出 | demo

skew 扭曲切換 | demo
skewCover 頁面扭進扭出 | demo
skewCoverReverse 同上反向 | demo
skewCoverIn 總是下一張頁面扭入 | demo
skewCoverOut 總是當前頁面扭出 | demo

flip 翻轉切換 | demo
flip3d 3d翻轉切換 | demo
flipClock 翻頁鍾效果 | demo
flipPaper 翻書本效果 | demo
flipCover 頁面翻入翻出 | demo
flipCoverReverse 同上反向 | demo
flipCoverIn 總是下一張頁面翻入 | demo
flipCoverOut 總是當前頁面翻出 | demo

bomb 放大切換 | demo
bombCover 頁面大入大出 | demo
bombCoverReverse 同上反向 | demo
bombCoverIn 總是下一張頁面大入 | demo
bombCoverOut 總是當前頁面大出 | demo

注意：除了fade，所有效果都支持指定X或Y軸方向效果，只要在名字後面加上X或Y即可。 例如：scrollY flipX flipCoverX flipCoverInX 等類似。

//注：此處傳值也可直接在new pageSwitch對象時經transition參數傳入
//設置fade效果示例：
pw.setTransition('fade'); //由於內置了fade效果，所以可以直接調用。

//假定沒有內置fade，自定義轉場函數如下
pw.setTransition(function(cpage,cp,tpage,tp){
    /* 過渡效果處理函數
     * @param HTMLElement cpage 參與動畫的前序頁面
     * @param Float cp 目標頁面過渡比率，取值範圍-1到1
     * @param HTMLElement tpage 參與動畫的後序頁面；如果非循環loop模式，則在切換到邊緣頁面時可能不存在該參數
     * @param Float tp 目標頁面過渡比率，取值範圍-1到1；如果非循環loop模式，則在切換到邊緣頁面時可能不存在該參數
     */

    if('opacity' in cpage.style){
        cpage.style.opacity=1-Math.abs(cp);
        if(tpage){
            tpage.style.opacity=Math.abs(cp);
        }
    }else{
        cpage.style.filter='alpha(opacity='+(1-Math.abs(cp))*100+')';
        if(tpage){
            tpage.style.filter='alpha(opacity='+Math.abs(cp)*100+')';
        }
    }
});

//如果你有jQuery類似組件，可以更簡單
pw.setTransition(function(cpage,cp,tpage,tp){
    $(cpage).css('opacity',1-Math.abs(cp));
    $(tpage).css('opacity',Math.abs(cp));
});

jQuery/Zepto適配器

$.fn.extend({
    pageSwitch:function(cfg){
        this[0].ps=new pageSwitch(this[0],cfg);
        return this;
    },
    ps:function(){
        return this[0].ps;
    }
});

//使用
$(container_id).pageSwitch({
    duration:1000,
    transition:'slide'
});

$(container_id).ps().next(); //由於鏈式調用返回依然是jq對象自身，所以如果需要使用pageSwitch對象方法，需要通過 `.ps()` 方法獲取對pageSwitch對象的引用。

兼容性

兼容全平臺，包括IE6+