【前端入門系列】HTML5動畫與動效（之四）

本系列的前三篇文章分別從transition動畫、animation動畫、逐幀動畫三方面對HTML5中的基礎動畫實現方式進行了介紹，接下來的文章將聚焦於對這些基礎動畫實現方式以更加詳細的操作講解。在本文中，我們將運用transition動畫來模擬實現HTML5中的「頁面切換」效果，並通過結合簡單的JavaScript代碼來形成帶有交互的動畫效果。照例，本文閱讀對象為前端初學者，老司機們可繞道。

複習：Transition動畫實現

首先，讓我們來複習一下transition動畫。

Transition動畫是為頁面元素設置某個需要產生動畫效果的屬性，如寬度（width）、高度（height）、透明度（opacity），甚至3D旋轉等，並使得這些屬性的值在發生變化時產生相應的過渡效果。我們常常在製作類似按鈕滑鼠經過和移出效果時使用transition。

以下是一個簡單的transition動畫例子，HTML代碼如下：

<a href="">This is a link</a>n

該元素默認顯示為無下劃線的白色文字，當滑鼠指針經過時切換為黑色，CSS代碼如下：

a{ntcolor:#FFF;nttext-decoration:none;ntfont-family:sans-serif;ntfont-size:34px;n}na:hover{ntcolor:#000;n} n

要使滑鼠指針滑過鏈接時按鈕文字慢慢從白色過渡到黑色，transition動畫代碼如下：

a{nt-webkit-transition:all .5s;nttransition:all .5s;n}n

以上代碼通過使用transition屬性指定了超鏈接的過渡動畫，動畫屬性為all，即當超鏈接元素中任何屬性發生變化，都以動畫形式呈現，動畫的時間為0.5秒（-webkit-行為兼容性寫法）。測試頁面，當滑鼠指針移動到超鏈接上方時，可見鏈接在0.5秒時間內逐漸從白色過渡到黑色，動畫效果如下圖所示。

創建一個基礎頁面

接下來，我們通過創建HTML5中的「頁面切換」效果，來進一步運用transition動畫（本小節與transition動畫無關，各位也可直接跳到下一段閱讀）。

首先，讓我們寫一段簡單的頁面HTML代碼，如下：

<article id="tablet">n <img src="tablet.png" alt="tablet">n <h1>Comprehensam</h1>n <p>Mel homero labores ce maluisset ... aliquam te.</p>n <a href="#wifi">Next</a>n</article>n<article id="wifi">n <img src="wifi.png" alt="wifi">n <h1>Adversarium</h1>n <p>Ea qui graece facilisi persequeris ... similique ex qui.</p>n <a href="#tablet">Next</a>n</article>n

在以上代碼中包含了兩個article元素，其id屬性分別為tablet和wifi。每個article中都有圖片、標題、文欄位落，以及一個Next鏈接。我們希望每個article元素都顯示為一張全屏頁面，當瀏覽者單擊頁面中的「Next」鏈接時，切換到另一個頁面顯示。而在兩個頁面的切換中，我們將適當加入一定的動畫效果。

nn

要實現以上效果，需要做一些CSS樣式上的準備工作。首先，要使得頁面全屏展示，為html和body設置100%的高度是必不可少的，代碼如下：

html, body{ntheight:100%;n}nbody {ntmargin:0;ntpadding:0;ntfont-family:sans-serif;nttext-align:center;ntcolor:#FFF;ntoverflow:hidden;ntposition:relative;n}n

在以上代碼中，我們設置了body的overflow屬性為hidden，使得超出全屏區域以外的元素不被顯示。接下來，設置兩個article元素為相對定位，其中tablet的left屬性為0，使其默認顯示在屏幕中，wifi的left屬性為100%，使其位於瀏覽器右側，默認不顯示，代碼如下：

article{ntposition: absolute;ntwidth:100%;ntheight:100%;ntpadding:100px;ntbox-sizing:border-box;nt-webkit-transition:all 1s ease-in-out;nttransition:all 1s ease-in-out;nttop:0;n}n#tablet{ntbackground:#4ac4aa;ntleft:0;n}n#wifi{ntbackground:#ea5634;ntleft:100%;n}n

nn

在以上代碼中，我們為tablet和wifi頁面分別設置了綠色和紅色的背景色，並設置了transition動畫。測試頁面，現在僅能看到的是綠色背景的tablet頁面，如圖所示。

為了使頁面有良好的視覺效果，我們略微增加一些頁面中元素的修飾樣式，如改變文本的字型大小，增加間距，為Next鏈接創建圓角按鈕顯示樣式等，代碼如下：

h1{ntfont-size:4em;ntborder-bottom:1px solid rgba(255,255,255,.2);ntpadding-bottom:30px;n}np{ntcolor:rgba(255,255,255,.8);ntmargin-bottom:30px;n}na{ntfont-size:1.5em;ntpadding:5px 50px;ntborder:1px solid #FFF;ntborder-radius:4px;nttext-decoration:none;n}n

nn

修飾後的頁面效果如圖所示。

在本系列此前的文章中，我們製作的transition動畫都是在hover狀態下觸發，本例中我們將改為單擊Next按鈕後觸發頁面切換動畫。在此藉助jQuery來實現這一交互功能。

在body結束標籤之前插入jQuery文件的引入代碼，並為超鏈接的click事件創建響應函數，代碼如下：

<script type="text/javascript" src="jquery-2.1.4.min.js"></script>n<script type="text/javascript">nt$(document).ready(function() {ntt$(a).click(function(e){nttte.preventDefault();nttt$(#tablet).toggleClass(move);nttt$(#wifi).toggleClass(move);ntt});nt});n</script>n

在以上代碼中，我們為兩個頁面中的a元素均設置了相同的功能函數。在函數中，首先調用了click事件對象的preventDefault方法，其目的是阻止超鏈接的默認錨點跳轉動作。接下來，使tablet和wifi兩個頁面分別切換名為move的類，也就是說當這兩個頁面沒有move類時將添加這個類，反之則去除這個類。move類的作用將使得頁面在切換後移動到目的位置。

橫向平移動畫效果

接下來，我們就可以著手設置動畫效果了。

我們設想的頁面切換效果是點擊tablet頁面中的Next按鈕時，該頁面向左移動到屏幕之外，同時wifi頁面從屏幕右側向左移動到屏幕中央，完成切換過程。因此，對於tablet而言，其目標位置為屏幕左側以外，即left屬性為-100%的位置，而wifi的目標位置則是left屬性為0。接下來，我們為兩個頁面分別創建move類，代碼如下：

#tablet.move{ntleft:-100%;n}n#wifi.move{ntleft:0;n}n

nn

在以上代碼中，我們設置了頁面各自的目標位置。測試頁面，當單擊tablet頁面中的按鈕時，tablet和wifi將同時被賦予move類，此時將產生向左移動的頁面切換動畫效果。

當切換到wifi頁面後，單擊其中的Next按鈕，此時tablet和wifi中的move類將同時被去除，兩者將向右移動，回到其初始的位置。

縱向切換動畫效果

nn

我們也可以將頁面的切換方向由橫向改為縱向，只需要將left屬性修改為top屬性即可。代碼如下：

#tablet{nttop:0;n}n#wifi{nttop:100%;n}n#tablet.move{nttop:-100%;n}n#wifi.move{nttop:0;n}n

nn

頁面的切換動畫如圖所示。

縮放切換動畫效果

通過對頁面進行縮放，也能產生不錯的切換效果。而要控制縮放，則需要使用transform屬性中的scale方法。該方法有兩個參數，分別是水平方向和垂直方向的縮放值，0代表縮放到最小，1代表縮放到原始大小，代碼如下：

#tablet{nt-webkit-transform:scale(1,1);nttransform:scale(1,1);n}n#wifi{nt-webkit-transform:scale(0,0);nttransform:scale(0,0);n}n#tablet.move{nt-webkit-transform:scale(0,0);nttransform:scale(0,0);n}n#wifi.move{nt-webkit-transform:scale(1,1);nttransform:scale(1,1);n}n

nn

頁面的縮放切換效果如圖所示。

3D切換動畫效果

我們也可以使用3D屬性來呈現頁面切換效果。在設置3D變換之前，我們首先要為article的父元素，也就是body元素設置3D動畫的透視效果，在此設置perspective屬性為1500像素，即3D動畫中元素距離視圖的距離為1500像素。代碼如下：

body {nt-webkit-perspective: 1500px;ntperspective: 1500px;n}n

nn

我們的製作目的是將頁面沿垂直中軸進行3D旋轉，形成翻面效果，當tablet頁面翻過去後，其背面的wifi頁面翻到正面並顯示。這一動畫效果要求翻面後，背面的頁面不可見，因此需要將頁面的backface-visibility屬性預先設置為hidden，即翻面後隱藏，代碼如下：

article{nt-webkit-backface-visibility: hidden;ntbackface-visibility: hidden;n}n

nn

接下來，我們為頁面的兩種狀態各自設置相應的3D旋轉度，在此設置頁面圍繞其Y軸旋轉，首次切換時tablet從0度旋轉到-180度隱藏起來，wifi則從180度旋轉到0度完成顯示切換。代碼如下：

#tablet{nt-webkit-transform:rotateY(0deg);nttransform:rotateY(0deg);n}n#wifi{nt-webkit-transform:rotateY(180deg);nttransform:rotateY(180deg);n}n#tablet.move{nt-webkit-transform:rotateY(-180deg);nttransform:rotateY(-180deg);n}n#wifi.move{nt-webkit-transform:rotateY(0deg);nttransform:rotateY(0deg);n}n

nn

測試頁面， 3D旋轉切換效果如圖所示。

nnnn

多樣化切換動畫效果

最後，我們也可以將3D旋轉與縮放結合起來，產生更為複雜的切換效果，代碼如下：

#tablet{nt-webkit-transform:rotateY(0deg) scale(1,1);nttransform:rotateY(0deg) scale(1,1);n}n#wifi{nt-webkit-transform:rotateY(180deg) scale(0,0);nttransform:rotateY(180deg) scale(0,0);n}n#tablet.move{nt-webkit-transform:rotateY(-180deg) scale(0,0);nttransform:rotateY(-180deg) scale(0,0);n}n#wifi.move{nt-webkit-transform:rotateY(0deg) scale(1,1);nttransform:rotateY(0deg) scale(1,1);n}n

nn

測試頁面，現在頁面切換中會發生同時翻面和縮放的動畫效果，如圖所示。

小結

注意為頁面元素增加過多的transform渲染效果，尤其是3D效果，將會嚴重消耗手機等移動端的性能，因此在移動端應謹慎使用以上效果。

現在，transition動畫切換就基本介紹到這裡了。不知道大家有沒有發現，雖然是在講transition動畫，但更多的時候我們都是在運用transform，這一點，各位可以先記住，然後在具體的實踐中再慢慢體會吧。

THE END!

廣告：

個人新書 《HTML5基礎知識、核心技術與前沿案例》，噹噹、京東、亞馬遜有售。

噹噹：《HTML5基礎知識 核心技術與前沿案例》(劉歡)

京東：《HTML5基礎知識 核心技術與前沿案例》(劉歡)

推薦閱讀：