贝塞尔曲线（Bezier）之水波纹的手机充电动画效果（一）手机动画「贝塞尔曲线（Bezier）之水波纹的手机充电动画效果（一）」
博主声明：
转载请在开头附加本文链接及作者信息，并标记为转载。本文由博主 威威喵 原创，请多支持与指教。
本文首发于此 博主：威威喵 | 博客主页：https://blog.csdn.net/ile_running
博主这几天一直在搞贝塞尔曲线（Bezier）动画的研究，虽然我的数学不太好，但是也勉勉强强能够看懂懂贝塞尔曲线的公式，套用还是很简单的。前几次搞了几个贝塞尔曲线动画效果，感觉那个效果还是非常赞的，今天兴致又来了，于是去搜索了一下 Android 相关的贝塞尔曲线的动画实例，偶然看到一个 Android 充电进度的贝塞尔曲线动画，它的效果图如下：
看到这个效果呢，我首先是想到用三阶贝塞尔曲线公式来做，于是就屁颠屁颠的开始了，套了三阶贝塞尔曲线的公式，发现效果没出来，。害我白高兴一场，以为我的数学还是可以的，结果。。。
我最先的想法是通过点位去计算波形路径，不过最后放弃了。哈哈，喜出望外，结果我发现了一个更简单的做法，用 Path 类下面的一个三阶贝塞尔曲线的封装方法，很简单就实现了波浪的效果，这是我写这个效果时所收获到的意外惊喜，之前还没字母使用过，接下来我们进行分析这个效果的实现，然后再讲解一下 Path 类三阶贝塞尔的简单用法。
多的就不扯淡了，我们直接开始吧。国际惯例，先来看看最终的实现效果图：
这个充电进度的动画效果还行吧，上面我搜索到的是一张静态图，我就是依照这那张图的样式做的，可能颜色又一点点缺陷，这个自己再美化美化就好啦。
来吧，拿到这个效果图，首先就是分析一波。来看一下草图
看上面那张图，首先我们要把圆绘制到中心点吧，这没什么问题。因为三阶贝塞尔曲线需要 2 个控制点，从图中我们知道 p1 和 p2 就是那条曲线的控制点， 而且上图 p1 p2 p3 p4 四个点获取坐标都很容易。
因为海浪波纹有两条曲线组成，这两条曲线是交错的，所以我们需要再来 4 个点
得到曲线的点之后呢，我们就可以开始用 Path 类的一个方法去形成曲线的路径了，因为波浪是有颜色的，所以需要把 Path 给封闭起来，形成密闭的效果。接着，再来看一张草图
用 Path 类制作一条曲线，并且我们要把 p0 ~ p5 这几个点给封闭起来，形成海浪的效果。想法是不错，但是你会发现，这个形成的区域已经超出了圆的范围了吧，那样子就非常丑，犹如这个样子：
圆圈外面多出了两个蓝色部分区域，丑的不行啊。 像这个样子的情况，我最先想到的是 canvas 有没有画剪切区域的，后来找了一下，好像没找到。陷入深思，后来灵机一动，想到我上一次实现的一种效果，是画一个圆，从内到外扩散的，感兴趣的可以点击链接，去看看我的文章：Android 视差动画 — 雅虎新闻内容揭示效果
这个圆效果呢，就是从小变到大，逐渐的把内容呈现出来。这就给我一个很好的启示，我可以绘制一个这样的圆，把外面蓝色部分遮住不久好了嘛，也就相当于除了绿色包含的圆以外全部给遮住，这样显示的效果只能看到这个绿色的圆了，我们的目的也就达到了。这个就需要对画笔的宽度进行计算，代码如下：
这样就把露出来的蓝域给遮挡住了，接下来还有一个难点，就是如何根据进度值把海浪也给升高，总不能在固定位置浪啊浪吧。这就要考虑一个问题，我们需要根据圆的直径和进度值的一个比例关系，计算出当前海平面的高度，通过不断的增加 progress（进度），海平面会随着进度升高，而且这个期间波浪一直在流动的。这部分关键代码如下：
上面代码是计算进度条和圆的直径的比例，通过这个比例，我们可以拿到 path 中波浪逐渐上升的 y 坐标，通过不断的绘制 path 然后形成波浪的动画效果，直到进度条为 100 时，我们就进行判断处理
如果进度达到 100，我们就开始绘制完成时候的动画，代码如下
只有这样，当结束是才会显示不同的效果，否则不做处理的话，就是空空如也啦。
那么至此，我们对这个效果的分析也就完成了，并且手动进实现了一下，感觉收获了不少，哈哈。最后呢，给出本效果的完整代码，如下：
还有一个是进行进度值设置的，这个很简单，在 MainActivity 里面开一个子线程，然后设置一下进度值就可以了
诸暨版权声明：本网信息来自于互联网，目的在于传递更多信息，并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益，请及时联系我们，本站将会在24小时内处理完毕，E-mail：xinmeigg88@163.com