案例效果图如下,
案例实现步骤
1.首先用drawCircle()画好6个圆点
private void drawCircles(Canvas canvas) {
//每个小圆之间的间隔角度 = 2π/小圆的个数
float rotationAngle = (float) (2*Math.PI/mCircleColors.length);
Log.i("barry","length------:"+mCircleColors.length);
for (int i=0; i < mCircleColors.length; i++){
/**
* x = r*cos(a) +centerX
* y= r*sin(a) + centerY
* 每个小圆i*间隔角度 + 旋转的角度 = 当前小圆的真是角度
*/
double angle = i*rotationAngle + mCurrentRotationAngle;
float cx = (float) (mCurrentRotationRadius*Math.cos(angle) + mCenterX);
float cy = (float) (mCurrentRotationRadius*Math.sin(angle) + mCenterY);
Log.e("Test", "弧度="+angle+ " 对应的值="+mCurrentRotationRadius*Math.sin(angle));
mPaint.setColor(mCircleColors[i]);
canvas.drawCircle(cx,cy,mCircleRadius,mPaint);
}
}
2.通过属性动画让6个圆点开始旋转
//1.动画的初始工作;2.开启动画
//花1200ms,计算某个时刻当前的角度是多少? 0~2π
mAnimator = ValueAnimator.ofFloat(0f,(float)Math.PI*2);//Math.PI*2 用于代表360度
//在重复执行的过程中,会有卡顿的现象,LinearInterpolator 可以用于解决卡顿
mAnimator.setInterpolator(new LinearInterpolator());
mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
//计算某个时刻当前的大圆旋转了的角度是多少?
mCurrentRotationAngle = (float) valueAnimator.getAnimatedValue();
postInvalidate();
}
});
mAnimator.setDuration(mRotationDuration);
mAnimator.setRepeatCount(ValueAnimator.INFINITE);//重复
mAnimator.start();
3.当网络数据加载成功后,让旋转动画停止,同时让6个圆点先开始收缩,然后再回弹
//花1200ms,计算某个时刻当前的大圆半径是多少? r~0中的某个值
mAnimator = ValueAnimator.ofFloat(0, mRotationRadius);
mAnimator.setDuration(mRotationDuration);
mAnimator.setInterpolator(new OvershootInterpolator(10f));
mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
// 某个时刻当前的大圆半径是多少?
mCurrentRotationRadius = (float)valueAnimator.getAnimatedValue();
invalidate();
}
});
mAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
mState = new ExpandState();
}
});
// mAnimator.start();
mAnimator.reverse();;
注意细节
mAnimator.setInterpolator(new OvershootInterpolator(10f));
使6个圆点反向扩散时,具备张力效果
mAnimator.reverse();
让动画反向执行,可以达到从扩散到收缩的效果
4.让背景以圆的方式扩散
如下图,当旋转的6个点消失后,背景也应该以圆的方式进行扩展,以显示背后的内容
if(mHoleRadius>0f){
//得到画笔的宽度 = 对角线/2 - 空心圆的半径
float strokeWidth = mDiagonalDist - mHoleRadius;
mPaintBackground.setStrokeWidth(strokeWidth);
//画圆的半径 = 空心圆的半径 + 画笔的宽度/2
float radius = mHoleRadius + strokeWidth/2;
canvas.drawCircle(mCenterX,mCenterY,radius,mPaintBackground);
Log.e("Test","画圆: radius="+radius+" strokeWidth="+strokeWidth);
}else {
canvas.drawColor(mSplashBgColor);
}