HarmonyOS – 实现电动小风扇

​​想了解更多关于开源的内容，请访问：​​

​​51CTO 开源基础软件社区​​

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

前言

随着气温越来越高，相信很多小伙伴已经没有心思工作了，作为前端的开发人员，决定自己搞个风扇降将温。刚好最近在学习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：

Style类型说明

Options说明：

animation对象方法：

代码实现

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的一个练习，也算是一个比较常见的动画，后面还需继续努力，希望和大家一起共同成长。

​​想了解更多关于开源的内容，请访问：​​

​​51CTO 开源基础软件社区​​

​​https://ost.51cto.com​​。