Android仿58同城Loading View

今天打开58同城App看到他们的网络加载Loading做的很有新意，是一个三角形，圆形，正方形不同的运动并且切换，这个效果不说有多难，至少很有创意，就着手模仿了一下，先看下效果图：



58的更加复杂，在形状运动的过程还一直不停的旋转，旋转的坐标计算太复杂， 还没有搞定，先把这个半成品开源出来。

思路：1.先画一个静态的形状和下面的阴影。
2.通过ValueAnimator不停的改变纵坐标，在动画的监听中拿到 当前的坐标值，重新invalidate()此时的View。
3.在向下的动画执行完毕后，更新Shape。然后让动画不停的运动即可。

package view;
/**
* @description 仿58加载View
* @author rzq
* @date 2015年10月10日
*/
public class MyLoadingView extends View
{
/**
* 公共变量
*/
private Context mContext;
private Resources mResource;
private Paint mPaint;
private Paint mOvalPaint;
/**
*/
private int mRadius;
private int mDistance;
private int mOvalTop;
private int mOvalHeight;
private int mOvalWidth;

/**
* 所有形状的中心位置
*/
private int mCenterX, mCenterY;
private int currentCenterY;
private Animator mRotationAnim;
private ValueAnimator mLineAnimDown;
private ValueAnimator mLineAnimUp;
private Shape shape;

public MyLoadingView(Context context)
{
this(context, null);
}

public MyLoadingView(Context context, AttributeSet attrs)
{
super(context);
this.mContext = context;
this.mResource = context.getResources();
init();
}

private void init()
{
mRadius = 10;
mDistance = 50;
mOvalHeight = 3;
mOvalWidth = 10;
mOvalTop = 25;

mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setStyle(Style.FILL);
mPaint.setColor(mResource.getColor(R.color.rect));

mOvalPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mOvalPaint.setStyle(Style.FILL);
mOvalPaint.setColor(mResource.getColor(R.color.color_666666));

setupAnimations();
shape = Shape.RECT;

}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
/**
* 宽度最长是矩形的宽,高度最高是矩形的高加上distance
*/
int width = (mRadius * 2);
int height = (mDistance + mRadius * 2 + mOvalTop + mOvalHeight);
setMeasuredDimension(width, height);
currentCenterY = mCenterX = mCenterY = mRadius;
}

@Override
protected void onDraw(Canvas canvas)
{
switch (shape)
{
case RECT:
drawRect(canvas);
break;
case TRAIL:
drawTrail(canvas);
break;
case CIRCLE:
drawCircle(canvas);
break;
}

drawOval(canvas);
}

/**
* 更具中心点的改变，绘制矩形
*/
private void drawRect(Canvas canvas)
{
canvas.drawRect(mCenterX - mRadius, currentCenterY - mRadius, mCenterX + mRadius, currentCenterY + mRadius,
mPaint);
}

private void drawTrail(Canvas canvas)
{
Path path = new Path();
int leftX = 0;
int leftY = currentCenterY + mRadius;
int middleX = mCenterX;
int middleY = currentCenterY - mRadius;
int rightX = mCenterX + mRadius;
int rightY = currentCenterY + mRadius;
path.moveTo(leftX, leftY);
path.lineTo(middleX, middleY);
path.lineTo(rightX, rightY);
path.close();
canvas.drawPath(path, mPaint);
}

private void drawCircle(Canvas canvas)
{
canvas.drawCircle(mCenterX, currentCenterY, mRadius, mPaint);
}

private void drawOval(Canvas canvas)
{
float factory = ((mDistance + mRadius) - currentCenterY) / (float) mDistance;
RectF rectF = new RectF(mCenterX - mOvalWidth * factory, mDistance + mRadius * 2 + mOvalTop, mCenterX
+ mOvalWidth * factory, mDistance + mRadius * 2 + mOvalTop + mOvalHeight);
canvas.drawOval(rectF, mOvalPaint);
}

private void setupAnimations()
{
mRotationAnim = ValueAnimator.ofInt(0, 180);

mLineAnimDown = ValueAnimator.ofInt(mCenterY + mRadius, mDistance);
mLineAnimDown.setInterpolator(new AccelerateInterpolator(1.2f));
mLineAnimDown.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()
{
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator)
{
currentCenterY = (Integer) valueAnimator.getAnimatedValue();
invalidate();
}
});

mLineAnimUp = ValueAnimator.ofInt(mDistance, mCenterY + mRadius);
mLineAnimUp.setInterpolator(new DecelerateInterpolator(1.2f));
mLineAnimUp.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()
{
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator)
{
currentCenterY = (Integer) valueAnimator.getAnimatedValue();
invalidate();
}
});

mLineAnimDown.addListener(new AnimatorListenerAdapter()
{
@Override
public void onAnimationEnd(Animator animation)
{
if (shape == Shape.RECT)
{
mPaint.setColor(mResource.getColor(R.color.triangle));
shape = Shape.TRAIL;
}
else
{
if (shape == Shape.TRAIL)
{

mPaint.setColor(mResource.getColor(R.color.circle));
shape = Shape.CIRCLE;
}
else
{
mPaint.setColor(mResource.getColor(R.color.rect));
shape = Shape.RECT;
}
}
}
});

final AnimatorSet set = new AnimatorSet();
set.addListener(new AnimatorListener()
{
@Override
public void onAnimationStart(Animator animation)
{
}

@Override
public void onAnimationRepeat(Animator animation)
{
}

@Override
public void onAnimationEnd(Animator animation)
{
set.start();
}

@Override
public void onAnimationCancel(Animator animation)
{
}
});
set.playSequentially(mLineAnimDown, mLineAnimUp);
set.setDuration(300);
set.setStartDelay(100);
set.start();
}

private enum Shape
{
RECT, TRAIL, CIRCLE;
}
}

用法：直接在布局中引入即可。
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res
/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white" >

<view.MyLoadingView
android:id="@+id/loadView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>

之前看到一个开源View整个动画都是用ViewAnimator衔接起来的，感觉这种方式非常的好，我也尝试的用这种方式实现。

扩张：自定义 View中我为方便将一些属性等的都直接指定了，更好的方式是以自定义属性的方式使用更好。

![欢迎大家关注我的微信公众号，每天会为大家推荐一篇好的技术文章，还有我的视频课程喔](https://img-blog.csdn.net/20160927222837538)