Android高级UI之手写粒子扩散效果

先来看效果图(gif图片看起来有卡顿，真机 不会)

image

1.重写onSizeChanged方法得到 屏幕正中心点坐标

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

// 屏幕正中心点坐标

mCenterX = w /2f;

mCenterY = h /2f;

//屏幕对角线

mDiagonalDist = (float) (Math.sqrt((w * w + h * h)) /2f);//勾股定理

}

2.初始化

public SplashView(Context context) {

super(context);

init(context);

}

private void init(Context context) {

mCircleColors = context.getResources().getIntArray(R.array.splash_circle_colors);

//画笔

mPaint.setAntiAlias(true);

mPaintBackground.setAntiAlias(true);

mPaintBackground.setStyle(Paint.Style.STROKE);

mPaintBackground.setColor(mSplashBgColor);

}

3.新建SplashState 侧列模式

private abstract class SplashState {

public abstract void drawState(Canvas canvas);

public void cencel() {

mAnimator.cancel();

}

}

4.旋转动画

private class RotateState extends SplashState {

public RotateState() {

mAnimator = ValueAnimator.ofFloat(0f, (float) (Math.PI * 2));

mAnimator.setInterpolator(new LinearInterpolator());

mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

mCurrentRotationAngle = (float) animation.getAnimatedValue();

postInvalidate();

}

});

mAnimator.setDuration(mRotationDuration);

mAnimator.setRepeatCount(ValueAnimator.INFINITE);

mAnimator.start();

}

@Override

public void drawState(Canvas canvas) {

drawBackground(canvas);

//绘制小圆

draCircles(canvas);

}

}

private void drawBackground(Canvas canvas) {

if (mHoleRadius > 0f) {

mPaintBackground.setColor(Color.WHITE);

float strokeWith= mDiagonalDist-mHoleRadius;

mPaintBackground.setStrokeWidth(strokeWith);

float v = mHoleRadius + strokeWith / 2;

canvas.drawCircle(mCenterX, mCenterY, v, mPaintBackground);

} else {

canvas.drawColor(mSplashBgColor);

}

}

private void draCircles(Canvas canvas) {

Log.e("小圆的圆心点",mCenterX+","+mCenterY);

float rotertionAngle = (float) (2 * Math.PI / mCircleColors.length);

for (int i = 0; i < mCircleColors.length; i++) {

/**

* x=r*cos(a)+mCenterX

* y=r*sin(a)+mCenterY

*/

float angle = i * rotertionAngle + mCurrentRotationAngle;

float cx = (float) (mCurrentRotationRadius * Math.cos(angle) + mCenterX);

float cy = (float) (mCurrentRotationRadius * Math.sin(angle) + mCenterY);

mPaint.setColor(mCircleColors[i]);

canvas.drawCircle(cx, cy, mCircleRadius, mPaint);

}

}

4.集合动画

private class MergingState extends SplashState {

public MergingState() {

mAnimator = ValueAnimator.ofFloat(0f, mRotationRadius);

mAnimator.setDuration(mRotationDuration);

mAnimator.setInterpolator(new OvershootInterpolator(10f));

mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

Log.e("animation====", animation.getAnimatedValue() + "");

mCurrentRotationRadius = (float) animation.getAnimatedValue();

invalidate();

}

});

mAnimator.addListener(new AnimatorListenerAdapter() {

@Override

public void onAnimationEnd(Animator animation) {

super.onAnimationEnd(animation);

mState = new ExpandState();

}

});

mAnimator.reverse();

}

@Override

public void drawState(Canvas canvas) {

drawBackground(canvas);

//绘制小圆

draCircles(canvas);

}

}

5.水波纹扩散动画

private class ExpandState extends SplashState {

public ExpandState() {

mAnimator = ValueAnimator.ofFloat(mCircleRadius, mDiagonalDist);

mAnimator.setDuration(mRotationDuration);

mAnimator.setInterpolator(new LinearInterpolator());

mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

mHoleRadius = (float) animation.getAnimatedValue();

invalidate();

}

});

mAnimator.start();

}

@Override

public void drawState(Canvas canvas) {

drawBackground(canvas);

}

}