天天看點

#夏日挑戰賽# HarmonyOS - 實作電動小風扇

作者:陳甜甜

本文正在參加星光計劃3.0–夏日挑戰賽

前言

随着氣溫越來越高,相信很多小夥伴已經沒有心思工作了,作為前端的開發人員,決定自己搞個風扇降将溫。剛好最近在學習HarmonyOS開發相關知識,發現動畫屬性使用比較多并且學起來比較有意思,是以利用HarmonyOS的動畫效果實作了一個變速小風扇。

項目說明

工具版本:DevEco Studio 3.0 Beta3

SDK版本;3.1.5.5

主要用到知識:animate

官方API連結:動畫效果

效果展示

實作原理

拆過電風扇的小夥伴應該知道,核心就是一個扇葉、控制開關、風扇罩,其餘的都是些裝飾品。 首先,我們來實作我們的風扇罩和扇葉,這個功能比較簡單好實作,無非就是CSS3中的一些特性,例如圓角呀、旋轉呀等等特性。 加上基于動畫animation相關知識,通過按鈕控制對扇葉進行相應的動畫效果處理,最終呈現出不同速度下不同風速的轉動效果。

實作步驟

  1. 對風扇樣式進行繪制(扇葉,扇柄,控制按鈕)
  2. 在觸發風速按鈕後,通過擷取風頁id屬性辨別後,給該id對象調用動畫方法。
  3. 給1、2、3級風速傳入不同的所需轉動時長,實作低中高風速旋轉
  4. 判斷觸發關閉按鈕時,調用animation對象方法finish(),實作暫停風速的功能。

使用到的官方API

animate( keyframes: Keyframes, options: Options):void

參數名 參數類型 必填 描述
keyframes keyframes 設定動畫樣式
options Options 用于設定動畫屬性的對象清單

keyframes

屬性 類型 說明
frames Array<Style> 用于設定動畫樣式的對象清單。

Style類型說明

參數 類型 預設值 說明
transform Transform - 設定到變換對象上的類型。

Options說明

參數 類型 預設值 說明
duration number 指定目前動畫的運作時長(機關毫秒)。
easing string linear 描述動畫的時間曲線,支援類型見表4 easing有效值說明。
delay number 設定動畫執行的延遲時間(預設值表示無延遲)。
iterations number | string 1 設定動畫執行的次數。number表示固定次數,Infinity枚舉表示無限次數播放。

animation對象方法:

方法 參數 說明
play - 元件播放動畫。
finish - 元件完成動畫。
pause - 元件暫停動畫。
cancel - 元件取消動畫。
reverse - 元件倒播動畫。

代碼實作

1. hml部分

<div class="container">
    <div class="title">
    <!--風扇葉上的裝飾線-->
        <div class="line-box">
        <div class="line"></div>
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
        <div class="line line4"></div>
        <div class="line line5"></div>
        </div>
      <!--扇葉-->
            <div class="left-box" id="controlLevel" >
            <text class="leaf"></text>
            <text class="leaf leaf1"></text>
            <text class="leaf leaf2"></text>
        </div>
    </div>
<!--扇柄-->
    <div class="bom-part">
        <text class="item" @click="oneLevel(900)"  >1</text>
        <text class="item" @click="oneLevel(750)">2</text>
        <text class="item" @click="oneLevel(600)">3</text>
        <text class="item" @click="oneLevel(4)">關</text>
    </div>
<!--    風扇-->
<text class="base">變速小風扇</text>
</div>
           

2. css部分

.container {
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}

.title {
    width: 200px;
    height: 200px;
    margin-top: 150px;
    position: relative;
    font-size: 40px;
    opacity: 0.9;
    z-index: 200;
}
.line-box{
    z-index:100;
}
.line{
    position: absolute;
    top: 48.8%;
    left: 0px;
    width: 200px;
    height: 5px;
    height: 5px;
    background-color: black;
    opacity: 0.75;
    z-index: 100;
}
.line1{
    transform: rotate(30deg);
}
.line2{
    transform: rotate(60deg);
}
.line3{
    transform: rotate(90deg);
}
.line4{
    transform: rotate(120deg);
}
.line5{
    transform: rotate(150deg);
}
.left-box{
    width: 220px;
    height: 220px;
    border-radius: 110px;
    border: 8px solid #333;

}
.leaf{
    position: absolute;
    left: 44%;
    width: 30px;
    height: 95px;
    border-radius: 80px;
    background-color: cornflowerblue;
}
.leaf1 {
    height: 92px;
    transform: rotate(125deg);
    transform-origin: 50% 100%;
}
.leaf2 {
    transform: rotate(240deg);
    transform-origin: 50% 100%;
}
.bom-part{
    width: 30px;
    height: 200px;
    background-color:black;
    opacity: 0.75;
    flex-direction:column;
    position: absolute;
    top: 348px;
    left: 47%;
}
.item{
    font-size: 16px;
    text-align: center;
    color: black;
    width: 25px;
    height: 25px;
    border-radius:12.5px;
    background-color: cornflowerblue;
    margin-top: 10px;
    margin-left: 3px;
}
.base{
    width: 100%;
    margin: 0 16px ;
    height: 75px;
    background-color: cornflowerblue;
    position: absolute;
    top: 575px;
    color: black;
    border-radius: 20px;
    text-align: center;
}
           

3. js部分

export default {
    data: {
        animation:'',
    },
//    觸發風速按鈕後,通過擷取風頁id屬性辨別後,給該id對象調用動畫方法
    oneLevel(value){
        var options = {
            easing:'linear',//描述動畫的時間曲線
            duration: value,//指定目前動畫的運作時長(機關毫秒)
            fill: 'forwards',//指定動畫開始和結束的狀态
            iterations:'Infinity',//設定動畫執行的次數
        };
        //用于設定動畫樣式的對象清單
        var frames = [
            {
                transform: {
                    rotate: '0deg'
                }
            },
            {
                transform: {
                    rotate: '360deg'
                }
            }
        ];
//        給風頁添加動畫方法
        this.animation = this.$element('controlLevel').animate(frames, options);
//        點選關機時調用animation對象方法finish完成動畫實作停止風扇轉動功能
        if(value==4){
            this.animation.finish()
        }else{
            this.animation.play();
        }

    }
}
           

總結

這篇文章是我對學習鴻蒙動畫API的一個練習,也算是一個比較常見的動畫,後面還需繼續努力,希望和大家一起共同成長。有疑問或者有好的想法也都可以在評論區提出來,可以探讨一下。

更多原創内容請關注:中軟國際 HarmonyOS 技術團隊

入門到精通、技巧到案例,系統化分享HarmonyOS開發技術,歡迎投稿和訂閱,讓我們一起攜手前行共建鴻蒙生态。

繼續閱讀