摘要:什么是逐幀動畫要了解逐幀動畫,首先要明確什么是逐幀動畫。簡而言之,實現逐幀動畫需要兩個條件相關聯的不同圖像,即動畫幀連續播放。因此在觸屏頁面中逐幀動畫使用廣泛,下文將對其進行詳細介紹。因此,逐幀動畫也被稱為精靈動畫。
什么是逐幀動畫
要了解 CSS3 逐幀動畫,首先要明確什么是逐幀動畫。
看一下維基百科中的定義:
定格動畫,又名逐幀動畫,是一種動畫技術,其原理即將每幀不同的圖像連續播放,從而產生動畫效果。
簡而言之,實現逐幀動畫需要兩個條件:(1)相關聯的不同圖像,即動畫幀;(2)連續播放。
我們兒時的記憶,手翻書,他所實現的就是逐幀動畫:
逐幀動畫
(圖片來源:知乎)
前端逐幀動畫實現方案
在細聊 css3 逐幀動畫之前,我們先大致了解下前端實現逐幀動畫有哪些方案。
其實不外乎三種技術(視頻可以實現所有類型的動畫,暫不納入):gif、JavaScript、CSS3 Animation。
前文提到,實現逐幀動畫需要兩個條件:(1)動畫幀;(2)連續播放。
下面我們仔細自己分析下這三種技術是怎么實現上述條件的:
(1)gif
在觸屏頁中,gif 常被用來做加載動畫。如《陌陌不孤獨飯局》的加載動畫:
gif
gif 可以有多個動畫幀,連續播放是其自身屬性,是否循環也是由其本身決定的。它往往用來實現小細節動畫,成本較低、使用方便。
但其缺點也是很明顯的:
畫質上,gif 支持顏色少(最大256色)、Alpha 透明度支持差,圖像鋸齒毛邊比較嚴重;
交互上,不能直接控制播放、暫停、播放次數,靈活性差;
性能上,gif 會引起頁面周期性的 paint ,性能較差。
(2)JavaScript
JS 與 CSS3,一般是將動畫幀放到背景圖中。
不同的是, JS 是使用腳本來控制動畫的連續播放的:
可以直接改變元素的 background-image
也可以將動畫幀合并成雪碧圖,通過改變 background-position 來實現
還是《陌陌不孤獨飯局》的例子:
其中有一個伸手取飯盒的動畫,一共有19幀,且在第11幀處有一個交互,將雪碧圖放入背景中,通過不同的樣式實現不同的 background-position ,使用 JS 改變樣式名:
1
2
3
4
5
6
7
.sprite-rice-1,
.sprite-rice-2,
…
.sprite-rice-19{
background-image:url(http://7xnvb2.com2.z0.glb.qiniucdn.com/img/rice.jpg); background-repeat:no-repeat
}
1
2
3
4
.sprite-rice-1{background-position:-1800px 0}
.sprite-rice-2{background-position:-900px -489px}
…
.sprite-rice-19{background-position:-1200px 0}
sprite
使用 JS 的優點是兼容性佳,交互靈活。
(3)CSS3 Animation
CSS3 實際上是使用 animation-timing-function 的階梯函數 steps(number_of_steps, direction) 來實現逐幀動畫的連續播放的。
在移動端,CSS3 Animation 兼容性良好,相對于 JS,CSS3 逐幀動畫使用簡單,且效率更高,因為許多優化都在瀏覽器底層完成。
因此在觸屏頁面中 CSS3 逐幀動畫使用廣泛,下文將對其進行詳細介紹。
CSS3 逐幀動畫的實現
(1)將動畫幀合并為雪碧圖
在觸屏頁面中,動畫往往承擔頁面樣式實現的角色(即不需要替換),因此我們會將圖片放到元素的背景中(background-image)。
逐幀動畫有不同的動畫幀,我們可以通過更改 background-image 的值實現幀的切換,但多張圖片會帶來多個 HTTP 請求,且不利于文件的管理。
比較合適的做法,是將所有的動畫幀合并成一張雪碧圖(sprite),通過改變 background-position 的值來實現動畫幀切換。因此,逐幀動畫也被稱為“精靈動畫(sprite animation)”。
以京東到家的觸屏頁面《年貨送到家》為例:
這個動畫一個有三幀,將3個動畫幀合并,并放到 .p8 .page_key 的背景中:
1
2
3
4
5
6
.p8 .page_key {
position: absolute; width: 572px; height: 586px; background-image: url("../img/p8.png");
}
(2)使用 steps 實現動畫播放
steps 指定了一個階梯函數,包含兩個參數:
第一個參數指定了函數中的間隔數量(必須是正整數);
第二個參數可選,指定在每個間隔的起點或是終點發生階躍變化,接受 start 和 end 兩個值,默認為 end。
(參考自W3C)
通過W3C中的這張圖片來理解 steps 的工作機制:
steps
回到上述的例子,我們在 keyframes 中定義好每個動畫幀:
1
2
3
4
5
6
@-webkit-keyframes p8{
0%{background-position: 0 0;} 33.33%{background-position: 0 -586px;} 66.66%{background-position: 0 -1172px;} 100%{background-position: 0 -1758px;}
}
然后,給他加上 animation:
1
2
3
.p8 .page_key{
-webkit-animation: p8 steps(1,end) 1.5s infinite;
}
為什么第一個參數是1?
前文中提到,steps 是 animation-timing-function 的一個屬性值,在 W3C 中有如下說明:
For a keyframed animation, the ‘animation-timing-function’ applies between keyframes, not over the entire animation.
也就是說,animation-timing-function 應該于兩個 keyframes 之間,而非整個動畫。在上面的 keyframes 中,我們已經把每個幀都寫出來了,所以兩個 keyframes 之間的間隔是1。
更加簡便的寫法?
既然說 steps 第一個參數是指函數的間隔數量,那么我們就可以把 keyframes 的計算直接交給 steps 來完成。
1
2
3
4
5
6
.p8 .page_key{
-webkit-animation: p8 steps(3,end) 1.5s infinite;
}
@-webkit-keyframes p8 {
100% {background-position: 0 -1758px;}
}
以上兩種寫法效果是等同的。
CSS3 逐幀動畫使用技巧
(1)step-start 與 step-end
除了 steps 函數,animation-timing-function 還有兩個與逐幀動畫相關的屬性值 step-start 與 step-end:
step-start 等同于 steps(1,start):動畫執行時以開始端點為開始;
step-end 等同于 steps(1,end):動畫執行時以結尾端點為開始。
(2)動畫幀的計算:
1
2
3
4
5
6
$spriteWidth: 140px; // 精靈寬度
@keyframes ani {
100% {
background-position: -($spriteWidth * 12) 0; // 12幀
}
}
(3)適配方案:rem+scale
我們知道,rem 的計算會存在誤差,因此使用雪碧圖時我們并不推薦用 rem。如果是逐幀動畫的話,由于計算的誤差,會出現抖動的情況。
那么在觸屏頁中,如何實現頁面的適配?
這里小編提供一個思路:
非逐幀動畫部分,使用 rem 做單位;
逐幀動畫部分,使用 px 做單位,再結合 js 對動畫部分使用 scale 進行縮放。
感謝您的閱讀,本文由 凹凸實驗室 版權所有。如若轉載,請注明出處:凹凸實驗室(https://aotu.io/notes/2016/05...)
原文地址
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116068.html
Web前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。第一階段:前端基礎(HTML / CSS / JavaScript / jQuery)初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!(表單標簽)html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...
Web前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。第一階段:前端基礎(HTML / CSS / JavaScript / jQuery)初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!(表單標簽)html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...
Web前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。第一階段:前端基礎(HTML / CSS / JavaScript / jQuery)初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!(表單標簽)html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...
Web前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。第一階段:前端基礎(HTML / CSS / JavaScript / jQuery)初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!(表單標簽)html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...
閱讀 1953·2021-09-30 09:46
閱讀 1366·2019-08-30 15:43
閱讀 1123·2019-08-29 13:28
閱讀 1922·2019-08-29 11:24
閱讀 1681·2019-08-26 13:22
閱讀 3892·2019-08-26 12:01
閱讀 1816·2019-08-26 11:33
閱讀 3242·2019-08-23 15:34