??想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：??

??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??

??https://harmonyos.51cto.com??

前言

動(dòng)畫(huà)是前端必不可少的一部分。實(shí)現(xiàn)動(dòng)畫(huà)有許多種方式，本文將帶來(lái)一種CSS逐幀圖動(dòng)畫(huà)。本DEMO是基于HarmonyOS JS API開(kāi)發(fā)，實(shí)現(xiàn)該動(dòng)畫(huà)效果的動(dòng)畫(huà)屬性從API version 6開(kāi)始支持。

效果展示

動(dòng)畫(huà)屬性

實(shí)現(xiàn)原理

通過(guò)快速循環(huán)切換背景圖片(背景圖片必須是長(zhǎng)逐幀圖片)的位置，達(dá)到看起來(lái)像在播放視頻的一種動(dòng)畫(huà)效果。

步驟拆分

• 準(zhǔn)備逐幀圖片。
• 將逐幀圖片合成我們所需要的長(zhǎng)逐幀背景圖片。
• 使用CSS animation的step屬性 實(shí)現(xiàn)動(dòng)畫(huà)效果。

1. 逐幀圖片要求

所有幀寬高相等，按照播放順序命名(一般軟件導(dǎo)出的有自動(dòng)按播放順序命好名)，如果是像本文做無(wú)限循環(huán)動(dòng)畫(huà)，那么第一幀和最后一幀的圖像必須保持相同，不然會(huì)導(dǎo)致最后動(dòng)畫(huà)效果不流暢。

2. 合成長(zhǎng)逐幀圖

逐幀動(dòng)畫(huà)雪碧圖生成器：https://pspgbhu.github.io/fsm/ 。

用這個(gè)大佬的網(wǎng)址可以合成長(zhǎng)逐幀圖(后面用"長(zhǎng)圖"二字代表長(zhǎng)逐幀圖)，點(diǎn)擊"上傳圖片"按鈕將第一步得到的圖片批量上傳,接著網(wǎng)站會(huì)自動(dòng)檢測(cè)出圖片寬高，然后可以選擇生成橫向或豎向排列的長(zhǎng)圖，下圖中有說(shuō)明如何選擇橫向或豎向。最后點(diǎn)擊"生成圖片"按鈕，中間空白處就會(huì)出現(xiàn)合成的長(zhǎng)圖，鼠標(biāo)右擊圖片選擇另存為就可以獲取到長(zhǎng)圖了。

合成長(zhǎng)逐幀圖展示

3. 使用CSS animation 屬性實(shí)現(xiàn)動(dòng)畫(huà)

hml文件

<div class="container">
    <div class="role">
    </div>
</div>

css文件

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.role {
    width: 153px;
    height: 208px;
    background-image: url(/common/images/stepImg.png);
    /*  4992px 為長(zhǎng)圖的高度  */
    background-size: 153px 4992px;
    background-repeat: no-repeat;
    /*  steps(23)括號(hào)內(nèi)數(shù)字寫(xiě)png幀圖總幀數(shù)減去一的數(shù)量  */
    animation: stepAnim 2s steps(23) infinite;
}
@keyframes stepAnim {
    /* 注意：下面這句大括號(hào)里面的一定要加上，要變化的屬性必須給初始值。 */
    from { background-position: 0px 0px;}
    /* -4784px 為png幀圖總高度減去一幀的高度*/
    to { background-position: 0px -4784px;}
}

源碼

源碼地址:https://gitee.com/CJcrazycool/harmony-os-css-step

總結(jié)

steps函數(shù)，它可以傳入兩個(gè)參數(shù)，第一個(gè)是大于0的整數(shù)，該參數(shù)是將間隔動(dòng)畫(huà)等分成指定數(shù)目的小間隔動(dòng)畫(huà)，然后根據(jù)第二個(gè)參數(shù)來(lái)決定顯示效果。

第二個(gè)參數(shù)為start時(shí)，在變化過(guò)程中，都是以下一幀的顯示效果來(lái)填充間隔動(dòng)畫(huà);

第二個(gè)參數(shù)為end時(shí)，與上面相反，都是以上一幀的顯示效果來(lái)填充間隔動(dòng)畫(huà)。

本文動(dòng)畫(huà)方案適用于尺寸比較小的局部動(dòng)畫(huà)，幀數(shù)不宜過(guò)多，最好100幀以內(nèi)。

??想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：??

??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??

??https://harmonyos.51cto.com??