Android Canvas进阶之自定义View实现Splash的旋转、扩散聚合、水波纹特效

最新推荐文章于 2021-05-29 02:13:57 发布
最新推荐文章于 2021-05-29 02:13:57 发布
阅读量494 收藏 3
点赞数
分类专栏： # UI 文章标签： 旋转动画 扩散聚合 水波纹 Canvas进阶 自定义View
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zb987570437/article/details/100609866
版权

先上效果图

 动画可以分割为3阶段，第一阶段是6个小圆的旋转，第二阶段是6个小圆的扩散和收缩，第三部分是水波纹特效，动画的实现也是按照这三个阶段进行实现的。

1.初始化

自定义FlashView继承View，然后在构造方法中对画笔初始化，初始化2支画笔，一个是画小圆的，另一个是第三阶段画水波纹的

    private void init() {
        setBackgroundResource(R.drawable.girl);//先设置一张背景，模拟splash后面的界面

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mHolePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mHolePaint.setStyle(Paint.Style.STROKE);
        mHolePaint.setColor(Color.WHITE);//扩散圆的颜色为白色
        mSplashState = new RotateState();
    }

有一堆成员变量的声明，每个都有详细注释，一看就懂

   private Paint mPaint;//画小圆的画笔
    private Paint mHolePaint;//画水波纹的画笔
    private int[] circleColors = {0xFFFF9600, 0xFF02D1AC, 0xFFFFD200, 0xFF00C6FF, 0xFF00E099, 0xFFFF3892};//6个小圆的颜色的数组
    private float mCenterX;//旋转圆的中心横坐标
    private float mCenterY;//旋转圆的中心纵坐标
    private float mDistance;//表示斜对角线长度的一半,扩散圆最大半径
    private float mCircleRadius = 18; //6个小球的半径
    private float mRotateRadius = 90;//旋转大圆的半径
    private float mCurrentRotateRadius = mRotateRadius;//当前旋转圆的半径
    private float mCurrentRotateAngle = 0F; //当前旋转圆的旋转角度
    private float mCurrentHoleRadius = 0F;//扩散圆的半径
    private int mRotateDuration = 1000; //旋转动画的时长
    private ValueAnimator mValueAnimator;//属性动画
    private SplashState mSplashState;

旋转圆的中心坐标和水波纹扩散圆的最大半径需要根据屏幕尺寸初始化，因此放到onMeasure中

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mCenterX = MeasureSpec.getSize(widthMeasureSpec) / 2;
        mCenterY = MeasureSpec.getSize(heightMeasureSpec) / 2;
        mDistance = (float) Math.hypot(mCenterX, mCenterY); //hypot函数是取平方根
    }

2.绘制小圆

到这里初始化工作已经做完了。在三个动画阶段开始之前先来绘制6个小球，动画的事往后稍一稍。首先定义一个抽象类SplashState，包含一个抽象方法drawState。后面的三种动画都继承自SplashState实现drawState方法，然后我们只需要在ondraw方法中调用SplashState的drawStatue方法即可，具体的实现在每个状态的drawState方法中

    private abstract class SplashState {
        abstract void drawState(Canvas canvas);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mSplashState.drawState(canvas);

    }

绘制小圆在第一个阶段旋转动画中实现，么得办法，总得找个地方去绘制，第一个是绘制小圆的背景，纯白色，第二个是绘制6个小圆，绘制背景很简单，直接绘制纯色就好，小圆的绘制稍微有一点点绕，小圆的颜色直接从定义的颜色数组里面拿，每个小圆的横坐标等于旋转的大圆半径加上旋转的大圆半径在每个小圆在极坐标中的角度的cos值，以第二个小球为例，画图可能更清晰点

    private class RotateState extends SplashState {

        @Override
        void drawState(Canvas canvas) {
            drawBackground(canvas);//画背景
            drawCircles(canvas);//画小圆
        }
    }

    /**
     * 画背景
     */
    private void drawBackground(Canvas canvas) {
        canvas.drawColor(Color.WHITE);//绘制白色背景
    }

    /**
     * 画小圆
     */
    private void drawCircles(Canvas canvas) {
        for (int i = 0; i < circleColors.length; i++) {
            float rotate = (float) (i * Math.PI * 2 / circleColors.length) + mCurrentRotateAngle;
            mPaint.setColor(circleColors[i]);
            float cX = (float) (mCenterX + (mCurrentRotateRadius * Math.cos(rotate)));
            float cY = (float) (mCenterY + (mCurrentRotateRadius * Math.sin(rotate)));
            canvas.drawCircle(cX, cY, mCircleRadius, mPaint);
        }
    }

到这里6个小圆已经绘制出来了。

3.旋转动画

