HTML5動畫與動效之一

前言

這篇是入門級教程，老司機繞過了。今日早讀文章由《HTML5基礎知識 核心技術與前沿案例》作者 @ 劉歡授權分享。

正文從這開始～

動畫是一個Web作品中重要的「調味劑」。

在過去十餘年中，web頁面動畫與動效的實現方式發生了巨大變化。最開始的頁面動畫往往是以GIF圖片為主，其呈現內容大都是各類廣告banner、站點鏈接等，瀏覽者與動畫之間幾乎沒有交互。

隨著Flash的出現，頁面中出現的動畫越來越多，除了各種動畫廣告外，還出現了各種頁面動畫組件，甚至是全站點的動畫動效，交互性也大大增強。近年來Flash不斷衰落，頁面動畫與動效的呈現載體更多地轉移到了HTML5之上，這導致了幾個顯著的變化：

一是動畫動效更加聚焦於頁面細節，如聚焦於某個鏈接、按鈕或圖標等，

二是動畫能夠更加緊密地與頁面中其他元素結合，不再像Flash那樣局限於單個SWF範圍之內，

三是動畫製作更加依靠技巧和設計者的獨特創意，任何一種動效的實現都可能會存在多種途徑，需要設計者綜合權衡後作出抉擇，

四是全站點的動畫動效的實現難度更大，更加考驗設計師多種前端知識和技術的綜合運用能力。

本系列文章將著重介紹幾種常見的HTML5動畫效果，希望能夠藉此向大家較為全面地展示各種動畫與動效的製作技巧。

此外，對於初學者而言，某些HTML5動畫效果雖然非常容易上手使用，但在實際開發中也應該避免運用過「濫」，將整個頁面弄得過於花里胡哨。

1. 動畫與動效核心技巧

HTML5技術的發展非常迅猛，近年來，新的頁面動畫實現方式層出不窮，並仍在不斷擴增中。在這些紛繁複雜，令人眼花繚亂的效果中，我們可以梳理出兩條主要的脈絡，同時也是目前Web動畫的兩大實現途徑：

1. CSS3動畫。這類動畫是當前頁面動畫的主力軍，主要通過transition和animation兩種方式來實現。其中，transition是為頁面元素設置某個需要產生動畫效果的屬性，如寬度（width）、高度（height）、透明度（opacity），甚至3D旋轉等，並使得這些屬性的值在發生變化時產生相應的過渡效果。我們常常在製作類似按鈕滑鼠經過和移出效果時使用transition。而animation則是關鍵幀動畫，它可以預先為動畫設置多個節點，在每個節點中含有不同的狀態屬性，通過使用animation我們可以得到更為複雜的動畫效果。通俗地說，transition是簡化版的CSS3動畫，而animation則是強化版的CSS3動畫。在日常開發中transition的使用頻率更高一些，我們往往只有在遇到transition無法解決的問題時，才會轉而使用animation。

2. JavaScript動畫。這類動畫是通過JavaScript來動態地控制並刷新元素的各種屬性值，以形成動畫效果，其中元素的控制可以針對頁面DOM結構中的某個節點，也可以通過深入控制HTML5中的Canvas元素來生成Canvas動畫。在JavaScript的實現方式方面，一方面可以通過編寫原生代碼，另一方面也可以使用jQuery、GASP之類的類庫來加以實現。

一般來說，大部分簡單的頁面動畫都可以使用transition實現。JavaScript動畫則往往用於更加複雜，或是需要結合各類用戶交互操作的動畫效果。在運行效率方面，像jQuery這種JavaScript類庫的動畫效果要低於CSS3動畫，應謹慎使用。而在兼容性方面， CSS3動畫的兼容性要差於jQuery等類庫動畫，前者並不支持IE9之前的舊版瀏覽器。

除以上兩者外，我們也可以使用SVG來製作動畫，這部分的相關知識將放在後續學習系列中加以介紹。

接下來，我們將通過幾個具體的案例來開始本系列的學習。

2.入門案例：按鈕元素動畫效果

首先讓我們來看一個簡單的超鏈接動畫案例，HTML代碼如下：

This is a link

接下來為這個鏈接設置一些樣式，使其默認顯示為無下劃線的白色文字，而當滑鼠指針經過時切換為黑色，代碼如下：

a{

color:#FFF;

text-decoration:none;

font-family:sans-serif;

font-size:34px;

}

a:hover{

color:#000;

}

測試頁面，滑鼠指針滑過鏈接前和滑過鏈接後的顯示效果分別如下圖所示，這一狀態的切換是在一瞬間發生的。

現在我們將為這個過程添加一些簡單的動畫效果，使滑鼠指針滑過鏈接時不會立即變色，而是慢慢從白色過渡到黑色。代碼如下：

a{

-webkit-transition:all.5s;

transition:all.5s;

}

以上代碼通過使用transition屬性指定了超鏈接的過渡動畫，動畫屬性為all，即當超鏈接元素中任何屬性發生變化，都以動畫形式呈現，動畫的時間為0.5秒。此外，我們還為webkit瀏覽器加上-webkit-的兼容性前綴。測試頁面，現在當滑鼠指針移動到超鏈接上方時，鏈接將在0.5秒時間內逐漸從白色過渡到黑色，其中間效果如圖所示。

上述transition動畫僅僅是使超鏈接的文字顏色在滑鼠指針滑入前後發生了改變，我們也可以將「all」修改為「color」，其測試效果將完全相同。代碼如下：

