HarmonyOS - 實(shí)現(xiàn)電池充電動畫效果
??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
前言
最近在學(xué)習(xí)HarmonyOS開發(fā)文檔，發(fā)現(xiàn)transform樣式動畫感覺很有趣，用現(xiàn)有的方法寫一個(gè)會動的充電效果。
實(shí)現(xiàn)過程
一、 繪制電池輪廓
首先我們使用css畫電池，繪制一個(gè)長方形需要給這個(gè)正方形四個(gè)角增加一點(diǎn)點(diǎn)的弧度，再給電池畫一個(gè)頭部，只有一個(gè)電池的輪廓就出來了，我在里面增添了一點(diǎn)顏色方便后面觀察。
首先繪制一個(gè)電池。
2.增加個(gè)div來實(shí)現(xiàn)動畫效果，這個(gè)我打算用蒙版來處理，蒙版不需要增加太多細(xì)節(jié)寬高和藍(lán)色div一樣就行，然后通過overflow: hidden來實(shí)現(xiàn)蒙版效果，接下來就是讓白色div動起來就行了。
<img src=“./電池遮罩.png” alt=“電池遮罩” style=“zoom: 67%;” />。
二、電池動畫效果
1.需要使電池出現(xiàn)一個(gè)充電的效果，這時(shí)候就需要使用一個(gè)讓電池電量上升的一個(gè)效果，這個(gè)用平移動畫就夠了，如果加蒙版屬性的話會更好一點(diǎn)。
.mask2 {
position: absolute;
height: 220px;
width: 140px;
left: 50%;
transform: translate(-50%, 50%);
border-radius: 15px 15px 5px 5px;
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: down 6s fast-out-linear-in infinite;
background-color: #ffffff;
}
電池平移動畫。
animation: down 6s fast-out-linear-in infinite;
/* css彈跳*/
@keyframes down {
/* 停止 */
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);
}
}
百分百給的越多動畫就越細(xì)膩。
三、拓展1
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: rotate 4s infinite;
border-radius: 70px 63px 60px 66px;
background-color: #ffffff;
}
旋轉(zhuǎn)動畫。
animation: rotate 4s infinite;
/* css旋轉(zhuǎn)*/
@keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg);
}
}
四、拓展2
也可以通過添加按鈕來增加可改變的顏色樣式，首先需要把css中的顏色樣式給移到j(luò)s中這樣方便后面的切換，然后在js中寫入需要替換的電池顏色樣式。
<div class="mask1">
<div class="mask4"></div>
<div class="mask2" value="{{qr_value}}" type="{{qr_type}}"
style="background-color: {{gradualChange}};">
<div class="mask3" value="{{qr_value}}" type="{{qr_type}}"
style="background-color: {{baseColor}};" ></div>
</div>
</div>
<div>
<text class="txt">電池加載色</text>
<select onchange="loadingColor">
<option for="{{load}}" value="{{$item}}">{{$item}}</option>
</select>
</div>
<text class="txt">電池剩余色</text>
<select onchange="remainingColor">
<option for="{{remaining}}" value="{{$item}}">{{$item}}</option>
</select>
data: {
baseColor: '#f0ffff',
gradualChange: '#87ceeb',
remaining: ['#87ceeb','#fa8072','#da70d6','#80ff00ff','#2196F3'],
load: ['#f0ffff','#ffffe0','#d8bfd8']
},
最終的效果
總結(jié)
這些還只是鴻蒙組件庫中動畫樣式里的一小部分，如果再使用旋轉(zhuǎn)加平移屬性就能實(shí)現(xiàn)更加炫酷的動畫效果，能夠帶來更好的視覺體驗(yàn)，組件庫中還有著許多有趣的組件實(shí)例和詳細(xì)的使用方法，掌握這些組件的使用可以使我們更好的了解和參與鴻蒙。
??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
