HarmonyOS - 实现电池充电动画效果

系统 OpenHarmony
最近在学习HarmonyOS开发文档,发现transform样式动画感觉很有趣,用现有的方法写一个会动的充电效果。

​想了解更多内容,请访问:​

​51CTO和华为官方合作共建的鸿蒙技术社区​

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

前言

最近在学习HarmonyOS开发文档,发现transform样式动画感觉很有趣,用现有的方法写一个会动的充电效果。

实现过程

一、 绘制电池轮廓

首先我们使用css画电池,绘制一个长方形需要给这个正方形四个角增加一点点的弧度,再给电池画一个头部,只有一个电池的轮廓就出来了,我在里面增添了一点颜色方便后面观察。

首先绘制一个电池。

2.增加个div来实现动画效果,这个我打算用蒙版来处理,蒙版不需要增加太多细节宽高和蓝色div一样就行,然后通过overflow: hidden来实现蒙版效果,接下来就是让白色div动起来就行了。

<img src=“./电池遮罩.png” alt=“电池遮罩” style=“zoom: 67%;” />。

二、电池动画效果

1.需要使电池出现一个充电的效果,这时候就需要使用一个让电池电量上升的一个效果,这个用平移动画就够了,如果加蒙版属性的话会更好一点。

.mask2 {
position: absolute;
height: 220px;
width: 140px;
left: 50%;
transform: translate(-50%, 50%);
border-radius: 15px 15px 5px 5px;
background: linear-gradient(#7abcff, #2196F3);
overflow: hidden;
}

电池渐变。

background: linear-gradient(#7abcff, #2196F3);

蒙版效果。

overflow: hidden;
.mask3 {
position: absolute;
width: 150px;
height: 220px;
bottom: 140px;
left: 50%;
transform: translate(-50%, -80);
z-index: 1;
animation: down 6s fast-out-linear-in infinite;
background-color: #ffffff;
}

电池平移动画。

animation: down 6s fast-out-linear-in infinite;
/* css弹跳*/
@keyframes down {
/* 停止 */
0%{
transform: translate(0px,200px);
}
/* 上升 */
10%{
transform: translate(0px,180px);
}
/* 上升 */
20%{
transform: translate(0px,160px);
}
/* 上升 */
30%{
transform: translate(0px,140px);
}
/* 上升 */
40%{
transform: translate(0px,120px);
}
/* 上升 */
50%{
transform: translate(0px,100px);
}
/* 上升 */
60%{
transform: translate(0px,80px);
}
/* 上升 */
70%{
transform: translate(0px,60px);
}
/* 上升 */
80%{
transform: translate(0px,40px);
}
/* 上升 */
90%{
transform: translate(0px,20px);
}
/* 起始位 */
100%{
transform: translate(0px,0px);
}
}

百分百给的越多动画就越细腻。

三、拓展1

1.如果需要使电池充电时进行旋转也是可以的,只需要把平移效果换成旋转就可以了。

.mask3 {
position: absolute;
width: 150px;
height: 150px;
bottom: 140px;
left: 50%;
transform: translate(-50%, 0);
z-index: 1;
animation: rotate 4s infinite;
border-radius: 70px 63px 60px 66px;
background-color: #ffffff;
}

旋转动画。

animation: rotate 4s infinite;
/* css旋转*/
@keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg);
}
}

四、拓展2

也可以通过添加按钮来增加可改变的颜色样式,首先需要把css中的颜色样式给移到js中这样方便后面的切换,然后在js中写入需要替换的电池颜色样式。

<div class="mask1">
<div class="mask4"></div>
<div class="mask2" value="{{qr_value}}" type="{{qr_type}}"
style="background-color: {{gradualChange}};">
<div class="mask3" value="{{qr_value}}" type="{{qr_type}}"
style="background-color: {{baseColor}};" ></div>
</div>
</div>
<div>
<text class="txt">电池加载色</text>
<select onchange="loadingColor">
<option for="{{load}}" value="{{$item}}">{{$item}}</option>
</select>
</div>
<text class="txt">电池剩余色</text>
<select onchange="remainingColor">
<option for="{{remaining}}" value="{{$item}}">{{$item}}</option>
</select>
data: {    
baseColor: '#f0ffff',
gradualChange: '#87ceeb',
remaining: ['#87ceeb','#fa8072','#da70d6','#80ff00ff','#2196F3'],
load: ['#f0ffff','#ffffe0','#d8bfd8']
},

最终的效果

总结

这些还只是鸿蒙组件库中动画样式里的一小部分,如果再使用旋转加平移属性就能实现更加炫酷的动画效果,能够带来更好的视觉体验,组件库中还有着许多有趣的组件实例和详细的使用方法,掌握这些组件的使用可以使我们更好的了解和参与鸿蒙。

​想了解更多内容,请访问:​

​51CTO和华为官方合作共建的鸿蒙技术社区​

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

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

2022-07-20 15:24:47

ArkUI动画效果项目开发

2022-07-28 14:12:31

动画API鸿蒙

2011-07-08 10:15:15

IPhone 动画

2012-06-04 14:47:42

HTML5

2017-02-06 13:00:49

Android翻转卡片动画效果

2022-08-29 17:39:53

应用开发css动画

2011-07-22 18:20:04

IOS View 动画

2022-04-13 11:40:06

canvas操作系统鸿蒙

2022-12-27 17:57:03

开源汽车充电

2011-08-12 14:04:53

iPhone动画

2011-05-30 13:23:11

Android 动画

2024-02-02 10:41:01

人工智能电动汽车

2022-09-21 14:51:21

ArkUI信件弹出

2022-10-26 15:04:39

物联网电动汽车充电运营商

2022-10-26 09:28:55

物联网电动汽车

2022-01-18 09:46:37

鸿蒙HarmonyOS应用

2011-07-29 13:55:10

IPhone 动画

2009-09-22 12:59:58

ibmdwDojo

2011-08-16 18:13:42

IPhone开发UIView动画

2022-06-21 11:23:15

API鸿蒙JS开发
点赞
收藏

51CTO技术栈公众号