8.Android 腾讯视频加载动画 加载框圆点旋转收缩放大缩小效果的实现

动画分析

1.先旋转

2.放大

3.缩小

 

 

具体实现:

1.我的想法：画6个圆。让它旋转！

圆的半径不变，就是x，y不停的变。因为角度不停变。有一个变量角度通过动画获取

正确思路：0---360。拿到一个变化的旋转角度。然后画6个圆！

2.放大通过插值器实现的

2.收缩：通过动画和手动绘制，不应该是用transfer,x,y实现吗

停止旋转动画

 

 

注意的地方：

1.smallAnimator.setInterpolator(new AnticipateInterpolator(10f));//

2.中心点什么时候去获取

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    mCenterx = getWidth() / 2;
    mCentery = getHeight() / 2;

旋转动画

/**
 * 8
 * 通过属性动画让6个圆点开始旋转
 */
private void rorateAni() {
    rorateAnimator = ValueAnimator.ofFloat(0f, 360f);
    rorateAnimator.setDuration(80000);
    rorateAnimator.setInterpolator(new LinearInterpolator());
    rorateAnimator.setRepeatCount(-1);
    rorateAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            changeValue = (float) animation.getAnimatedValue();//得到变化的角度值
            Log.d(TAG, "rorateAni" + changeValue);
            invalidate();
        }
    });
    rorateAnimator.start();
}

旋转时候的绘制

private void drawCircle(Canvas canvas) {
    float perAngle = (float) (2 * Math.PI / arrayList.size());
    for (int i = 0; i < arrayList.size(); i++) {
        //小圆的坐标x:屏幕的2分之1+cosA
        float angel = (float) (i * perAngle + changeValue);
        float cx = (float) (mCenterx + Math.cos(angel) * BigRadius);
        float cy = (float) (mCentery + Math.sin(angel) * BigRadius);
        paint.setColor(arrayList.get(i));
        canvas.drawCircle(cx, cy, radius, paint);
    }
}

 

聚合动画:那个大圆的半径在不停的变成0

    /***
     * 聚合动画
     */
    public void startExpandAni() {
        rorateAnimator.cancel();
        currentAniType = TYPE_SOUSHOU;
        smallAnimator = ValueAnimator.ofFloat(BigRadius, 0f);
        smallAnimator.setInterpolator(new AnticipateInterpolator(10f));//
        smallAnimator.setDuration(2000);
        smallAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                changeSmallRudio = (float) animation.getAnimatedValue();//得到变化的角度值
                Log.d(TAG, "startExpandAni" + changeSmallRudio);
                invalidate();
            }
        });
        smallAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
//                smallAnimator.reverse();
            }
        });
        smallAnimator.start();

    }

private void drawSmallCircle(Canvas canvas) {
    float perAngle = (float) (2 * Math.PI / arrayList.size());
    for (int i = 0; i < arrayList.size(); i++) {
        //小圆的坐标x:屏幕的2分之1+cosA
        float angel = (float) (i * perAngle + changeValue);
        float cx = (float) (mCenterx + Math.cos(angel) * changeSmallRudio);
        float cy = (float) (mCentery + Math.sin(angel) * changeSmallRudio);
        paint.setColor(arrayList.get(i));
        canvas.drawCircle(cx, cy, radius, paint);
    }
}

完整的代码：

public class SixCircle extends View {


private static final String TAG = "SixCircle";
ArrayList<Integer> arrayList = new ArrayList<>();


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

public SixCircle(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
init();
rorateAni();
}

Paint paint;

private void init() {
arrayList.add(Color.RED);
arrayList.add(Color.YELLOW);
arrayList.add(Color.BLUE);
arrayList.add(Color.GREEN);
arrayList.add(Color.GRAY);
arrayList.add(Color.BLACK);

paint = new Paint();
}

public SixCircle(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);


}

float radius = 50;
float BigRadius = 180;
float mCenterx = 0;
float mCentery = 0;
float changeValue;

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mCenterx = getWidth() / 2;
mCentery = getHeight() / 2;
if (currentAniType == TYPE_RORATE) {
drawCircle(canvas);
} else if (currentAniType == TYPE_SOUSHOU) {
drawSmallCircle(canvas);
}

}

private void drawSmallCircle(Canvas canvas) {
float perAngle = (float) (2 * Math.PI / arrayList.size());
for (int i = 0; i < arrayList.size(); i++) {
//小圆的坐标x:屏幕的2分之1+cosA
float angel = (float) (i * perAngle + changeValue);
float cx = (float) (mCenterx + Math.cos(angel) * changeSmallRudio);
float cy = (float) (mCentery + Math.sin(angel) * changeSmallRudio);
paint.setColor(arrayList.get(i));
canvas.drawCircle(cx, cy, radius, paint);
}
}

private void drawCircle(Canvas canvas) {
float perAngle = (float) (2 * Math.PI / arrayList.size());
for (int i = 0; i < arrayList.size(); i++) {
//小圆的坐标x:屏幕的2分之1+cosA
float angel = (float) (i * perAngle + changeValue);
float cx = (float) (mCenterx + Math.cos(angel) * BigRadius);
float cy = (float) (mCentery + Math.sin(angel) * BigRadius);
paint.setColor(arrayList.get(i));
canvas.drawCircle(cx, cy, radius, paint);
}
}

ValueAnimator rorateAnimator;
ValueAnimator smallAnimator;

/**
* 8
* 通过属性动画让6个圆点开始旋转
*/
private void rorateAni() {
rorateAnimator = ValueAnimator.ofFloat(0f, 360f);
rorateAnimator.setDuration(80000);
rorateAnimator.setInterpolator(new LinearInterpolator());
rorateAnimator.setRepeatCount(-1);
rorateAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
changeValue = (float) animation.getAnimatedValue();//得到变化的角度值
Log.d(TAG, "rorateAni" + changeValue);
invalidate();
}
});
rorateAnimator.start();
}

int currentAniType = 0;
final static int TYPE_RORATE = 0;
final static int TYPE_EXPAND = 1;
final static int TYPE_SOUSHOU = 2;

float changeSmallRudio;


/***
* 聚合动画
*/
public void startExpandAni() {
rorateAnimator.cancel();
currentAniType = TYPE_SOUSHOU;
smallAnimator = ValueAnimator.ofFloat(BigRadius, 0f);
smallAnimator.setInterpolator(new AnticipateInterpolator(10f));//
smallAnimator.setDuration(2000);
smallAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
changeSmallRudio = (float) animation.getAnimatedValue();//得到变化的角度值
Log.d(TAG, "startExpandAni" + changeSmallRudio);
invalidate();
}
});
smallAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
// smallAnimator.reverse();
}
});
smallAnimator.start();

}

demo地址：

demo地址：https://github.com/pengcaihua123456/shennandadao