简介

昨天在简书上看到一篇文章，介绍了一个加载动画的实现过程
一款Loading动画的实现思路（一）
只可惜原动画是IOS上制作的，而看了一下，作者的实现思路比较复杂，于是趁着空闲写了一个Android版本，这篇文章将给大家介绍一下实现过程。
首先让我们来看一下动画效果

动画结构分析

从上面的gif图中可以看到，这个加载动画有成功，失败两种状态，由于Gif速度比较快，我们再来分别看一张慢图

1、成功状态加载动画

成功动画的状态转移描述如下：

1、加载过程，画蓝色圆环，当进度为100%时，圆环完成
2、从右侧抛出蓝色小方块，小方块沿着曲线到达圆环正上方
3、蓝色小方块下落，下落过程中，逐渐变长，当方块与圆圈接触时，进入圆环的部分变粗，同时圆环逐渐被挤压，变成椭圆形
4、方块底端到达圆环中心后，发出三个分叉向圆周延伸，同时椭圆被撑大，逐渐恢复回圆形
5、圆环变绿色，画出绿色勾√

整个过程可以说是比较复杂的，甚至对比原动画，其实还有一些细节我没有去实现，不过接下来我为大家逐个分解每个过程是怎么实现的，而且并不难理解。每个小过程组合起来，就是一款炫酷动画，希望大家都有信心去了解它。

自定义View,根据进度绘制圆形

首先我们来实现第一个过程，圆环的绘制。
在动画效果中，圆环的完整程度，是根据实际的进度来衡量的，当加载完成，整个圆就画好了。
所以我们自定义一个View控件，在其提供了一个setProgress()方法来给使用者设置进度

public class SuperLoadingProgress extends View {/*** 当前进度*/private int progress = 0;/*** 最大进度*/private static final int maxProgress = 100;....public void setProgress(int progress) {this.progress = Math.min(progress,maxProgress);postInvalidate();if (progress==0){status = 0;}}...}

有了这个进度以后，我们就调用postInvalidate()去让控件重绘，其实就是触发了其ondraw()方法，然后我们就再ondraw()方法里面，绘制圆弧
对于圆弧的绘制，相信大家都不会陌生(陌生也没有关系，因为很简单)，只要调用一个canvas.drawArc()方法就可以了。
但是我要仔细观察这里的圆形效果，在单独来看三张图

圆弧起始状态

圆弧运动状态

圆弧最终状态

可以看到，首先圆弧有一定的起始角度，我们知道，在Android坐标系中，0度其实是指水平向右开始的
也就是起点的起始角度，其实是-90度，终点的起始角度，其实-150度

而整个过程中，
起点:-90度，逆时针旋转270度，最后回到0度位置
终点:-150度，与起点相差60度，最后相差360度，与起点重合

所以当progress=1，也就是动画完成时，起点会减去270度，那么对应每个progress
起点的位置应该是

-90-270*progress

当progress=1,终点和起点相差360度，而一开始就相差60度,所以整个过程就是多相差了300度，那么对应每个progress，终点和起点应该相差

-(60+precent*300)