接下来就是让小球球动起来，动起来就需要用到动画了，在这里使用属性动画，属性动画定义在RotateState的构造方法中，因此我们在一开始的init方法中创建对象的时候便开始的动画。属性动画数值从0变化到2*π，就是整整一圈，然后再属性动画的值变化的时候改变当前旋转角度，然后调用invalidate方法，invalidate方法会触发ondraw方法，ondraw方法中又会调用到RotateState的drawstate方法，从而实现了旋转动画，当然还要监听旋转动画执行完毕，执行完毕后我们去启动第二阶段的动画代码比较简单，直接上

    private class RotateState extends SplashState {

        private RotateState() {
            mValueAnimator = ValueAnimator.ofFloat(0, (float) Math.PI * 2);
            mValueAnimator.setInterpolator(new LinearInterpolator());
            mValueAnimator.setDuration(mRotateDuration);
            mValueAnimator.setRepeatCount(1);
            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);
                    mSplashState = new MerginState();
                }
            });

            mValueAnimator.start();
        }

        @Override
        void drawState(Canvas canvas) {
            drawBackground(canvas);//画背景
            drawCircles(canvas);//画小圆
        }
    }

4.扩散聚合动画

我们监听了第一阶段动画的结束，结束后new了一个MerginState，并赋值给mSplashState，从现在开始ondraw调用的drawState将变为MerginState的，扩散聚合动画我们是反正来的，动画的start是正向播放动画，reverse则是反正播放动画，所以我们要实现的是把旋转圆的半径从0扩散到大于旋转时候的半径值，然后再缩小到旋转时的半径值，这就要使用到OvershootInterpolator差值器了，这个差值器是开始的时候向后然后向前甩一定值后返回最后的值，关于差值器，可以参考https://blog.csdn.net/harvic880925/article/details/40049763#commentBox，按照反着来外加这个差值器，便实现了我们的效果，当然还是要监听下动画播放完毕进入第三阶段的水波纹，整个扩散聚合代码如下

    private class MerginState extends SplashState {
        private MerginState() {
            mValueAnimator = ValueAnimator.ofFloat(0, mRotateRadius);
            mValueAnimator.setDuration(mRotateDuration);
            mValueAnimator.setRepeatCount(0);
            mValueAnimator.setInterpolator(new OvershootInterpolator());
            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) {
                    mSplashState = new ExpandState();
                }
            });
            mValueAnimator.reverse();
        }

        @Override
        void drawState(Canvas canvas) {
            drawBackground(canvas);//画背景
            drawCircles(canvas);//画小圆
        }
    }

5.水波纹动画

水波纹动画的实现思路也不难，就是画一个圆，画之前将画笔设置为空心圆（mHolePaint.setStyle(Paint.Style.STROKE)），然后我们不停地改变圆环的粗细，实现水波纹的效果，空心圆的半径等于mDistance，即这个圆正好可以把整个屏幕扩住，然后一开始圆环的宽度等于圆的半径的2倍，这样整个空心圆已经把屏幕填满，然后动态的减小圆环的宽度到0，这样看起来的效果刚好就是我们要的，在这之前我们应该改变一个drawBackground方法，前两个阶段我们绘制的是整个屏幕白色，现在只是绘制圆环为白色

    private void drawBackground(Canvas canvas) {
        if (mCurrentHoleRadius > 0) {
            mHolePaint.setStrokeWidth(2 * (mDistance - mCurrentHoleRadius));
            canvas.drawCircle(mCenterX, mCenterY, mDistance, mHolePaint);
        } else {
            canvas.drawColor(Color.WHITE);//绘制白色背景
        }
    }


    private class ExpandState extends SplashState {
        private ExpandState() {
            mValueAnimator = ValueAnimator.ofFloat(0, 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);//画背景
        }
    }

整个动画的过程就算结束了，完整的代码

public class SplashView extends View {

    private Paint mPaint;//画小圆的画笔
    private Paint mHolePaint;//画水波纹的画笔
    private int[] circleColors = {0xFFFF9600, 0xFF02D1AC, 0xFFFFD200, 0xFF00C6FF, 0xFF00E099, 0xFFFF3892};//6个小圆的颜色的数组
    private float mCenterX;//旋转圆的中心横坐标
    private float mCenterY;//旋转圆的中心纵坐标
    private float mDistance;//表示斜对角线长度的一半,扩散圆最大半径
    private float mCircleRadius = 18; //6个小球的半径
    private float mRotateRadius = 90;//旋转大圆的半径
    private float mCurrentRotateRadius = mRotateRadius;//当前旋转圆的半径
    private float mCurrentRotateAngle = 0F; //当前旋转圆的旋转角度
    private float mCurrentHoleRadius = 0F;//扩散圆的半径
    private int mRotateDuration = 1000; //旋转动画的时长
    private ValueAnimator mValueAnimator;//属性动画
    private SplashState mSplashState;

