HarmonyOS - 实现电动小风扇

系统 OpenHarmony
这篇文章是我对学习鸿蒙动画API的一个练习,也算是一个比较常见的动画。

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

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

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

前言

随着气温越来越高,相信很多小伙伴已经没有心思工作了,作为前端的开发人员,决定自己搞个风扇降将温。刚好最近在学习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的一个练习,也算是一个比较常见的动画,后面还需继续努力,希望和大家一起共同成长。

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

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

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

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2022-03-29 11:28:24

HarmonyOS动画css

2022-07-20 15:24:47

ArkUI动画效果项目开发

2022-07-28 14:31:04

canvas鸿蒙

2021-10-20 15:49:12

风扇显卡散热

2022-06-09 14:08:34

多设备协同鸿蒙

2022-07-12 17:33:00

消息定时提醒鸿蒙

2021-08-26 15:28:05

鸿蒙HarmonyOS应用

2022-06-29 14:06:54

canvas鸿蒙

2022-07-01 17:14:03

消息通知鸿蒙

2023-05-09 07:42:45

显卡风扇热管

2021-08-31 15:42:43

技术研发充电

2017-04-13 09:56:57

0分贝主机风扇

2021-08-04 10:22:27

鸿蒙HarmonyOS应用

2022-07-13 15:31:29

手绘板canvas鸿蒙

2022-10-24 14:49:54

ArkUI心电图组件

2022-08-02 14:21:20

滑动验证码鸿蒙

2023-10-27 16:15:35

鸿蒙天气服务功能

2022-06-20 15:27:00

socket对话鸿蒙

2022-11-02 16:06:54

ArkUIETS

2022-07-11 16:19:22

css属性鸿蒙
点赞
收藏

51CTO技术栈公众号