前言
隨著移動網(wǎng)絡(luò)速率和設(shè)備硬件水平的不斷提升,webapp的發(fā)展更加的native化,其表現(xiàn)效果和性能也會越來越好,在可預(yù)計的未來很有可能替代native或者平起平坐,那么我們研究更好的交互體驗是非常有必要的。
目前我們所常見的webapp越來越多的是以SPA(single page application)的模式進(jìn)行開發(fā),同時嵌套在android或者ios本地殼里面,也就是hybrid應(yīng)用,這種開發(fā)方式所帶來的優(yōu)勢就不多討論,本文研究的重點是在SPA模式中,頁面間橫向滑動切換場景時模式是怎樣設(shè)計的。在這篇文章里,筆者將展示并闡述四種橫向滑動模式的架構(gòu)布局及CSS設(shè)計方案,供大家參考(多圖請耐心加載)。
一、容器整體滑動(DEMO只演示A-B-C-B,下同)
模擬動畫效果見下圖(上),滑動分解見下圖(下):
DEMO地址:http://nirvana.sinaapp.com/demo_slider/slider_1.html
布局方式:父容器相對定位并撐滿整個device的viewport,子頁面絕對定位并依次并排排列在viewport中(從左到右)
.view-container { // 父容器布局方式 position: relative; width: 100%; height: 100%; padding-top: 44px; box-sizing: border-box; -webkit-transform: translate3d(0,0,0); //激活GPU 3D加速 -webkit-backface-visibility: hidden; } .page-container { // 子頁面布局方式 position: absolute; z-index: 1; top: 0; left: 0; // 初始化為0,動態(tài)計算第N個page,并賦值(N-1)*100% width: 100%; height: 100%; overflow: hidden; background-color: #F8F8F8; }
滑動方式:父容器利用CSS3的動畫transform3D進(jìn)行X軸的滑動(JS控制直接噴到DOM節(jié)點中)
-webkit-transform: translate3d(-100%, 0px, 0px); -webkit-transition: 300ms; transition: 300ms;
二、單個頁面滑動
模擬動畫效果,見下圖:
DEMO地址:http://nirvana.sinaapp.com/demo_slider/slider_2.html
布局方式:父容器高度100%,子容器正常文檔流布局(X軸隱藏,Y軸默認(rèn)原生滾動)
.view-container { height: 100%; } .page-container { position: relative; width: 100%; min-height: 100%; overflow-x: hidden; background-color: #F8F8F8; }
滑動方式:利用class添加動畫樣式(keyframes animation),左右進(jìn)出各一種
@-webkit-keyframes sliderightout{from{-webkit-transform:translateX(0px);opacity:1}to{-webkit-transform:translateX(50%);opacity:0}} @-webkit-keyframes slideleftin{from{-webkit-transform:translateX(-50%);opacity:0}to{-webkit-transform:translateX(0px);opacity:1}} @-webkit-keyframes slideleftout{from{-webkit-transform:translateX(0px);opacity:1}to{-webkit-transform:translateX(-50%);opacity:0}} @-webkit-keyframes sliderightin{from{-webkit-transform:translateX(50%);opacity:0}to{-webkit-transform:translateX(0px);opacity:1}} .slideleftout{-webkit-animation:slideleftout 350ms ease-in-out;} .slideleftin{-webkit-animation:slideleftin 350ms ease-in-out;} .sliderightout{-webkit-animation:sliderightout 350ms ease-in-out;} .sliderightin{-webkit-animation:sliderightin 350ms ease-in-out;} .animatestart{position:absolute;top:0;left:0;z-index:3;width:100%;height:100%;overflow-x:hidden} .animatestart.page-container{overflow-x:hidden;-webkit-transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;background-color:#f5f5f5}
三、雙頁聯(lián)動滑動
模擬動畫效果,見下圖:
DEMO地址:http://nirvana.sinaapp.com/demo_slider/slider_3.html
布局方式:類似于第一種,父容器和子容器都絕對定位于viewport中,不同點是父類的上級布局更加細(xì)分,且大膽使用了webkit-box彈性盒子;子容器沒有并排顯示,而是重疊隱藏
.view-container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .page-container { position: absolute; z-index: 1; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; overflow: hidden; background-color: #F8F8F8; -webkit-transform:translate3d(0,0,0); -webkit-backface-visibility:hidden; }
滑動方式:滑動開始時先將隱藏的下一個子頁面拉到viewport右側(cè)與當(dāng)前子頁面平行,然后緊接著兩個子頁面同步滑動,最后回歸樣式,中間的時間差事件均有JS控制(詳見demo邏輯)
四、三舞臺雙頁視差滑動
模擬動畫效果見下圖(上),分解邏輯圖見下圖(下):
DEMO地址:http://nirvana.sinaapp.com/demo_slider/slider_4.html
布局方式:這里我設(shè)定了三舞臺(stage)的概念,其實就是當(dāng)前viewport的左右側(cè)各虛擬一個同樣大小的viewport,當(dāng)然,正常情況下我們只能看到當(dāng)前舞臺的子頁面,leftstage是-100%的位置,rightstage是100%的位置,我們分別用三個class來定義:pageOld、pageInit、pageNew來代替
.pageInt { -webkit-transform: translateX(0); transform: translateX(0); } .pageOld { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .pageNew { -webkit-transform: translateX(100%); transform: translateX(100%); } }
滑動方式:
1,定義正向(向左滑)和反向(向右滑)兩個概念,;
2,定義快速和慢速兩個概念;
則就是四種動態(tài)兩種組合:正向快速+正向慢速、反向快速+反向慢速;
.slideSlow { -webkit-transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s; -ms-transition: transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s; } .slideFast { -webkit-transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0); -ms-transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0); } .slideSlowBack { -webkit-transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0); -ms-transition: transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0); } .slideFastBack { -webkit-transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s; -ms-transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s; }
其中在三舞臺視差滑動中的滑動曲線是經(jīng)過數(shù)次的真機(jī)實驗后找到的參數(shù)(cubic-bezier(0.42, 0, 0.58, 1.0)),這條曲線的滑動形態(tài)最接近IOS APP頁面的滑動,希望對大家有用,鑒于時間精力有限,這四種模式只能從架構(gòu)布局和樣式設(shè)計層面探討,關(guān)于WEBAPP性能架構(gòu)及一些深層次的問題,歡迎與我交流(微博@憶龍Lau),相互學(xué)習(xí)!
相關(guān)資料:
四種架構(gòu)分別來源于:攜程商旅無線2.0、攜程無線、SenchaTouch UI、攜程商旅無線3.0(Nirvana);
JS框架工具有:zeptojs(移動端基礎(chǔ)框架庫),iscroll(縱向平滑滑動工具),fastclick(快速點擊事件),backbone(MVC架構(gòu));