这就是张图片
本文原创，不能匿名转载
这次这个自定义loading还是有点意思，先看看效果图：
在十多秒的时候有点错乱，因为我只录了那么久
1.直接上代码（HopLoadingView）
package com.hadisi.hoploading;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;
/**
* Created by hadisi5216 on 2016/8/25.
*/
public class HopLoadingView extends View {
private Paint mPaint;
private int widthSpecSize;
private int heightSpecSize;
private int radius = 20;//小圆球半径
private int HLength = 100;//六边形半径
private int maxMoveH = 60;//向外移送最长距离
private double moveH = 0;//向外移动增量
private int theCircle = -1;//那个圆球在作用
private ValueAnimator animator;
public HopLoadingView(Context context) {
super(context);
mPaint = new Paint();
}
public HopLoadingView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public HopLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setColor(0xFFE6413A);
mPaint.setAntiAlias(true);
for (int i = 1; i <= 6; i++) {
if (theCircle % 6 + 1 == i)
canvas.drawCircle(widthSpecSize / 2 + (float) (Math.cos(Math.PI * i / 3) * (HLength + moveH)), heightSpecSize / 2 - (float) (Math.sin(Math.PI * i / 3) * (HLength + moveH)), radius, mPaint);
else
canvas.drawCircle(widthSpecSize / 2 + (float) Math.cos(Math.PI * i / 3) * HLength, heightSpecSize / 2 - (float) Math.sin(Math.PI * i / 3) * HLength, radius, mPaint);
}
}
public void start() {
if (animator != null)
animator.cancel();
animator = ValueAnimator.ofFloat(0f, (float) Math.PI * 6);
animator.setDuration(3000);
animator.setRepeatMode(ValueAnimator.RESTART);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setInterpolator(new LinearInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
moveH = Math.abs(Math.sin((Float) animation.getAnimatedValue())) * maxMoveH;
theCircle = (int) ((Float) animation.getAnimatedValue() / Math.PI) + 1;
nvalidate();
}
});
animator.start();
}
}
2.聊聊我的思路
1、画出那六个小圆；
2、让小圆做向外移动然后移回来的动画；
3、让六个小圆依次循环动画。
1.画出那六个小圆
图画的真丑
看上图，六个小圆分别在六边形的六个顶点，我们定义六边形的中心点为该控件的中心点(widthSpecSize / 2,heightSpecSize / 2)，则图中那个小圆的坐标为(widthSpecSize / 2 + (float) Math.cos(Math.PI * i / 3) * HLength, heightSpecSize / 2 - (float) Math.sin(Math.PI * i / 3) * HLength)。其他几个小圆的坐标只要改变为对应的角度即可，如下代码可以轻松画出六个小圆：
for (int i = 1; i <= 6; i++) {
canvas.drawCircle(widthSpecSize / 2 + (float) Math.cos(Math.PI * i / 3) * HLength, heightSpecSize / 2 - (float) Math.sin(Math.PI * i / 3) * HLength, radius, mPaint);
}
2.让小圆做向外移动然后移回来的动画
还是看上面那个图，可以通过改变HLength的值来完成向外移动然后移回来的动画；还有动画的轨迹有点正弦曲线的意思，严格来说应该是y=|sinx|函数对应的曲线。看下图随着x的不断变化，y的值在0和1之间变化。
y=|sinx|函数
可以使用属性动画，让ValueAnimator对象的变化范围为(0f, (float) Math.PI)，匀速循环播放
animator = ValueAnimator.ofFloat(0f, (float) Math.PI);
animator.setDuration(3000);
animator.setRepeatMode(ValueAnimator.RESTART);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setInterpolator(new LinearInterpolator());
再定义一个向外移动的增量moveH，那么它的值应该是下面，其中maxMoveH为它能移动的最大距离
moveH = Math.abs(Math.sin((Float) animation.getAnimatedValue())) * maxMoveH;
对应的小圆的draw应该为
canvas.drawCircle(widthSpecSize / 2 + (float) (Math.cos(Math.PI / 3) * (HLength + moveH)), heightSpecSize / 2 - (float) (Math.sin(Math.PI / 3) * (HLength + moveH)), radius, mPaint);
3.让六个小圆依次循环动画
定义一个变量theCircle标记那个小圆在运动，让ValueAnimator对象的变化范围为(0f, (float) Math.PI * 6)，则
theCircle = (int) ((Float) animation.getAnimatedValue() / Math.PI) + 1;
这样theCircle的值会ValueAnimator对象的变化在1，2，3，4，5，6之间循环，此时画小圆的方法变为
for (int i = 1; i <= 6; i++) {
if (theCircle % 6 + 1 == i)
canvas.drawCircle(widthSpecSize / 2 + (float) (Math.cos(Math.PI * i / 3) * (HLength + moveH)), heightSpecSize / 2 - (float) (Math.sin(Math.PI * i / 3) * (HLength + moveH)), radius, mPaint);
else
canvas.drawCircle(widthSpecSize / 2 + (float) Math.cos(Math.PI * i / 3) * HLength, heightSpecSize / 2 - (float) Math.sin(Math.PI * i / 3) * HLength, radius, mPaint);
}
总结：再复杂的需求，分解为N个独立的小需求，一个个干掉它，它就没那么复杂了。喜欢您就戳下下面的喜欢！
