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

 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值