    public SplashView(Context context) {
        this(context, null);
    }

    public SplashView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SplashView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        setBackgroundResource(R.drawable.girl);//先设置一张背景，模拟splash后面的界面

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mHolePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mHolePaint.setStyle(Paint.Style.STROKE);
        mHolePaint.setColor(Color.WHITE);//扩散圆的颜色为白色
        mSplashState = new RotateState();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mCenterX = MeasureSpec.getSize(widthMeasureSpec) / 2;
        mCenterY = MeasureSpec.getSize(heightMeasureSpec) / 2;
        mDistance = (float) Math.hypot(mCenterX, mCenterY); //hypot函数是取平方根
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mSplashState.drawState(canvas);

    }

    /**
     * 抽象类，三种状态继承自该类，实现drawState
     */
    private abstract class SplashState {
        abstract void drawState(Canvas canvas);
    }

    /**
     * 1.旋转动画
     */
    private class RotateState extends SplashState {

        private RotateState() {
            mValueAnimator = ValueAnimator.ofFloat(0, (float) Math.PI * 2);
            mValueAnimator.setInterpolator(new LinearInterpolator());
            mValueAnimator.setDuration(mRotateDuration);
            mValueAnimator.setRepeatCount(1);
            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);
                    mSplashState = new MerginState();
                }
            });

            mValueAnimator.start();
        }

        @Override
        void drawState(Canvas canvas) {
            drawBackground(canvas);//画背景
            drawCircles(canvas);//画小圆
        }
    }


    /**
     * 2.扩散后缩放动画
     */
    private class MerginState extends SplashState {
        private MerginState() {
            mValueAnimator = ValueAnimator.ofFloat(0, mRotateRadius);
            mValueAnimator.setDuration(mRotateDuration);
            mValueAnimator.setRepeatCount(0);
            mValueAnimator.setInterpolator(new OvershootInterpolator());
            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) {
                    mSplashState = new ExpandState();
                }
            });
            mValueAnimator.reverse();
        }

        @Override
        void drawState(Canvas canvas) {
            drawBackground(canvas);//画背景
            drawCircles(canvas);//画小圆
        }
    }

    /**
     * 3.水波纹动画
     */
    private class ExpandState extends SplashState {
        private ExpandState() {
            mValueAnimator = ValueAnimator.ofFloat(0, 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);//画背景
        }
    }

    /**
     * 画小圆
     */
    private void drawCircles(Canvas canvas) {
        for (int i = 0; i < circleColors.length; i++) {
            float rotate = (float) (i * Math.PI * 2 / circleColors.length) + mCurrentRotateAngle;
            mPaint.setColor(circleColors[i]);
            float cX = (float) (mCenterX + (mCurrentRotateRadius * Math.cos(rotate)));
            float cY = (float) (mCenterY + (mCurrentRotateRadius * Math.sin(rotate)));
            canvas.drawCircle(cX, cY, mCircleRadius, mPaint);
        }
    }

    /**
     * 画背景
     */
    private void drawBackground(Canvas canvas) {
        if (mCurrentHoleRadius > 0) {
            mHolePaint.setStrokeWidth(2 * (mDistance - mCurrentHoleRadius));
            canvas.drawCircle(mCenterX, mCenterY, mDistance, mHolePaint);
        } else {
            canvas.drawColor(Color.WHITE);//绘制白色背景
        }
    }

}

附上Demo：https://github.com/987570437/PaintDemo

Android Coder
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android canvas 转bitmap_Android仿抖音的音乐旋转效果
weixin_29696999的博客
12-27 313
这次是实现一个仿抖音的音乐旋转自定义View,先看一下效果效果图实现这个效果主要是采用的拼凑的方法，即先实现音符动画再实现图片旋转动画然后将两个效果合并到一起。先看下概念图概念图音符动画音符动画这里是利用贝塞尔曲线+PathMeasure+ValueAnimator来实现的音符动画概念1.贝塞尔曲线的绘制：因为音符的运动轨迹是自下而上的，因此我们在添加Path路径的时候需要先将起点移到右...
Android自定义View控件实现多种水波纹涟漪扩散效果
08-27
本篇文章将深入探讨如何在Android中实现一个自定义的View控件，该控件能够展示多种水波纹涟漪扩散的效果。这种效果常用于按钮点击、触摸反馈等场景，增加用户界面的动态美感。 首先，为了实现这个效果，我们需要...
Android——实现光点模糊渐变的自旋转圆环特效，实现水滴波纹特效源码
02-06
Android——实现光点模糊渐变的自旋转圆环特效，实现水滴波纹特效的源代码。 博客地址：http://blog.csdn.net/qq_22770457?viewmode=contents
使用Canvas实现Splash
mydeman的学习日志
06-15 1224
 游戏中的开头一般都需要使用闪屏（Splash Screen）来显示开发商的相关信息或者游戏的背景等，所以一般情况下游戏中的闪屏都多于一个，有两个甚至更多，例如百宝箱中的游戏中移动已经规定第一个闪屏必须是移动梦网的Logo，而第二个要出现百宝箱的logo。实现闪屏的方式有很多种，最合理的方式应该还是使用Canvas，因为闪屏过后的菜单或和游戏主界面也是在Canvas或者GameCanvas上绘制，
