最近在學習 HarmonyOS 開發文檔，發現 transform 樣式動畫感覺很有趣，于是打算用現有的方法寫一個會動的充電效果。

繪制電池輪廓

實現過程如下：首先我們使用 css 畫電池，繪制一個長方形需要給這個正方形四個角增加一點點的弧度，再給電池畫一個頭部，只有一個電池的輪廓就出來了，我在里面增添了一點顏色方便后面觀察。

然后增加個 div 來實現動畫效果，這個我打算用蒙版來處理，蒙版不需要增加太多細節寬高和藍色 div 一樣就行，然后通過 overflow: hidden 來實現蒙版效果，接下來就是讓白色 div 動起來就行了。

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

電池動畫效果

需要使電池出現一個充電的效果，這時候就需要使用一個讓電池電量上升的一個效果，這個用平移動畫就夠了，如果加蒙版屬性的話會更好一點。

.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;
}

電池平移動畫：

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

如下圖：

如果需要使電池充電時進行旋轉也是可以的，只需要把平移效果換成旋轉就可以了。

.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;
}

旋轉動畫：

animation:rotate4sinfinite;

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

拓展2

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

代碼如下：

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