仿360手机助手下载按钮

今日科技快讯

百度将于6月1日起全面实行实名制，用户必须绑定手机完成认证，目前使用邮箱注册百度账号而没有绑定手机号的用户必须根据百度提示进行账号实名认证。此次百度账号实名认证对百度贴吧、百度网盘等方面的管理将得到进一步提高。

作者简介

本篇来自 的一幕 的投稿，分享了一个仿照360手机助手的炫酷下载按钮，感兴趣的朋友赶快来看一看吧！

的一幕 的博客地址：

http://blog.csdn.net/u010429219

正文

最近在学习Android的高级view的绘制，再结合值动画的数据上的改变，自己撸了个360手机助手的下载按钮。先看下原版的360手机助手的下载按钮是长啥样子吧:

再来看看自己demo吧，你们尽情的吐槽吧，哈哈： 

细心的朋友可能发现 loading状态 下左边几个运动圆的最高点和最低点都越界了，这是因为在规定正弦函数的最高点时没考虑圆的半径的长度，因此近两天做了点修改了，效果图如下:

细节分析步骤图

咱们的整个过程可以分为这么几个状态，在这里我用枚举类进行了归纳:

Normal(还没进行开始的状态,也就是我们的默认状态,也就是我们还没执行 onTouch 的时候了):

Start(点击 onTouch 改变为该状态):

那咱们再来看看 collectAnimator 做了些什么呢:

其实核心的就是在这个过程中改变了全局变量 currentLength 而已，此时我们回到 onDraw 里面吧，看看在 Start 状态下 currentLength 都做了些什么:

为了便于我们分析每一个状态，我们就看下每个状态下的绘制动作吧:

大家看到变量 currentLength 了没,其实这里就是去改变背景的 right 坐标，正好上面动画里面也是从 width 减小的一个值，那么此时的动画大家脑海里能想象得出来了吧: 

Start 状态结束都就是进入到 Pre 状态了: 

上面 collectAnimator 动画结束后启动的动画是: angleAnimator 了,我们再去看看该动画都做了些啥:

改变的还是全局的变量 angle,再来看看该变量在 onDraw方法 里面都做了些啥吧:

画了几个圆,然后通过上面的 angle 变量来旋转 canvas,而且几个圆的圆心都与view的中心点有关,因此大家从示例图中应该看出来了: 

pre状态 结束后，就是 Expand状态 了,大家可以看 pre状态 下动画结束的代码:

可以看出下一个动画 tranlateAnimation 了,还是一样定位到该动画的代码吧，看看都做了些啥:

可以看出此时改变的全局变量有两个: currentLength 和 translateX,想必大家知道 currentLength 是什么作用了吧,下面就来看看 onDraw 吧:

一个是改变背景的 right坐标，再个就是 canvas.translate 几个中心点的圆了:

expand状态 结束后就是正式进入到下载状态了，这里的枚举我定义是 Load, 
看下 expand 结束的动画代码吧:

大家可以看到该处有两个动画的启动了 (loadRotateAnimation.start() 和 movePointAnimation.start()),说明此处有两个动画在同时执行罢了,先来看 loadRotateAnimation 动画里面都做了些啥吧:

还是一个角度改变的动画啊，那就看看 loadAngle 是改变谁的动画吧,还是照常我们进入到 onDraw 方法吧:

还是一个圆的旋转啊，其实这几个点是有规律去绘制的，他们几个圆心应该是内圆的弧度上的，并且半径是依次增大的。这里调了 getCircleY()方法，该方法就是算圆弧上几个点的y坐标。

这里看似方法很复杂，其实就是初中定义圆的方程式:(x-cx)^2+(y-cy)^2=r^2

下面再来看看 movePointAnimation 动画都做了些啥吧:

这里首先定义了四个 MovePoint,分别定义了他们的半径,圆心,然后在该动画里面不断地改变四个 point 的圆心,其实这里核心就是如何求出四个点运行的轨迹了,把轨迹弄出来一切就都呈现出来了,可以看看该动画的 onAnimationUpdate方法 里面调用的 drawMovePoints方法:

这里就是一个数学里面经常用的正弦函数了,求出周期、x轴上的偏移量、y轴上的便宜量、顶点,还有一个注意点,该处求顶点的时候,需要减去这几个圆中的最大半径,之前我就是没注意到这点,最后出来的轨迹就是一个圆会跑到view的外面了。效果图如下: 

最后一个状态就是Complete了,也就是当前的进度到了100,可见代码:

这里要做的就是改变状态,停止一切动画了,到此代码的讲解就到这里了,赶快start起来吧。

属性也没怎么整理，就抽取出了一些比较常用的几个了:

代码使用:

好了介绍就到这里了，如果觉得行的话，进入github的传送门：

https://github.com/1002326270xc/360Downloading-master

更多

每天学习累了，看些搞笑的段子放松一下吧。关注最具娱乐精神的公众号，每天都有好心情。

如果你有好的技术文章想和大家分享，欢迎向我的公众号投稿，投稿具体细节请在公众号主页点击“投稿”菜单查看。

欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号：