Web前端開發(fā)第13章：動畫1本章主要內容Web動畫使用變形屬性使用過渡屬性使用動畫屬性案例：引人入勝的動態(tài)照片墻21.Web動畫GIF（GraphicsInterchangeFormat，圖形互換格式）是為跨平臺而開發(fā)的動畫格式，從1989年GIF89a格式問世之后就變得十分流行，Web前端開發(fā)者可通過GIF實現(xiàn)簡單的網(wǎng)頁動畫。GIF支持透明背景圖像，適合在不同背景的網(wǎng)頁上展示。同時許多操作系統(tǒng)中都可以使用GIF，使其展示有著跨平臺的優(yōu)勢。另外，GIF圖片的“體型”很小，很適合在網(wǎng)上傳播。31.1GIF動畫4現(xiàn)場演示：案例13-01：在頁面中使用GIF動畫1.Web動畫Flash是由MacroMedia公司（后被Adobe公司收購）推出的交互式矢量圖和Web動畫的標準，它以絢麗的視覺效果和豐富的交互體驗而著稱。Flash是作為瀏覽器的一個擴展出現(xiàn)，為當時的瀏覽器提供了它們所不具備的功能，正是因為Flash動畫在網(wǎng)頁中的廣泛應用才使得Web前端呈現(xiàn)一種多媒體效果。通過Flash技術，Web前端開發(fā)者可以實現(xiàn)動態(tài)的視覺效果和多元化的信息傳達。51.2Flash動畫6現(xiàn)場演示：案例13-02：在頁面中使用Flash動畫1.Web動畫JavaScript動畫是Web前端中另外一種重要的動畫形式。其實現(xiàn)主要基于JavaScript對HTML的操作，通過JavaScript與CSS樣式的結合可以實現(xiàn)豐富多彩的動畫效果。JavaScript動畫在Web前端開發(fā)中以其良好的兼容性、靈活的控制力占據(jù)著Web動畫開發(fā)的半壁江山。JavaScript動畫的制作偏向編程，開發(fā)使用難度較高，而且其開發(fā)需要具有豐富的Web前端開發(fā)經(jīng)驗和編程經(jīng)驗。71.3JS動畫1.Web動畫動畫是CSS3的一種新特性，它可以在不借助JavaScript和Flash的情況下使大多數(shù)HTML元素動起來。CSS動畫的出現(xiàn)使的Web前端動畫的開發(fā)變得更為簡單，Web前端開發(fā)者只要精通HTML和CSS就可以做出漂亮的動畫，甚至可以較為容易地實現(xiàn)對JavaScript來說十分困難的2D、3D效果。81.4CSS3動畫2.使用變形屬性CSS3變形就是頁面元素的一些展示效果的集合，比如平移、旋轉、縮放和傾斜效果，每個效果都可通過變形函數(shù)（TransformFunction）實現(xiàn)。變形函數(shù)主要包括有rotate（旋轉）、skew（扭曲）、scale（縮放）和translate（移動）以及matrix（矩陣變形）形式，變形屬性語法格式如下所示。none：默認值為，表示不進行變形；transform-function：表示一個或者多個變形函數(shù)，以空格分開就是同時對一個元素進行多種變形的屬性操作。92.1進行簡單變形10現(xiàn)場演示：案例13-03：使用transform屬性進行簡單變形2.使用變形屬性transform-origin屬性該屬性用來指定元素的中心點位置，默認情況下，變形的原點在元素的中心點，也就是元素X軸和Y軸的50%處，其語法如下所示。該屬性值可以是百分比、em、px等具體的值，也可以是top、bottom、right、left和center關鍵詞。2D變形中該屬性可以設置一個參數(shù)值，也可設置兩個屬性值。3D變形中該屬性還包括了Z軸的值，設置元素在三維空間中的像素原點。112.2變形子屬性12現(xiàn)場演示：案例13-04：改變元素transform-origin屬性2.使用變形屬性transform-style屬性該屬性是3D變形中的一個重要屬性，指定其子元素在3D空間中如何呈現(xiàn)，其語法如下所示。該屬性主要包括以下兩個值：flat：默認值，表示所有子元素在2D平面呈現(xiàn)。preserve-3d：所有子元素在3D空間中展示。132.2變形子屬性14現(xiàn)場演示：案例13-05：transform-style屬性效果2.使用變形屬性perspective屬性該屬性用于設置觀看者的位置，并將可視內容映射到一個視錐上，繼而投到2D視平面上。如果不指定該屬性，則Z軸空間中的所有點將平鋪到同一個2D視平面中，并且變換結果中將不存在景深概念。該屬性語法如下所示。none：默認值，表示以無限的視角來看3D物體，但看上去是平的。number：接受一個單位大于0的值，其單位不能為百分比值。152.2變形子屬性16現(xiàn)場演示：案例13-06：perspective屬性效果展示2.使用變形屬性perspective-origin屬性該屬性的使用需要配合perspective屬性，主要用來決定觀看者的視覺觀測點在Z平面的位置，它實際上設置了X軸和Y軸的位置，可設置不同的視覺觀測點，其語法如下所示。第一個值指定視覺觀測點在元素X軸上的位置，屬性值是長度值、百分比或者以下三個關鍵詞之一。left：在包含框的X軸方向長度的0%。center：中間點。right：長度的100%。172.2變形子屬性2.使用變形屬性perspective-origin屬性第二個值指定視覺觀測點在元素Y軸上的位置，屬性值是長度值、百分比或者以下三個關鍵詞之一。top：在包含框的Y軸方向長度的0%。center：中間點。bottom：長度的100%。182.2變形子屬性19現(xiàn)場演示：案例13-07：perspective-origin屬性效果2.使用變形屬性backface-visibility屬性該屬性決定元素旋轉后其背面是否可見，對于未旋轉的元素，該元素的正面面向觀看者。如果該元素沿Y軸旋轉約180度時會導致元素的背面面對觀看者，這時就需要定義元素的背面是否可見，其語法如下所示。該屬性有以下兩個屬性值。visible：默認值，反面可見。hidden：反面不可見。202.2變形子屬性21現(xiàn)場演示：案例13-08：backface-visibility屬性效果2.使用變形屬性2D位移在元素變形中需要使用到多種變形函數(shù)以實現(xiàn)元素的位移、縮放、旋轉等操作。translate()函數(shù)為位移函數(shù)，可在不影響到X、Y軸上其他元素的情況下將元素從原來的位置移動到另外一個位置，其語法如下所示。222.3變形子屬性2.使用變形屬性2D位移translate()函數(shù)可以取一個值，也可取兩個值，取值說明如下：x：代表X軸（橫坐標）移動的向量長度，當其值為正值時，元素向X軸右方向移動，反之其值為負值時，元素向X軸左方向移動。y：代表Y軸（縱坐標）移動的向量長度，當其值為正值時，元素向Y軸下方向移動，反之其值為負值時，元素向Y軸上方向移動。如果要將元素僅僅沿著一個方向移動，可使用translate(x,0)和translate(0,y)來實現(xiàn)。變形函數(shù)中提供了一些單個方向移動的簡單函數(shù)，方便開發(fā)者使用。ranslateX(n)：在水平方向上移動一個元素。translateY(n)：在豎直方向上移動一個元素。232.3變形子屬性2.使用變形屬性2D縮放縮放函數(shù)scale()可以使元素根據(jù)其中心原點進行縮放，默認值為1，即不縮放。當scale()的值為0.01到0.99之間，可以讓一個元素縮??；scale()的值為任何大于或等于1.01的值時，可以讓一個元素放大，其語法如下所示。scale()函數(shù)的語法和translate()函數(shù)非常相似，可以設置一個值，也可以設置兩個值，只有一個值時，第二個值默認和第一個值相等。242.3變形子屬性2.使用變形屬性2D縮放scale()函數(shù)的取值具體說明如下所示。x：指定橫向坐標方向的縮放向量，如果值為0.01~0.99之間，會讓元素在X軸方向縮小，如果值大于或者等于1.01，元素在X軸方向放大。y：指定縱向坐標方向的縮放向量，如果值為0.01~0.99之間，會讓元素在Y軸方向縮小，如果值大于或者等于1.01，元素在Y軸方向放大。如果要使元素僅僅沿著X軸或者Y軸方向縮放，而不是同時縮放的話，可以將函數(shù)設置為scale(x,1)或scale(1,y)。sacleX(n)：相當于scale(x,1)。元素只在X軸縮放元素，默認值為1。sacleY(n)：相當于scale(1,y)。元素只在Y軸縮放元素，默認值為1。252.3變形子屬性2.使用變形屬性2D旋轉旋轉方法roate()可以通過設定的角度參數(shù)對元素實現(xiàn)基于中心原點的2D旋轉。在二維空間內進行操作，設置角度值，用來指定元素旋轉的幅度。如果這個值為正值，元素相對中心原點順時針旋轉。如果這個值為負值，則元素相對中心原點逆時針旋轉。roate()的具體語法如下所示。262.3變形子屬性2.使用變形屬性2D傾斜傾斜函數(shù)skew()能夠讓元素傾斜顯示，可以將一個元素以其中心原點位置圍繞著X軸和Y軸按照一定的角度傾斜。與rotate()方法的旋轉不同是rotate()方法只是旋轉元素，不會改變元素的形狀，其語法如下所示。x-angle：指定元素水平方向（X軸方向）傾斜的角度。y-angle：指定元素豎直方向（Y軸方向）傾斜的角度。272.3變形子屬性2.使用變形屬性2D傾斜在X軸和Y軸傾斜之外還可使用skewX()和skewY()方法讓元素只在水平或者豎直方向傾斜。skewX(angle)：相當于skew(x-angle,0)。按指定的角度沿X軸指定一個傾斜變形。skewX()使元素以其中心點為基點，并在水平方向（X軸）進行傾斜變形。skewY(angle)：相當于skew(0,y-angle)。按指定的角度沿Y軸指定一個傾斜變形。skewY()使元素以其中心點為基點，并在垂直方向（Y軸）進行傾斜變形。282.3變形子屬性2.使用變形屬性2D矩陣CSS3中transform讓操作變形時變得很簡單，如位移函數(shù)translate()、縮放函數(shù)scale()、旋轉函數(shù)roate()和傾斜函數(shù)skew()，這些函數(shù)很簡單，也很方便使用，是CSS動畫中常用的方法，但CSS3中同時提供了一個矩陣函數(shù)matrix()。在CSS中的所有變形方法都可通過matrix()方法來實現(xiàn)，matrix()函數(shù)是所有變形函數(shù)的基礎，使用它可以開發(fā)出更多的變形樣式，而不僅僅局限于位移、縮放、旋轉、傾斜等，具體操作如下。292.3變形子屬性30現(xiàn)場演示：案例13-09：用2D變形方法制作立方體2.使用變形屬性3D位移CSS中的3D位移主要由四個函數(shù)實現(xiàn)：translate3d()、translateX()、translateY()和translateZ()。translate3d()函數(shù)可以使一個元素在三維空間上移動，變形的原理是通過設置三維向量的坐標，定義元素在每個方向上移動了多少，從而實現(xiàn)元素在3D空間中的位移，具體語法如下所示。x：表示橫向坐標位移向量的長度。y：表示縱向坐標位移向量的長度。z：表示Z軸位移向量的長度。312.43D變形函數(shù)2.使用變形屬性3D位移translateX()、translateY()和translateZ()函數(shù)則是translate3d()函數(shù)的簡化形式，分別負責元素在3D空間中沿X、Y、Z軸方向位移的功能，其具體語法如下所示。在translateZ(z)中，取值z指的是Z軸的向量位移長度。使用translateZ()方法可以讓元素在Z軸進行位移。當其值為負值時，元素在Z軸上越移越遠，導致元素在越來越小。當其值為正值時，元素在Z軸上越移越近，導致元素在越來越大。322.43D變形函數(shù)2.使用變形屬性3D縮放CSS中的3D縮放函數(shù)主要有scale3d()、scaleX()、scaleY()和scaleZ()四個，可以控制元素在三維空間上的縮放。scale3d()可以控制一個元素在X、Y、Z軸方向的縮放向量，對元素進行3D的縮放變形，其具體語法如下所示。scaleX()、scaleY()和scaleZ()是scale3d()函數(shù)的簡化形式，其語法如下所示。332.43D變形函數(shù)2.使用變形屬性3D旋轉在CSS中有著四個旋轉函數(shù)用于實現(xiàn)元素的3D旋轉，分別是：rotate3d()、rotateX()、rotateY()和rotateZ()。rotate3d()函數(shù)可以通過設置元素在X、Y、Z軸的方向向量和一個旋轉角度來控制元素在3D空間中的旋轉，其語法如下所示。x：0~1的數(shù)值，用來描述元素圍繞X軸旋轉的向量值。y：0~1的數(shù)值，用來描述元素圍繞Y軸旋轉的向量值。z：0~1的數(shù)值，用來描述元素圍繞Z軸旋轉的向量值。angle：角度值，用來指定元素在3D空間旋轉的角度，如果其值為正值，元素順時針旋轉，反之元素逆時針旋轉。342.43D變形函數(shù)2.使用變形屬性3D旋轉同樣rotateX()、rotateY()和rotateZ()是rotate3d()的簡化形式，用于設置元素在僅在X、Y、Z方向上的旋轉角度，其語法如下所示。angle是一個角度值，其值可以為正值也可以為負值。如果值為正值，元素順時針旋轉。如果值為負值，元素逆時針旋轉。rotateX()、rotateY()和rotateZ()的每個方法的具體功能：rotateX(angle)方法的功能等同于rotate3d(1,0,0,angle)。rotateY(angle)方法的功能等同于rotate3d(0,1,0,angle)。rotateZ(angle)方法的功能等同于rotate3d(0,0,1,angle)。352.43D變形函數(shù)2.使用變形屬性3D矩陣CSS中的3D矩陣比2D矩陣復雜，從二維到三維是從4到9，而在矩陣里是3*3變成4*4，即16。對于3D矩陣而言，本質上很多東西與2D矩陣是一致的，只是復雜程度不一樣而已，其語法如下所示。362.43D變形函數(shù)37現(xiàn)場演示：案例13-10：使用3D變形方法制作立方體2.使用變形屬性時鐘時鐘是日常生活中一種很常見的工具，使用CSS3中的變形元素可以很好的實現(xiàn)這種功能。下面使用CSS3實現(xiàn)動態(tài)的時鐘效果，全部動畫的實現(xiàn)不依賴Flash和JavaScript。382.5案例：制作時鐘39現(xiàn)場演示：案例13-11：制作時鐘3.使用過渡屬性CSS過渡（transition）是通過設定元素起點的狀態(tài)和結束點的狀態(tài)，在一定的時間區(qū)間內實現(xiàn)元素平滑地過渡或變化，是一種補間動畫的機制。通過過渡屬性可以讓元素屬性的改變過程持續(xù)一段時間，而不立即生效，從而形成的一種動畫效果。通過transition可以設置哪個屬性發(fā)生動畫效果、何時開始動畫、動畫持續(xù)多久以及如何動畫，其語法如下所示。該屬性是一個綜合屬性，可設置多個屬性值，實現(xiàn)元素的動畫過渡。403.1設置元素過渡41現(xiàn)場演示：案例13-12：transition屬性效果展示3.使用過渡屬性transition屬性的工作機制是為元素設置兩套樣式用于用戶與頁面的交互，在過渡屬性未觸發(fā)時是一種樣式，觸發(fā)后又是一種樣式。在這個過程中需要指定元素觸發(fā)后需要改變的屬性，這個值主要通過其子屬性transition-porperty來指定，其語法如下所示。transition-porperty屬性的取值說明如下所示。none：沒有指定任何樣式。all：默認值，表示指定元素所有支持該屬性的樣式。property：指定樣式名稱。423.2設置過渡元素3.使用過渡屬性433.2設置過渡元素3.使用過渡屬性transision-duration屬性主要用來設置元素從一個屬性過渡到另一個屬性所需的時間，即從舊屬性過渡的新屬性所消耗的時間，其語法如下所示。time是數(shù)值，單位為秒（s）或者毫秒（ms），可以作用于所有的元素，包括:before和:after偽元素。transition-duration屬性的默認值為0，也就是說元素的屬性變換是即時的。443.3設置過渡持續(xù)時間45現(xiàn)場演示：案例13-13：transision-duration與transition-porperty屬性效果展示3.使用過渡屬性過渡函數(shù)有兩種，分別是transition-timing-function()和step()。transition-timing-function屬性指定元素過渡過程中的“緩動函數(shù)”。此屬性可指定元素的過渡速度以及過渡期間的操作進展情況，可以將某個值指定為預定義函數(shù)、階梯函數(shù)或者三次貝塞爾曲線，其語法如下所示。其值的類型有兩種：單一類型的過渡函數(shù)和三次貝塞爾曲線。463.4制定過渡函數(shù)3.使用過渡屬性過渡函數(shù)有兩種，分別是transition-timing-function()和step()。單一的過渡函數(shù)取值效果如下所示。linear：元素樣式從初始狀態(tài)過渡到終止狀態(tài)是恒速。ease：默認值，元素樣式從初始狀態(tài)過渡到終止狀態(tài)時速度由快到慢，逐漸變慢。ease-in：元素樣式從初始狀態(tài)到終止狀態(tài)時速度越來越快，呈現(xiàn)一種加速狀態(tài)。這種效果稱之為漸顯效果。ease-out：元素樣式從初始狀態(tài)到終止狀態(tài)時，速度越來越慢，呈現(xiàn)一種減速狀態(tài)。這種效果稱為漸隱效果。ease-in-out：元素樣式從初始狀態(tài)到終止狀態(tài)時，先加速再減速。這種效果稱為漸顯漸隱效果。473.4制定過渡函數(shù)3.使用過渡屬性過渡函數(shù)有兩種，分別是transition-timing-function()和step()。三次貝塞爾曲線有著多個精確控制點，可以精確的控制函數(shù)的過渡過程，其語法如下所示。需要注意的是，三次貝塞爾曲線中每個點值只允許0~1的值。step()函數(shù)是過渡中的另外一個函數(shù)，可以將整個操作領域劃成同樣的大小間隔，每個間隔都是相等的，該函數(shù)還指定發(fā)生在開始或者結束的時間間隔是否另外輸出，可采用百分比的形式（如輸出百分比為0%表示輸入變化的初始點）。step()方法非常獨特，允許在固定的間隔播放動畫，可以用來制作逐幀動畫，其語法如下所示。483.4制定過渡函數(shù)3.使用過渡屬性過渡函數(shù)有兩種，分別是transition-timing-function()和step()。step()方法主要包括兩個參數(shù)。第一個參數(shù)是一個數(shù)值n，主要用來指定step()方法間隔的數(shù)量，此值必須是一個大于0的正整數(shù)。第二個參數(shù)是可選的，是start或end，如果第二個參數(shù)忽略，則默認為end值。493.4制定過渡函數(shù)50現(xiàn)場演示：案例13-14：transition-timing-function屬性簡單函數(shù)效果展示案例13-15：使用cubic-bezier實現(xiàn)過渡效果3.使用過渡屬性transition-delay用來指定一個動畫開始執(zhí)行的時間，也就是說當前元素屬性值多長時間后開始執(zhí)行過渡效果，其語法如下所示。transition-delay取值為time，它可以是正整數(shù)、負整數(shù)和0，非零的時候必須將單位設置為秒（s）或者毫秒（ms）。正整數(shù)：元素的過渡動作不會被立即觸發(fā)，當過了設定的時間值之后才觸發(fā)。負整數(shù)：元素的過渡動作會從該時間點開始顯示，之前動作被截斷。0：默認值，元素的過渡動作會立即觸發(fā)，沒有任何反應。513.5規(guī)定過渡延遲時間52現(xiàn)場演示：案例13-16：transition-delay屬性效果展示3.使用過渡屬性偽元素觸發(fā)動畫的觸發(fā)可以使用偽元素觸發(fā)，如鼠標指向時觸發(fā)（:hover）、用戶點擊某個元素時觸發(fā)（:active）、元素獲得焦點狀態(tài)時觸發(fā)（:focus）以及元素被選中時觸發(fā)（:checked）。媒體查詢觸發(fā)媒體查詢觸發(fā)即通過@media屬性觸發(fā)，能夠根據(jù)某些元素的更改應用不同的元素樣式，同時也可以用來觸發(fā)動畫。JavaScript觸發(fā)如果可以基于CSS的狀態(tài)更改觸發(fā)CSS動畫，自然的可以使用JavaScript做到這一點。最簡單的的方法是通過切換元素的類名稱進行CSS動畫的觸發(fā)。533.6過渡觸發(fā)54現(xiàn)場演示：案例13-17：通過不同的方法觸發(fā)過渡動畫3.使用過渡屬性簡介導航是網(wǎng)站中的重要組成部分，通過導航用戶可以了解網(wǎng)站的內容層次結構，并訪問網(wǎng)站的各個部分，并且美觀恰當?shù)膶Ш娇梢允鬼撁娓斓淖プ∮脩舻淖⒁饬Γ岣哂脩粽扯取?53.7案例：制作動態(tài)網(wǎng)站導航56現(xiàn)場演示：案例13-18：制作動態(tài)導航4.使用動畫屬性在CSS3中，除了可以使用transition功能實現(xiàn)的動畫效果外，還可以通過animation功能實現(xiàn)更為復雜的動畫效果。animation功能與transition功能基本相同，都是通過改變元素屬性值來實現(xiàn)動畫效果的，其區(qū)別在于：使用transition功能時只能通過指定屬性的開始值與結束值，然后在這兩個屬性值之間進行平滑過渡的方式實現(xiàn)動畫效果，因此不能實現(xiàn)較為復雜的動畫效果。使用animation功能時，通過定義多個關鍵幀以及定義每個關鍵幀中元素的屬性值來實現(xiàn)更為復雜的動畫效果，其語法如下所示：574.1建立基本動畫58現(xiàn)場演示：案例13-19：animation屬性效果展示4.使用動畫屬性animation動畫創(chuàng)建的原理是，通過設置關鍵幀的方式將一套CSS樣式逐漸變化為另一套樣式。在動畫過程中，要能夠多次改變CSS樣式，既可以使用百分比來規(guī)定改變發(fā)生的時間。同時也可以通過關鍵詞“from”和“to”來實現(xiàn)，“from”和“to”等價于0%和100%。0%是動畫的開始時間，100%是動畫的結束時間。animation定義關鍵幀的語法如下所示。594.2動畫關鍵幀4.使用動畫屬性animation動畫創(chuàng)建的原理@keyframes有自身的語法規(guī)則：其命名由@keyframes開頭，后面緊跟著是“動畫名稱”加上一對花括號“{...}”，括號中是不同時間段的樣式規(guī)則，類似于CSS的寫法。一個@keyframes中的樣式規(guī)則是由多個不同的百分比構成的，如0%~100%，可以在這個規(guī)則中創(chuàng)建更多的百分比，分別給每個百分比中需要動畫效果的元素加上不同的屬性，從而讓元素達到一種不斷變化的效果。如果使用百分比設置關鍵幀，則其中的%不能省略，如果沒有加上，將沒有任何效果，因為@keyframes的單位只接受百分比值。604.2動畫關鍵幀4.使用動畫屬性animation動畫創(chuàng)建的原理使用from、to的方式設置關鍵幀的代碼如下所示。614.2動畫關鍵幀4.使用動畫屬性animation動畫創(chuàng)建的原理使用百分比的方式設置關鍵幀的代碼如下所示。624.2動畫關鍵幀4.使用動畫屬性animation-name屬性該屬性主要用來調動動畫，其調用的動畫是通過@keyframes關鍵幀定義好的動畫，其語法如下所示。animation-name用來定義一個動畫的名稱，其主要有兩個值。keyframename：是由@keyframes創(chuàng)建的動畫名稱，也就是說此處的keyframename需要和@keyframes中的animationname一致，如果不一致將不會實現(xiàn)任何動畫效果。none：默認值，當值為none時，將沒有任何動畫效果，其可以用于覆蓋任何動畫。634.3動畫子屬性4.使用動畫屬性aimation-duration屬性該屬性主要用來設置CSS3動畫播放時間，其用法和transition-duration類似，其語法如下所示。animation-timing-function屬性該屬性用來設置動畫播放的方式，其語法如下所示。644.3動畫子屬性4.使用動畫屬性animation-delay屬性該屬性用來定義動畫開始播放的時間，其語法如下所示。animation-iteration-count屬性該屬性用來定義動畫播放的次數(shù)，其語法如下所示。此屬性主要用于定義動畫播放多少次，其值通常為整數(shù)，但也可以使用帶小數(shù)的數(shù)字。此屬性默認值為1，這意味著動畫從開始到結束只播放一次。如果取值為infinite，動畫將會無限次的播放。654.3動畫子屬性4.使用動畫屬性animation-direction屬性該屬性主要用來設置動畫播放的方向，其語法如下所示。animation-direction是用來指定元素動畫的播放方向的，其主要有兩個值，