如何使电池出现一个会动的充电效果

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

绘制电池轮廓

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

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

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

电池动画效果

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

.mask2{position:absolute;height:220px;width:140px;left:50%;transform:translate(-50%,50%);border-radius:15px15px5px5px;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:down6sfast-out-linear-ininfinite;background-color:#ffffff; }

电池平移动画：

animation:down6sfast-out-linear-ininfinite;

/*css弹跳*/@keyframesdown{/*停止*/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

如下图：

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

.mask3{position:absolute;width:150px;height:150px;bottom:140px;left:50%;transform:translate(-50%,0);z-index:1;animation:rotate4sinfinite;border-radius:70px63px60px66px;background-color:#ffffff; }

旋转动画：

animation:rotate4sinfinite;

/*css旋转*/@keyframesrotate{from{transform:rotate(0deg) }to{transform:rotate(360deg); } }

拓展2

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

代码如下：

data:{baseColor:'#f0ffff', gradualChange:'#87ceeb', remaining:['#87ceeb','#fa8072','#da70d6','#80ff00ff','#2196F3'], load:['#f0ffff','#ffffe0','#d8bfd8'] },