HarmonyOS - 實現電池充電動畫效果

作者：湯志威 2022-03-29 11:28:24

系統 OpenHarmony

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

??想了解更多內容，請訪問：??

??51CTO和華為官方合作共建的鴻蒙技術社區??

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

前言

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

實現過程

一、繪制電池輪廓

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

首先繪制一個電池。

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

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

二、電池動畫效果

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

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

百分百給的越多動畫就越細膩。

三、拓展1

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

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

旋轉動畫。

animation: rotate 4s infinite;

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

四、拓展2

也可以通過添加按鈕來增加可改變的顏色樣式，首先需要把css中的顏色樣式給移到js中這樣方便后面的切換，然后在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']
    },