根据上面的结论，我们得到圆弧的具体绘制方式如下：

    /*** 起始角度*/private static final float startAngle = -90;@Overrideprotected void onDraw(Canvas canvas) {...float precent = 1.0f*progress/maxProgress;//当前完成百分比//mRectF是代表整个view的范围canvas.drawArc(mRectF, startAngle-270*precent, -(60 + precent*300), false, circlePaint);}

圆环完成，抛出小方块

在圆环绘制完成以后，会抛出一个小方块，小方块沿曲线运动到圆环正上方，实际整个曲线，是一段圆弧
我们来看下图

方块运动状态

运动状态分析图

从图中可以看出，方块运动的终点，距离圆心为2R
假设运动轨迹是某个圆的一段弧，那么根据勾股定理有如下方程

(X+R)^2 + （2R）^2 = (X+2R)^2

解得X=R/2(其实也很容易解，就是勾三股四玄五)
假设我们希望方块在500ms内从起点运动到终点，那么我们就需要提供一个计时器，告诉我们现在运动了多少毫秒，然后根据这个时间，计算出方块当前位置
另外，由于方块本身有一定的长度，因此方块也有自己的起始端和末端。但是两者的运动轨迹是一样的，只是先后不同。

        //抛出动画endAngle = (float) Math.atan(4f/3);mRotateAnimation = ValueAnimator.ofFloat(0f, endAngle*0.9f );mRotateAnimation.setDuration(500);mRotateAnimation.setInterpolator(new AccelerateDecelerateInterpolator());mRotateAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {curSweepAngle = (float) animation.getAnimatedValue();//运动了多少角度invalidate();}});

每次获得新角度，我们就去重新绘制方块的位置：

/*** 抛出小方块* @param canvas*/private void drawSmallRectFly(Canvas canvas){canvas.save();canvas.translate(radius / 2 + strokeWidth, 2 * radius + strokeWidth);//将坐标移动到大圆圆心float bigRadius = 5*radius/2;//大圆半径//方块起始端坐标float x1 = (float) (bigRadius*Math.cos(curSweepAngle));float y1 = -(float) (bigRadius*Math.sin(curSweepAngle));//方块末端坐标float x2 = (float) (bigRadius*Math.cos(curSweepAngle+0.05*endAngle+0.1*endAngle*(1-curSweepAngle/0.9*endAngle)));//float y2 = -(float) (bigRadius*Math.sin(curSweepAngle+0.05*endAngle+0.1*endAngle*(1-curSweepAngle/0.9*endAngle)));canvas.drawLine(x1, y1, x2, y2, smallRectPaint);//小方块，其实是一条直线canvas.restore();        canvas.drawArc(mRectF, 0, 360, false, circlePaint);//蓝色圆环}

抛出完成，方块下落

可以说下落过程，是整个动画中最复杂的过程了，包括方块下落，圆环挤压，方块变粗三个过程，整个过程，从方块下落开始，到方块底部到底圆心

首先是方块的下落，这个容易理解，方块会逐渐变长，因为在相同时间内，起始端和末端运动的距离不一样
我们拿末端作为例子，这里要使用到一个知识，就是P**ath路径类**
这是Android提供的一个类，代表我们制定的一段路径实例，对于方块末端来说，其运动的路径就是从顶部，到圆心

    Path downPath1 = new Path();//起始端路径downPath1.moveTo(2*radius+strokeWidth,strokeWidth);downPath1.lineTo(2 * radius+strokeWidth, radius+strokeWidth);Path downPath2 = new Path();//末端路径downPath2.moveTo(2 * radius+strokeWidth, strokeWidth);downPath2.lineTo(2 * radius+strokeWidth, 2 * radius+strokeWidth);

那么问题来了，有了运动路径以后，我们希望有动画，起始就是希望，我们给定一个动画时间，我们可以获得在这段时间的某个点上，起始端/末端运动到路径的哪个位置
那么有了路径以后，我们能不能获得路径上的任意一个位置呢？答案是使用PathMeasure类。
可能有许多朋友对这个类不熟悉，可以参考一些文章，或者看看官方API介绍
看PathMeasure大展身手

我们首先来看，怎么初始化一个PathMeasure，很简单，传入一个Path对象即可，false表示不闭合这个路径

    downPathMeasure1 = new PathMeasure(downPath1,false);downPathMeasure2 = new PathMeasure(downPath2,false);

由于动画有一定时间，我们又需要一个计时器

    //下落动画        mDownAnimation = ValueAnimator.ofFloat(0f, 1f );mDownAnimation.setDuration(500);mDownAnimation.setInterpolator(new AccelerateInterpolator());mDownAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {downPrecent = (float) animation.getAnimatedValue();invalidate();}});

接下来是使用PathMeasure获得下落过程中，起始端和末端的坐标

    //下落方块的起始端坐标float pos1[] = new float[2];float tan1[] = new float[2];downPathMeasure1.getPosTan(downPrecent * downPathMeasure1.getLength(), pos1, tan1);//下落方块的末端坐标float pos2[] = new float[2];float tan2[] = new float[2];downPathMeasure2.getPosTan(downPrecent * downPathMeasure2.getLength(), pos2, tan2);

getPosTan(）方法，第一个参数是指想要获得的路径长度，例如你设置的Path长度为100
那么你传入60，就会获得长度为60时的终点坐标(文字真的表达不好/(ㄒoㄒ)/~~，大家可以去看API)

根据起始端和末端的坐标*，我们绘制一条直线，就是小方块啦！

方块下落，进入圆内部分变粗，圆被挤压变形

接下来要处理一个更加复杂的问题，就是进入圆环中的方块部分，要变粗。
为了解决这个问题，我们就需要分辨方块哪部分在圆内，哪部分在圆外，这个判断起来本身就很麻烦，况且，圆环还会被压缩！也就是园内圆外，没有一个固定的分界点！

怎么区分圆内圆外呢？我决定自己判断太麻烦了，后来想到一个办法，判断交集！
我们知道，Android提供了API，让我们可以判断两个Rect是否相交，也可以获得它们的相交部分(也就是重合部分)，还可以获得非重合部分。
假设我把方块看成是一个矩形，圆环看成一个矩形，那么问题就简单了，我就可以调用API计算出进入圆内的部分，和在圆外的部分了。
如下图：

我们知道，其实圆/椭圆，都是依靠一个矩形确定的，在这个动画中，我们希望圆被挤压成椭圆，最终缩放比例为0.8,大概是这样的

利用前面提到的计时器，我们可以根据当前时间，知道圆被挤压的比例，实现挤压效果

    //椭圆形区域Rect mRect = new Rect(Math.round(mRectF.left),Math.round(mRectF.top+mRectF.height()*0.1f*downPrecent),Math.round(mRectF.right),Math.round(mRectF.bottom-mRectF.height()*0.1f*downPrecent));

这样，我们就有了代表椭圆的矩形。由于在一步中，我们知道了小方块的起始端和末端坐标，我们可以使这个两个坐标，分别向左右偏移一定距离，从而获得4个坐标，来创建矩形。
最后，我们直接利用两个矩形，取交集和非交集，具体实现如下：

        //非交集Region region1 = new Region(Math.round(pos1[0])-strokeWidth/4,Math.round(pos1[1]),Math.round(pos2[0]+strokeWidth/4),Math.round(pos2[1]));region1.op(mRect, Region.Op.DIFFERENCE);drawRegion(canvas, region1, downRectPaint);//交集Region region2 = new Region(Math.round(pos1[0])-strokeWidth/2,Math.round(pos1[1]),Math.round(pos2[0]+strokeWidth/2),Math.round(pos2[1]));boolean isINTERSECT = region2.op(mRect, Region.Op.INTERSECT);drawRegion(canvas, region2, downRectPaint);

Region是Android提供的，用于处理区域运算问题的一个类，使用这个类，我们可以很方便进行Rect交集补集等运算，不了解的朋友，查看API

最后绘制这两个区域，并且加上一个判断，就是这个两个矩形是否有相交，如果没有，那么圆环就不用被挤压，直接绘制圆环即可。

    //椭圆形区域if(isINTERSECT) {//如果有交集float extrusionPrecent = (pos2[1]-radius)/radius;RectF rectF = new RectF(mRectF.left, mRectF.top + mRectF.height() * 0.1f * extrusionPrecent, mRectF.right, mRectF.bottom - mRectF.height() * 0.1f * extrusionPrecent);//绘制椭圆canvas.drawArc(rectF, 0, 360, false, circlePaint);}else{canvas.drawArc(mRectF, 0, 360, false, circlePaint);//绘制圆}

下落完成，绘制三叉

对于三叉的绘制，就没有什么特别的了，其实三叉就是三条Path路径，我们用类似前面的做法，利用一个计时器，三个Path，对应三个PathMeasure，就可以动态绘制出路径了。

    /*** 绘制分叉* @param canvas*/private void drawFork(Canvas canvas) {float pos1[] = new float[2];float tan1[] = new float[2];forkPathMeasure1.getPosTan(forkPrecent * forkPathMeasure1.getLength(), pos1, tan1);float pos2[] = new float[2];float tan2[] = new float[2];forkPathMeasure2.getPosTan(forkPrecent * forkPathMeasure2.getLength(), pos2, tan2);float pos3[] = new float[2];float tan3[] = new float[2];forkPathMeasure3.getPosTan(forkPrecent * forkPathMeasure3.getLength(), pos3, tan3);canvas.drawLine(2 * radius+strokeWidth, radius+strokeWidth, 2 * radius+strokeWidth, 2 * radius+strokeWidth, downRectPaint);canvas.drawLine(2 * radius+strokeWidth, 2 * radius+strokeWidth, pos1[0], pos1[1], downRectPaint);canvas.drawLine(2 * radius+strokeWidth, 2 * radius+strokeWidth, pos2[0], pos2[1], downRectPaint);canvas.drawLine(2 * radius+strokeWidth, 2 * radius+strokeWidth, pos3[0], pos3[1], downRectPaint);//椭圆形区域RectF rectF = new RectF(mRectF.left, mRectF.top + mRectF.height() * 0.1f * (1-forkPrecent), mRectF.right, mRectF.bottom - mRectF.height() * 0.1f * (1-forkPrecent));canvas.drawArc(rectF, 0, 360, false, circlePaint);}

最后，还要记得将椭圆还原成圆，其实就是压缩的逆过程
效果如下:

绘制绿色勾√

绿色勾的绘制其实也和上面的做法类似，需要一个计时器，一个Path，对应的PathMeasure即可
勾的路径如下：

//初始化打钩路径Path tickPath = new Path();tickPath.moveTo(1.5f * radius+strokeWidth, 2 * radius+strokeWidth);tickPath.lineTo(1.5f * radius + 0.3f * radius+strokeWidth, 2 * radius + 0.3f * radius+strokeWidth);tickPath.lineTo(2*radius+0.5f * radius+strokeWidth,2*radius-0.3f * radius+strokeWidth);tickPathMeasure = new PathMeasure(tickPath,false);

最后将路径动态绘制出现，到这里大家都很熟悉这个做法了。但是这里我使用了另外一个方法，这个方法可以根据进度，直接返回当前路径成一个Path对象

/*** 绘制打钩* @param canvas*/private void drawTick(Canvas canvas) {Path path = new Path();/** On KITKAT and earlier releases, the resulting path may not display on a hardware-accelerated Canvas. * A simple workaround is to add a single operation to this path, such as dst.rLineTo(0, 0).*/tickPathMeasure.getSegment(0, tickPrecent * tickPathMeasure.getLength(), path, true);//该方法，可以获得整个路径的一部分path.rLineTo(0, 0);//解决Android本身的一个bugcanvas.drawPath(path, tickPaint);//绘制出这一部分canvas.drawArc(mRectF, 0, 360, false, tickPaint);}

于是我们在一定时间内，逐渐获得勾这个路径的一部分，知道获得整个勾，并将其绘制出来！
最终效果如下:

写在最后

本篇文章，首先介绍成功加载的动画实现过程，下一篇文章将会接着介绍加载失败过程的实现。
通过这篇文章，我们应该熟悉了Path,PathMeasure,Region等一系列API，利用这些API，我们可以方便得绘制出路径效果。
每个步骤组合起来，就是一个好看的，复杂的动效。对于API不熟悉的朋友，建议用到的时候去查官方文档，或者看看其他朋友的一些介绍基础的文章。
最后，提供源码下载地址和github地址，欢迎大家下载和star

一款炫酷Loading动画--加载成功相关推荐

一款炫酷Loading动画--加载失败
简介上一篇文章一款炫酷Loading动画–加载成功,给大家介绍了成功动画的绘制过程,这篇文章将接着介绍加载失败特效的制作. 相比成功动画,有了前面的经验,失败动画的过程就显得比较简单了. 动画结构分 ...
一款炫酷Loading动画--载入成功
简单介绍昨天在简书上看到一篇文章.介绍了一个载入动画的实现过程一款Loading动画的实现思路(一) 仅仅可惜原动画是IOS上制作的.而看了一下.作者的实现思路比較复杂,于是趁着空暇写了一个And ...
html5 loading游戏,12种炫酷html5 svg加载loading动画特效
12种炫酷html5 svg加载loading动画特效刘振兴代码分享 2015年11月23日 14182 3条评论这是一款使用HTML5 SVG技术制作的12种炫酷html5 svg加载load ...
好看的html登录遮罩提示加载中,jQuery炫酷页面预加载Loading特效插件
fakeLoader.js是一款轻量级的 jQuery 炫酷页面预加载Loading特效插件.它能帮助我们创建一个全屏遮罩效果的旋转loading效果来模拟页面预加载过程. Bower安装 bower ...
android 自定义加载动画效果,Android自定义View实现loading动画加载效果
项目开发中对Loading的处理是比较常见的,安卓系统提供的不太美观,引入第三发又太麻烦,这时候自己定义View来实现这个效果,并且进行封装抽取给项目提供统一的loading样式是最好的解决方式了. ...
css纯加载动画,纯CSS实现loading动画加载效果
原标题:纯CSS实现loading动画加载效果 loading动画图标的做法有很多.一般不想麻烦的人直接嵌入一张gif的动态图标即可实现!虽然该方法方便快捷,但是对网站的加载速度优化方面还不是最好,制 ...
jsp预加载转圈_30种CSS3炫酷页面预加载loading动画特效（推荐）
这是一组效果非常炫酷的CSS3页面预加载loading动画特效.该特效共有30种不同的loading效果.所有的加载动画都是使用CSS3来完成,jQuery代码只是用于隐藏加载动画.当你点击页面的任何 ...
使用CSS3实现超炫的Loading（加载）动画效果
SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画.借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画.SpinKit 的目标不是提供一个每个浏览器 ...
html顺序进场动画,十六种炫酷纯css加载动画（一）
一个好的开篇,会给你这个项目增加不少分值. 有没有遇到过打开页面加载一段时间,页面内容才加载出来.在等待加载的过程中页面却是空白页,给用户的体验特别不好,会让项目降一个档次.下面的十六种炫酷炸裂的cs ...

一款炫酷Loading动画--加载成功

简介