Android旋轉,擴散聚合,水波紋動畫

實現效果:

需要注意的點:

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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章