javax.swing怎样新建一个view_巧用CSS滤镜绘制安卓手机充电动效(uniapp|view组件版)...

前言

CSS3的滤镜真的是一个非常强大的功能，如果我们可以能够很好的利用它，并充分发挥我们的想象力，想要制作出非常惊艳的动效也是没有问题的哦。比如：接下来我要跟大家分享的一个巧妙使用CSS滤镜绘制出来的android手机电池充电动效，还是老规矩，小凡我依然分享的是uni-app|view组件版哦。(*￣︶￣) 本文的设计思路参考于【掘金大佬chokcocol的文章】

---

一、效果展示及思路分析

1.效果展示

2.思路分析

我们可以将该动效拆成三部分来理解：

第一部分 最上面的圆环以及中间的充电电量百分比，第二部分 中间大小不一的不断上升的气泡，第三部分 最下面的一大块产生气泡的气泡池

二、实现步骤

1.准备工作

在正式开始写代码之前，需要先下载相应的IDE，以及进行必要的配置工作。

• 下载Hbuilder X

• 新建uni-app项目

• 在pages文件夹下创建home文件夹，在此文件夹下创建home.vue文件

• 修改配置文件pages.json,设置新创建的home.vue文件为应用启动项

• 项目根目录下新建components文件夹，在此文件夹下创建自定义组件文件

2.代码实现

具体实现的代码小伙伴们可以点击文章下方的【阅读原文】来慢慢学习哦！