#夏日挑战赛# HarmonyOS - 实现电动小风扇 原创 精华

发布于 2022-7-25 09:10
浏览
1收藏

作者:陈甜甜

本文正在参加星光计划3.0–夏日挑战赛

前言

随着气温越来越高,相信很多小伙伴已经没有心思工作了,作为前端的开发人员,决定自己搞个风扇降将温。刚好最近在学习HarmonyOS开发相关知识,发现动画属性使用比较多并且学起来比较有意思,因此利用HarmonyOS的动画效果实现了一个变速小风扇。

项目说明

工具版本:DevEco Studio 3.0 Beta3

SDK版本;3.1.5.5

主要用到知识:animate

官方API链接:动画效果

效果展示

#夏日挑战赛# HarmonyOS - 实现电动小风扇-开源基础软件社区

实现原理

拆过电风扇的小伙伴应该知道,核心就是一个扇叶、控制开关、风扇罩,其余的都是些装饰品。 首先,我们来实现我们的风扇罩和扇叶,这个功能比较简单好实现,无非就是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 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的一个练习,也算是一个比较常见的动画,后面还需继续努力,希望和大家一起共同成长。有疑问或者有好的想法也都可以在评论区提出来,可以探讨一下。

更多原创内容请关注:中软国际 HarmonyOS 技术团队

入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-7-25 09:13:07修改
6
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