大廠h5開發(fā)實戰(zhàn)手冊7動效4逐幀動畫

1、動效開發(fā) 4：逐幀動畫前節(jié)我們花了很的篇幅去講解補間動畫的開發(fā)，除了因為它最常，還因為其中間的許多實現(xiàn)思路（如動效的審查與分解、基于 AE 動效稿還原動畫）同樣適于本節(jié)將要另種常的基礎動畫形式 逐幀動畫。的什么是逐幀動畫逐幀動畫的英名字是 Frame-By-Frame Animation，其在科中有如下定義：百簡之，逐幀動畫有兩個要素：（1） 相關聯(lián)的不同圖像，即動畫幀（2） 連續(xù)逐幀動畫最經(jīng)典的例，莫過于翻書了。動畫幀繪制在書本的不同上，通過動翻來實現(xiàn)連續(xù)：定格動畫，名逐幀動畫，是種動畫技術(shù)，其原理即將每幀不同的圖像連續(xù)，從產(chǎn)動畫效果。（圖來源：起翻翻，翻書的前世今)）逐幀動畫的前端實現(xiàn)案在

2、細聊 CSS3 逐幀動畫之前，我們先了解下前端實現(xiàn)逐幀動畫的種案。1. 直接使 GIFGIF 可以有多個動畫幀，連續(xù)本身決定的。是其身屬性，是否循環(huán)也是由其GIF 往往來實現(xiàn)細節(jié)動畫，成本較低、使便、兼容性好，但同時也畫質(zhì)低、交互不靈活等問題。2. 使 JavaScript動畫將動畫幀合并成雪碧圖，放到 background-image 中，通過JavaScript 改變 background-position 的值來實現(xiàn)動畫的。使 JavaScript 實現(xiàn)逐幀動畫，兼容性佳，且交互靈活。3. 使 Canvas 及相關庫將動畫幀繪制到 Canvas 上，通過不斷地重繪即可實現(xiàn)逐幀動畫。Cre

3、ateJS ()、Pixi.js) 等庫都提供了成熟的案。使 Canvas 可以利硬件，功能強，操作靈活，有豐富的類庫，但學習成本較，且式瀏覽器不兼容 Canvas。4. 使 CSS3 階梯函數(shù) steps(number_of_steps,direction)CSS3 使 animation-function 的階梯函數(shù)steps(number_of_steps, direction) 來實現(xiàn)逐幀動畫。案例實戰(zhàn) 1 - 利 CSS3 實現(xiàn)逐幀動畫與使 JavaScript 實現(xiàn)相同，通過 CSS3 實現(xiàn)逐幀動畫時，也是將動畫幀放到 background-image 中。逐幀動畫往往有多個不同的

4、動畫幀，可以直接通過更改background-image 的值實現(xiàn)幀的切換，但多個圖件會帶來多個 HTTP 請求，且不利于件的管理。較妥當?shù)淖龇ㄊ牵瑢⑺械膭赢嫀喜⒊蓮堁┍虉D（sprite）， 通過改變 background-position 的值來實現(xiàn)動畫幀切換。因此， 逐幀動畫也被稱為“精靈動畫（sprite animation）”。下以京東到家的觸屏年貨送到家(場景為例，為家講解如何利 CSS3 來實現(xiàn)逐幀動畫。)中的個在實際作過程中，開發(fā)逐幀動畫最為常的兩種式是第 3 和 4 種，CSS3 Animation 兼容性良好，相對于JavaScript，CSS3 逐幀動畫使簡單，且開發(fā)效

5、率更；Canvas 因為其性能優(yōu)勢，幀與幀之間切換的銜接度更，適合實現(xiàn)幀數(shù)或尺（寬）較的逐幀動畫。步驟 1 - 將動畫幀合并為雪碧圖動畫幀的合并法有很多，可以使圖處理、在線雪碧圖Photoshop 中的操作。具、動化腳本等。這將1. 準備好需要合并的動畫幀，這使的動畫幀尺為 200 x2062. 打開 Photoshop - 件 - 動 -幀，設置檔尺，注意紅框部分取消表 II，選取所有動畫3. 背景圖層不可，導出雪碧圖并命名為 p8.png此時，我們可以得到如下的雪碧圖 p8.png：步驟 2 - 元素定位并設置背景元素的尺需與動畫幀的尺相同/等例，將雪碧圖放到元素的background-i

