實現效果:
需要注意的點:
Paint常用的Flag:
-
ANTI_ALIAS_FLAG:繪製時可以實現抗鋸齒
-
DITHER_FLAG:使位圖進行有利的抖動
-
EMBEDDED_BITMAP_TEXT_FLAG:可以在繪製文本時使用位圖字體
-
FAKE_BOLD_TEXT_FLAG:繪製文本應用合成加粗效果
-
FILTER_BITMAP_FLAG:可在縮放位圖上實現雙線性採樣
-
LINEAR_TEXT_FLAG:使文本能夠平滑線性縮放
-
STRIKE_THRU_TEXT_FLAG:使用透油裝飾繪製文本
-
SUBPIXEL_TEXT_FLAG:使文本的子像素定位
-
UNDERLINE_TEXT_FLAG:繪製文本下劃線
Paint.Style:
Style指定畫筆繪製圖形時的樣式:只繪製圖形輪廓(描邊),只繪製圖形內容 或者既繪製輪廓也繪製內容。
-
STROKE:只繪製圖形輪廓(描邊
-
FILL:只繪製圖形內容,不繪製輪廓
-
FILL_AND_STROKE:既繪製輪廓也繪製內容
用到的插值器:
-
LinearInterpolator :以常量速率變化
-
OvershootInterpolator: 向前甩一定值後再回到原來位置
實現流程:
1.初始化旋轉圓和擴散圓的畫筆,圓心位置
private void init(Context context) {
//旋轉圓的畫筆
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
//擴散圓的畫筆
mHolePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mHolePaint.setStyle(Paint.Style.STROKE);
mHolePaint.setColor(mBackgroundColor);
mCircleColors = context.getResources().getIntArray(R.array.splash_circle_colors);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mCenterX = w * 1f / 2;
mCenterY = h * 1f / 2;
mDistance = (float) (Math.hypot(w, h) / 2);
}
2.新建一個抽象狀態類,其後的旋轉狀態,擴散聚合狀態,水波紋狀態都繼承這個類
private abstract class SplashState{
abstract void drawState(Canvas canvas);
}
3.旋轉效果實現
private class RotateState extends SplashState{
private RotateState(){
mValueAnimator = ValueAnimator.ofFloat(0, (float) (Math.PI *2));
mValueAnimator.setRepeatCount(2);
mValueAnimator.setDuration(mRotateDuration);
mValueAnimator.setInterpolator(new LinearInterpolator());
mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mCurrentRotateAngle = (float) animation.getAnimatedValue();
invalidate();
}
});
mValueAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
mState = new MerginState();
}
});
mValueAnimator.start();
}
@Override
void drawState(Canvas canvas) {
//繪製背景
drawBackground(canvas);
//繪製6個小球
drawCircles(canvas);
}
}
4.擴散聚合效果實現
private class MerginState extends SplashState{
private MerginState(){
mValueAnimator = ValueAnimator.ofFloat(mCircleRadius, mRotateRadius);
mValueAnimator.setDuration(mRotateDuration);
mValueAnimator.setInterpolator(new OvershootInterpolator(10f));
mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mCurrentRotateRadius = (float) animation.getAnimatedValue();
invalidate();
}
});
mValueAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
mState = new ExpandState();
}
});
mValueAnimator.reverse();
}
@Override
void drawState(Canvas canvas) {
drawBackground(canvas);
drawCircles(canvas);
}
}
5.水波紋效果實現
private class ExpandState extends SplashState{
public ExpandState() {
mValueAnimator = ValueAnimator.ofFloat(mCircleRadius, mDistance);
mValueAnimator.setDuration(mRotateDuration);
mValueAnimator.setInterpolator(new LinearInterpolator());
mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mCurrentHoleRadius = (float) animation.getAnimatedValue();
invalidate();
}
});
mValueAnimator.start();
}
@Override
void drawState(Canvas canvas) {
drawBackground(canvas);
}
}
demo地址:https://github.com/Adolphsa/UITestDemo