HarmonyOS - 實現電動小風扇
前言
隨著氣溫越來越高，相信很多小伙伴已經沒有心思工作了，作為前端的開發人員，決定自己搞個風扇降將溫。剛好最近在學習HarmonyOS開發相關知識，發現動畫屬性使用比較多并且學起來比較有意思，因此利用HarmonyOS的動畫效果實現了一個變速小風扇。
項目說明
- 工具版本：DevEco Studio 3.0 Beta3
- SDK版本；3.1.5.5
- 主要用到知識：animate
- 官方API鏈接：??動畫效果??
效果展示
實現原理
拆過電風扇的小伙伴應該知道，核心就是一個扇葉、控制開關、風扇罩，其余的都是些裝飾品。 首先，我們來實現我們的風扇罩和扇葉，這個功能比較簡單好實現，無非就是CSS3中的一些特性，例如圓角呀、旋轉呀等等特性。 加上基于動畫animation相關知識，通過按鈕控制對扇葉進行相應的動畫效果處理，最終呈現出不同速度下不同風速的轉動效果。
實現步驟
- 對風扇樣式進行繪制（扇葉，扇柄，控制按鈕）
- 在觸發風速按鈕后，通過獲取風頁id屬性標識后，給該id對象調用動畫方法。
- 給1、2、3級風速傳入不同的所需轉動時長，實現低中高風速旋轉
- 判斷觸發關閉按鈕時，調用animation對象方法finish()，實現暫停風速的功能。
使用到的官方API
animate( keyframes: Keyframes, options: Options)：void。
參數名 | 參數類型 | 必填 | 描述 |
keyframes | keyframes | 是 | 設置動畫樣式 |
options | Options | 是 | 用于設置動畫屬性的對象列表 |
keyframes：
屬性 | 類型 | 說明 |
frames | Array<Style> | 用于設置動畫樣式的對象列表。 |
Style類型說明
參數 | 類型 | 默認值 | 說明 |
transform | - | 設置到變換對象上的類型。 |
Options說明：
參數 | 類型 | 默認值 | 說明 |
duration | number | 0 | 指定當前動畫的運行時長（單位毫秒）。 |
easing | string | linear | 描述動畫的時間曲線，支持類型見表4 easing有效值說明。 |
delay | number | 0 | 設置動畫執行的延遲時間（默認值表示無延遲）。 |
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的一個練習，也算是一個比較常見的動畫，后面還需繼續努力，希望和大家一起共同成長。
