最近在學(xué)習(xí) HarmonyOS 開(kāi)發(fā)文檔，發(fā)現(xiàn) transform 樣式動(dòng)畫(huà)感覺(jué)很有趣，于是打算用現(xiàn)有的方法寫(xiě)一個(gè)會(huì)動(dòng)的充電效果。

繪制電池輪廓

實(shí)現(xiàn)過(guò)程如下：首先我們使用 css 畫(huà)電池，繪制一個(gè)長(zhǎng)方形需要給這個(gè)正方形四個(gè)角增加一點(diǎn)點(diǎn)的弧度，再給電池畫(huà)一個(gè)頭部，只有一個(gè)電池的輪廓就出來(lái)了，我在里面增添了一點(diǎn)顏色方便后面觀察。

然后增加個(gè) div 來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果，這個(gè)我打算用蒙版來(lái)處理，蒙版不需要增加太多細(xì)節(jié)寬高和藍(lán)色 div 一樣就行，然后通過(guò) overflow: hidden 來(lái)實(shí)現(xiàn)蒙版效果，接下來(lái)就是讓白色 div 動(dòng)起來(lái)就行了。

<imgsrc=“./電池遮罩.png”alt=“電池遮罩”style=“zoom:67%;”/>

電池動(dòng)畫(huà)效果

需要使電池出現(xiàn)一個(gè)充電的效果，這時(shí)候就需要使用一個(gè)讓電池電量上升的一個(gè)效果，這個(gè)用平移動(dòng)畫(huà)就夠了，如果加蒙版屬性的話(huà)會(huì)更好一點(diǎn)。

.mask2{
position:absolute;
height:220px;
width:140px;
left:50%;
transform:translate(-50%,50%);
border-radius:15px15px5px5px;
background:linear-gradient(#7abcff,#2196F3);
overflow:hidden;
}

電池漸變：

background:linear-gradient(#7abcff,#2196F3);

蒙版效果：

overflow:hidden;

.mask3{
position:absolute;
width:150px;
height:220px;
bottom:140px;
left:50%;
transform:translate(-50%,-80);
z-index:1;
animation:down6sfast-out-linear-ininfinite;
background-color:#ffffff;
}

電池平移動(dòng)畫(huà)：

animation:down6sfast-out-linear-ininfinite;

/*css彈跳*/
@keyframesdown{
/*停止*/
0%{
transform:translate(0px,200px);
}
/*上升*/
10%{
transform:translate(0px,180px);
}
/*上升*/
20%{
transform:translate(0px,160px);
}
/*上升*/
30%{
transform:translate(0px,140px);
}
/*上升*/
40%{
transform:translate(0px,120px);
}
/*上升*/
50%{
transform:translate(0px,100px);
}
/*上升*/
60%{
transform:translate(0px,80px);
}
/*上升*/
70%{
transform:translate(0px,60px);
}
/*上升*/
80%{
transform:translate(0px,40px);
}
/*上升*/
90%{
transform:translate(0px,20px);
}
/*起始位*/
100%{
transform:translate(0px,0px);
}
}

拓展1

如下圖：

如果需要使電池充電時(shí)進(jìn)行旋轉(zhuǎn)也是可以的，只需要把平移效果換成旋轉(zhuǎn)就可以了。

.mask3{
position:absolute;
width:150px;
height:150px;
bottom:140px;
left:50%;
transform:translate(-50%,0);
z-index:1;
animation:rotate4sinfinite;
border-radius:70px63px60px66px;
background-color:#ffffff;
}

旋轉(zhuǎn)動(dòng)畫(huà)：

animation:rotate4sinfinite;

/*css旋轉(zhuǎn)*/
@keyframesrotate{
from{
transform:rotate(0deg)
}
to{
transform:rotate(360deg);
}
}

拓展2

也可以通過(guò)添加按鈕來(lái)增加可改變的顏色樣式，首先需要把 css 中的顏色樣式給移到 js 中這樣方便后面的切換，然后在 js 中寫(xiě)入需要替換的電池顏色樣式。

代碼如下：

data:{
baseColor:'#f0ffff',
gradualChange:'#87ceeb',
remaining:['#87ceeb','#fa8072','#da70d6','#80ff00ff','#2196F3'],
load:['#f0ffff','#ffffe0','#d8bfd8']
},