6、mage 中：步驟 3 - 使 steps 實現(xiàn)動畫通過查看 W3C 檔，可知 steps(number_of_steps, direction) 指定了個階梯函數(shù)，包含兩個參數(shù)：第個參數(shù)指定了函數(shù)中的間隔數(shù)量（必須是正整數(shù)）第個參數(shù)可選，指定在每個間隔的起點或是終點發(fā)階躍變化，接受 start 和 end 兩個值，默認為 end可以通過下圖更深地理解 steps 函數(shù)：.page_key position: absolute; left: 20px;top: 20px; width: 200px; height: 206px;background-image: url("./img

7、/p8.png");（圖來源：W3C transitions/)）我們可以通過兩種寫法來實現(xiàn)例中的逐幀動畫，下是第種寫法。這可能有讀者疑惑，steps 的第個參數(shù)為什么是 1？前中提到，steps 是 animation-性值，在 W3C (-function 的個屬animations/#animation-明：-function-property) 中有如下說也就是說，animation-function 應于兩個關鍵幀（狀態(tài)）之間，整個動畫。在上的 keyframes 中，我們已經(jīng)把每個關鍵幀都寫出來了，所以兩個關鍵幀之間的間隔是 1。既然 steps 第個參數(shù)是指函數(shù)的間隔數(shù)

8、量，那么我們就可以把keyframes 的計算直接交給 steps 來完成。For a keyframed animation, the animation-function applies between keyframes, not over the entire animation./* 寫法 */.page_key animation: p8 steps(1,end) 1.5s infinite;keyframes p8 0% background-position: 0 0;33.33333% background-position: 0 -206px;66.66667% backg

9、round-position: 0 -412px;100% background-position: 0 -618px;上述兩種寫法最終的動畫效果是相同的：此，我們便實現(xiàn)了個簡單的 CSS3 逐幀動畫，點擊查看 DEMO() 或掃描維碼：/* 寫法 */.page_keyanimation: p8 steps(3,end) 1.5s infinite;keyframes p8 100% background-position: 0 -618px;（京東年貨到家逐幀動畫 DEMO）)CSS3 逐幀動畫的些技巧CSS3 實現(xiàn)逐幀動畫雖然簡單，但也不乏技巧。1. step-start 與 step-

10、end除了 steps 函數(shù)，animation-function 還有兩個與逐幀動畫相關的屬性值 step-start 與 step-end。step-start 等同于 steps(1, start)：動畫執(zhí)時以開始端點為開始。step-end 等同于 steps(1, end)：動畫執(zhí)時以結(jié)尾端點為開始。2. 使 Sass 完成動畫幀的計算3. 移動端使 rem 配合 scale 適配，防動畫抖動我們知道，rem 的計算會薦 rem。誤差，因此使雪碧圖時我們并不推如果是逐幀動畫的話，由于計算的誤差，可能會出現(xiàn)動畫抖動的情況。為了解決這個問題，可以參考以下的適配思路：逐幀動畫部分，使 re

11、m 做逐幀動畫部分，使 px 做分使 scale 進縮放，再結(jié)合 JavaScript 對動畫部另外也可以通過 SVG 來解決抖動的問題，有巧：逐幀動畫抖動解決案(可移步CSS 技) 做進/* 寫法 */mixin frame($fram, $frameHeight) for $i from 0 through $fram #100/$fram#-$i*$frameHeightpx;/* 寫法 */mixin frame($fram, $frameHeight) 100% background-position: 0 #-$fram*$frameHeightpx;keyframes p8 in

