前言
为什么起了这么个标题呢，因为我们接下来要做的动画运用到了多个知识点，如果自己实操几遍，基本android中绘图方面的知识点就掌握的差不多了
先看下动画图
首先让我们来看一下动画效果 ,原文地址
有教程了为什么还要专门再写一篇？因为小编脑子比较笨，理解不了原文写的啥意思，就写了另一种实现方法，本文通俗易懂，不懂留言即可
分析动画
- 1、加载过程，画蓝色圆环，当进度为100%时，圆环完成
- 2、从右侧抛出蓝色小方块，小方块沿着曲线到达圆环正上方
- 3、蓝色小方块下落，下落过程中，逐渐变长，当方块与圆圈接触时，进入圆环的部分变粗，同时圆环逐渐被挤压，变成椭圆形
- 4、方块底端到达圆环中心后，发出三个分叉向圆周延伸，同时椭圆被撑大，逐渐恢复回圆形
- 5、圆环变绿色，画出绿色勾√
仔细分析一下第一部分，则是canvas.drawArc就可以，随着进度改变初始位置，和弧长
第二部分也不难没和第一部分基本一样，只不过圆变大了
第三部分算是最难的部分了，先路径，判断
第一部分、随进度增加圆弧增加，最后成圆
上面我们分析也提到，实现并不难，这里我们用handle的定时原理来代替进度
MainActivity
public void button(View view){
switch (view.getId()){
case R.id.btn2:
//定时器原理
final Handler handler=new Handler();
i=0;
handler.postDelayed(new Runnable() {
@Override
public void run() {
if (i<360){
i+=10;
mMyView.setProgress(i);
handler.postDelayed(this,100);
}else {
mMyView.finishSuccess();
}
}
},1000);
}
}
然后在我们的自定义MyView中，设置setProgress参数,收到进度值，刷新页面，onDrow更新进度值，绘制圆弧随进度改变
/**
* 开始完成动画
*/
private void start(){
post(new Runnable() {
@Override
public void run() {
mRotateAnimation.start();
}
});
}
public void setProgress(int progress) {
status = 0;
this.progress = progress;
postInvalidate();
}
/**
* loading成功后调用
*/
public void finishSuccess() {
setProgress(maxProgress);
this.isSuccess = true;
status = 1;
start();
}
/**
* loading失败后调用
*/
public void finishFail() {
setProgress(maxProgress);
this.isSuccess = false;
status = 1;
start();
}
}
重写onSizeChanged
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
mWidth = w;
mHeight = h;
//居中设置 圆的半径 小编这里的半径为130
radius = Math.min(getMeasuredWidth(),getMeasuredHeight())/4-strokeWidth;
//居中绘圆 小编这里的圆为150，150，410，410
mRectF.set(new RectF(radius+strokeWidth, radius+strokeWidth, 3 * radius+strokeWidth, 3 * radius+strokeWidth));
}
重写onDraw
圆弧起始状态
圆弧最终状态
可以看到，首先圆弧有一定的起始角度，我们知道，在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)
根据上面的结论，我们得到圆弧的具体绘制方式如下：
@Override
protected void onDraw(Canvas canvas) {
switch (status){
case 0:
//设置一下maxProgress最大为360（private int maxProgress=360；），这里设置多少无所谓，设置360，方便理解
float precent = 1.0f*progress/maxProgress;
canvas.drawArc(mRectF, startAngle-270*precent, -(60 + precent*300), false, circlePaint);
break;
当然我们要在初始化的时候定义一下paint
circlePaint.setAntiAlias(true);
circlePaint.setColor(Color.argb(255, 48, 63, 159));
circlePaint.setStrokeWidth(strokeWidth);
circlePaint.setStyle(Paint.Style.STROKE);
第一部分完成，看一下效果图
圆弧运动状态
第二部分、抛出小方块
首先构思如何绘出小方块，其实方法有多种，可以用canvas的drawLine，也可以drawArc，小编这里用的是drawArc，有开始角度，和横扫角度，这样会很方便的控制移动，而用drawLine会很麻烦，原文用的drawLine，反正我是没有看懂，如果你看懂了，可以留言教教我
先看一张小编用软件绘制的图，我们可以看出深蓝色的圆为小圆，红色的为大圆（没画完整），那么大圆的弧度右上部分就是小方块的运动轨迹
第一种方法
１.假设运动轨迹是某个圆的一段弧，那么根据勾股定理有如下方程
(X+R)^2 + （2R）^2 = (X+2R)^2
２.解得X=R/2(其实也很容易解，就是勾三股四玄五) ,小编这里的R为130（上面有写到），我们只需要知道圆心角是多少度，就可以设置运动轨迹了
弦长为(R)^2 + （2R）^2 =L^2,解L=根5 * R
３.已知弦长L和半径R求大圆半径:
sinA=(1/2)*L/R=L/(2R),圆心角=2asin(L/(2R)）
圆心角*180/π=度数 即2asin(L/(2R)）*180/π=度数
Android中这样表示
(2*Math.asin(290.68/650))*180/Math.PI
第二种方法
这也是最好用的方法，反正原文作者的那种我是看不懂
如果勾股定理你已经忘得一干二净了，那么你也可以直接运用Android的度数公式
那么如何计算任意两点间直线的倾斜角呢?只需要将两点x,y坐标分别相减得到一个新的点(x2-x1,y2-y1)。然后利用它求出角度即可——Math.atan2(y2-y1,x2-x1)。
Math.atan2(y2-y1,x2-x1) * 180.0 / Math.PI
//抛出动画
System.out.println(endAngle);
mRotateAnimation = ValueAnimator.ofFloat(0f, (float)(Math.atan2(-260, 195) * 180.0 / Math.PI));
mRotateAnimation.setDuration(1000);
mRotateAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
mRotateAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
curSweepAngle = (float) animation.getAnimatedValue();
invalidate();
}
});
／／设置监听
mRotateAnimation.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
curSweepAngle = 0;
if (isSuccess) {
status = 2;
mDownAnimation.start();
} else {
status = 5;
mCommaAnimation.start();
}
}
});
我们的小方块就这样完成了
方块下落，压缩圆环
可以说下落过程，是整个动画中最复杂的过程了，包括方块下落，圆环挤压，方块变粗三个过程，整个过程，从方块下落开始，到方块底部到底圆心