a{

-webkit-transition:color.5s;

transition:color.5s;

}

以上的這種動畫效果寫法很簡單，效果卻非常明顯。實際上，我們可以將這兩行代碼添加到網站的CSS文件中，就能夠使得整個站點的所有超鏈接都帶有過渡動畫效果。

3.添加動畫屬性

接下來我們再將以上超鏈接的顯示樣式稍作修改，使其顯示為圓角按鈕，並創建transition動畫，代碼如下：

a{

color:#FFF;

text-decoration:none;

font-family:sans-serif;

font-size:34px;

display:block;

width:350px;

height:60px;

line-height:60px;

border:1px solid #FFF;

border-radius:4px;

text-align:center;

-webkit-transition:all.5s;

transition:all.5s;

}

a:hover{

color:#d53ea4;

background:#FFF;

}

在以上代碼中，我們將a元素修改為了塊級元素，設置了高度和寬度分別為350和60像素，並設置行高與高度相同，以確保文字垂直居中顯示。為了使其顯示為按鈕形狀，我們添加了幅度為4像素的圓角，並添加了1像素的白色邊框。滑鼠指針滑過與否的兩個屬性差別是背景顏色和文字顏色，在未滑過時我們並未設置背景顏色，文字顏色為白色，在滑過時，我們將背景顏色設置為白色，文字顏色則設置為與頁面背景相同的艷紅色。測試頁面，滑鼠指針滑過的漸變動畫效果如下圖所示。

4.動畫速度曲線

仔細觀察按鈕的過渡動畫，我們可以發現整個過程由慢速開始，然後變快，然後再以慢速結束。這是因為transition中默認的動畫速度曲線為「ease」。我們也可以將動畫改為勻速進行，代碼如下：

a{

-webkit-transition:all.5s linear;

transition:all.5s linear;

}

在以上代碼中，linear代表勻速動畫。測試頁面，我們將發現按鈕顏色的過渡效果將變得平穩和單一。除linear和ease外，還有ease-in、ease-out、ease-in-out等其他速度曲線可供選擇，分別代表慢速開始，慢速結束，慢速開始和結束。

在以上動畫中，按鈕的字體顏色（color）和背景（background）這兩種屬性發生了改變，因此未添加linear速度曲線前的transition動畫又等同於以下代碼：

a{

-webkit-transition:color.5s,background.5s;

transition:color.5s,background.5s;

}

由以上代碼可知，我們可以在transition中添加多個屬性動畫，彼此以逗號相分隔。

事實上，我們也可以為文字顏色和背景動畫分別配置不同的時間和速度曲線等參數。例如，使文字顏色動畫時長為5.5秒，速度曲線為linear，背景動畫時長為0.5秒，速度曲線為ease-in-out，代碼如下：

a{

-webkit-transition:color5.5s linear,background.5s ease-in-out;

transition:color5.5s linear,background.5s ease-in-out;

}

測試以上頁面，我們將發現當滑鼠指針滑過按鈕時，背景很快變色，而文字顏色則將經過一個較為緩慢的變化過程。

我們還能為動畫設置延遲時間，如為背景動畫設置1秒鐘的延遲，代碼如下：

a{

-webkit-transition:color.5s linear,background.5s ease-in-out 1s;

transition:color.5s linear,background.5s ease-in-out 1s;

}

測試以上頁面，我們將發現當文字顏色已經完全改變後，背景顏色還未發生變化，直至1秒後背景顏色才突然變為白色。多種屬性的設置組合使我們能夠實現一些更加複雜的動畫效果。

5.多元素動畫效果

我們也可以在同一個按鈕中為多個元素創建transition動畫。在以上按鈕的基礎之上，為其設置左側內邊距，使按鈕文字靠右顯示，同時將按鈕的position屬性設置為relative，以便於後續步驟中，在其內部添加絕對定位的元素。代碼如下：

a{

/*其他代碼*/

box-sizing:border-box;

padding-left:140px;

position:relative;

}

修改後的按鈕文字效果如圖所示。

接下來，我們將使用after偽元素為按鈕創建一個圖標，在此使用了flat-UI的圖標字體，字體名為「icon-font」。我們將圖標以絕對定位的方式顯示在按鈕左側，同時設置其transition動畫。代碼如下：

a::after{

font-family: icon-font ;

content: e607 ;

position:absolute;

right:85%;

-webkit-transition:all.5s;

transition:all.5s;

}

添加了圖標後的按鈕效果如圖所示。

接下來，我們為滑鼠指針的滑過狀態創建相應樣式屬性，代碼如下：

a:hover{

padding-left:20px;

background:rgba(,,,.1);

}

a:hover::after{

right:5%;

}

以上代碼設置了當滑鼠指針滑過按鈕時，按鈕左側內邊距減小，使文字從右側移動到左側，並將背景顏色更改為帶有10%透明度的黑色。同時，也為滑鼠指針滑過狀態下的after偽元素設置了新的屬性狀態，使得圖標向右移動，停止在與右側的距離等於整體寬度的5%的位置。測試頁面，滑鼠指針滑過按鈕的效果如圖所示。

注意：偽元素的hover狀態的寫法應為:hover::after{...}，而不能為::after:hover{...}。

以上就是目前常見的一種按鈕元素的動畫製作方法。除修改文字顏色、背景顏色、文字和圖標位置外，你還可以充分發揮想像，製作帶有其他變化形式的動畫效果。

最後，為你推薦

關於本文

作者：@劉歡

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！