12、clude frame($fram: 3, $frameHeight: 206)步的了解。案例實戰(zhàn) 2 - 利 Canvas 做個會動的京東 JOYCSS3 實現(xiàn)的逐幀動畫，如果它的幀數(shù)較多或尺較時，移動端可渲染性能問題，此時建議改 Canvas 實現(xiàn)。能會相對于 CSS3 來說，Canvas 具有更的學習成本，所以實際項中推薦使業(yè)務成熟的 Canvas 動畫庫，如 CreateJS()、Pixi.js () 等。下我們以 京東 JOY 福星會場 仙樂游記(中的其中個動畫為例，為家講解如何利 Canvas 實現(xiàn)逐幀動畫。步驟 1 - 準備動畫幀所需的雪碧圖在前的案例中我們了通過 Photosh

13、op 動雪碧圖的式，這我們使 TexturePacker() 具（付費軟件，幀動畫開發(fā)利器，值得購買）來更快地完成同樣的事情。（TexturePacker 戶界）TexturePacker (步驟如下：) 導出雪碧圖的1.2.3.將逐幀動畫所有幀拖到 TexturePacker選擇逐幀動畫的渲染載體（標記1）根據(jù)需要設置其余配置，如：當雪碧圖超過 1Multipack 選項（標記2），請選擇4.點擊 Publish sprite sheet（標記4）即可導出雪碧圖和相應渲染載體的數(shù)據(jù)（若有）預覽逐幀動畫的步驟：1. 選擇所有幀選擇左側(cè) Sprites 板其中幀，然后按 Cmd/Ctrl + A

14、 全選所有幀；或者拖拽選擇所有幀。2. 點擊 Anim preview（標記3）如果我們選了渲染載體為 EaselJS / CreateJS， 其導出的JSON 件如下："images": "hxr-0.png","hxr-1.png","hxr-2.png","hxr-3.png","hxr-4.png","hxr-5.png","framerate": 20, "frames": 1, 1, 519, 535,

15、0, -109, -499,522, 1, 514, 538, 0, -108, -499,1, 538, 514, 538, 0, -109, -499,.,"animations": "花想容": "frames": 45, 34, 36, 39, 41, 42,43,12,22,27,14,25,44,19,35,15, 30, 16,1, 2, 4, 5,28, 29, 32,17, 18, 21, 23, 24, 9,7, 10, 11, 13, 20, 31,37, 38, 40, 33, 26, 8, 6,0, 3 ,&

16、quot;texturepacker": "SmartUpdateHash:$TexturePacker:SmartUpdate:d81882f9ddc9b1a6b4cc21 c262ac0125:4ebba912052ed522502e73edaa8a5333:c8130f68479de7028295f1ccf1a4ea15$","Created with TexturePacker(EaselJS") forTexturePacker() 除了成雪碧圖，其導出的 JSON 件其實還包含了逐幀動畫所需的運數(shù)據(jù)，只需結(jié)合渲染載體的相應 API

17、即可快速實現(xiàn)逐幀動畫。步驟 2 - 實現(xiàn)動畫以 CreateJS 為例。準備 HTML:準備 CreateJS 代碼：var hxrCanvas = document.getElementById("hxr- canvas")var hxrStage = new createjs.Stage(hxrCanvas)/ 將上 JSON 數(shù)據(jù)進修改：如 "images" 和"animations" 字段var spriteSheet = new createjs.SpriteSheet( "images": preloa

18、d.getResult('hxr0'), preload.getResult('hxr1'), preload.getResult('hxr2'), preload.getResult('hxr3'), preload.getResult('hxr4'), preload.getResult('hxr5'),"framerate": 20, "frames": <canvas id="hxr-canvas" width="526" height="536"></canvas>這樣即可完成個逐幀動畫，點擊體驗 DEMO(，或掃描維碼：1, 1, 519, 535, 0, -109, -499,522, 1, 514, 538, 0, -108, -499,1, 538, 514, 538, 0, -109, -499,.,"animations": "play": "frames": 45, 34, 36, 39, 41, 42,43, 27, 44, 15, 30, 16, 17, 18, 2