android画布旋转,android – 如何在Canvas中旋转圆形动画
weixin_30145205的博客
05-25 430
您可以使用动画旋转您绘制的圆(使用Canvas).以下代码有效.我修改了你的代码并添加了必要的更改.import android.app.Activity;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;...
Android Canvas绘制炫酷效果
soely的博客
01-05 1056
废话不多说，先上效果图 这个是Android Api Demo里的一个效果，附上Api Demo的github链接 https://github.com/aosp-mirror/platform_development/tree/master/samples/ApiDemos 附上一个我把这个效果抽取出来的单独的一个demo的下载链接地址： ht
Android高手进阶之自定义View，自定义属性（带进度的圆形进度条）源码
08-25
在Android开发中，自定义View是一项重要的技能，它允许开发者根据特定需求创建独特且功能丰富的UI组件。本篇文章将深入探讨如何实现一个自定义的、带有进度指示的圆形进度条，以此来提升用户界面的交互体验。我们...
Android自定义控件之自定义View(三)——自定义水波纹
01-16
我们将基于Android的自定义View类进行讲解，以创建一个具有水波纹动画的组件。 首先，我们要了解自定义View的基本流程。自定义View通常涉及以下几个关键步骤： 1. 创建一个新的Java类，继承自Android的基础View或 ...
Android自定义View实现水波纹引导动画
08-31
综上所述，实现Android自定义View的水波纹引导动画涉及到的主要知识点有： 1. 自定义View的基本概念和实现流程。 2. 继承并重写View类的关键方法，如`onDraw()`、`onSizeChanged()`。 3. 使用Paint对象设置绘图属性...
Android自定义View实现水波纹效果
01-05
介绍：水波纹散开效果的控件在 App 里面还是比较常见的，例如 网易云音乐歌曲识别，附近搜索场景。 看下实现的效果： 实现思路： 先将最大圆半径与最小圆半径间距分成几等份，从内到外，Paint 透明度依次递减，绘制...
android canvas 3D旋转木马 图片立体展示
03-08
android canvas 3D旋转木马 图片立体展示
Android用Canvas画曲线图并动态更新Demo
12-04
用Canvas画的简单表格，画了一条曲线，需要的同学可以自己扩展
canvas旋转绘图
03-02
博文《 Android画布canvas rotate，translate的理解》http://blog.csdn.net/peak1chen/article/details/50776507demo下载链接
Android自定义View(模拟竖直平面小球绕圆环旋转效果)
12-05
自定义加载等待View，模拟小球在最低点以一定初速度在重力作用下绕圆环做变速圆周运动的效果（详见：http://blog.csdn.net/l_wwbs/article/details/53408830）。
Android圆形向外扩散颜色渐浅动画
07-16
Android圆形向外扩散颜色渐浅动画
android canvas变形，移动，旋转
weixin_34033624的博客
09-13 965
publicclasstestViewextendsView{ privateBitmapmBitmap=null; privateBitmapnBitmap=null; privatefloatscaleX=1.0f; privatefloatscaleY=1.0f; privateflo...
Android自定义View 实现水波纹动画引导
陈正的博客
01-17 4461
一、实现效果图关于贝塞尔曲线 二、实现代码1.自定义viewpackage com.czhappy.showintroduce.view;import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; im
android canvas rotate 旋转的一些总结（旋转的一些注意点）
weixin_30556161的博客
04-21 1806
　　在自定义控件和利用surfaceview时候利用serfaceHolder锁定画布画图做游戏的时候，在绘制tank的图片的时候需要根据tank的方向来绘制，因此就用到canvas的rotate（float degrees）方法，试过很多次都导致屏幕上绘制的图片都乱七八糟，不是按照想象的来的。经过了很多次的尝试终于掌握了个规律： 　　canvas在绘制的时候旋转遵循： 　　1、canvas....
android 落叶效果,安卓版落叶特效-canvas篇（一）
weixin_31481495的博客
05-29 250
package net.cloudelevator.anim;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.graphics.Color;import a...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值