自定义View实现百度Loading动画

最新推荐文章于 2021-07-06 19:25:42 发布
最新推荐文章于 2021-07-06 19:25:42 发布
阅读量408 收藏
点赞数
分类专栏： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y874961524/article/details/77150739
版权

基本绘制

实现思路:先绘制背景色文字,然后讲Canvas裁切这个path路径,然后绘制白色的文字

绘制正弦曲线

这里使用贝塞尔曲线实现正弦曲线的绘制,使用ValueAnimator不断通知重绘 

private Path getActionPath(float curPercent) {
        final Path path = new Path();
        int x = -mWidth;
        x += curPercent * mWidth;
        path.moveTo(x, mHeight / 2);
        // 计算控制点
        int quadWidth = mWidth / 4;
        int quadHeight = mHeight / 20 * 3;
        // 第一个周期
        path.rQuadTo(quadWidth, quadHeight, quadWidth * 2, 0);
        path.rQuadTo(quadWidth, -quadHeight, quadWidth * 2, 0);
        // 第二个周期
        path.rQuadTo(quadWidth, quadHeight, quadWidth * 2, 0);
        path.rQuadTo(quadWidth, -quadHeight, quadWidth * 2, 0);

        // 右侧的直线
        path.lineTo(x + mWidth * 2, mHeight);
        path.lineTo(x, mHeight);
        path.close();
        return path;
    }

这里涉及到Path类的使用,使用path的rQuadTo()表示相对与上一个点位置进行二阶贝塞尔变换,而使用quadTo()是相对于原始坐标系进行贝塞尔变换.

绘制文字

mTextPaint.setTextSize(mTextHeight);
// 先绘制背景色文字
mTextPaint.setColor(mColor);
//绘制 文字
Rect rect = new Rect(0, 0, mWidth, mHeight);
mTextPaint.setTextAlign(Paint.Align.CENTER);
Paint.FontMetrics metrics = mTextPaint.getFontMetrics();
float top = metrics.top;
float bottom = metrics.bottom;
int centerY = (int) (rect.centerY() - top / 2 - bottom / 2);
canvas.drawText(mText, rect.centerX(), centerY, mTextPaint);

实现裁切效果

实现方式1:使用Canvas.clipPath()实现

使用canvas.clipPath()可以将Canvas裁切成成指定的Path效果,前提是曲线必须闭合

完整的onDraw()代码如下

// 先绘制背景色文字,然后讲Canvas裁切这个path路径,然后绘制白色的文字
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.d(TAG, "onDraw: mCurPercent " + mCurPercent);
        mTextPaint.setTextSize(mTextHeight);
        // 先绘制背景色文字
        mTextPaint.setColor(mColor);
        //绘制 文字
        Rect rect = new Rect(0, 0, mWidth, mHeight);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
        Paint.FontMetrics metrics = mTextPaint.getFontMetrics();
        float top = metrics.top;
        float bottom = metrics.bottom;
        int centerY = (int) (rect.centerY() - top / 2 - bottom / 2);
        canvas.drawText(mText, rect.centerX(), centerY, mTextPaint);

        // 生成闭合波浪路径
        mPath = getActionPath(mCurPercent);

        // 将Canvas按照Path的规则进行裁剪
        canvas.clipPath(mPath);
        canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2, mPaint);
        mTextPaint.setColor(Color.WHITE);
        canvas.drawText(mText, rect.centerX(), centerY, mTextPaint);
    }

实现方式2: 使用xfermode代替Canvas裁切路径

xfermode的模式:

xfermode使用注意:

  1. 使用xfermode的时候记得先使用Canvas的离屏缓冲,不然会将后绘制的src黑色背景一块绘制上去
  2. 使用xfermode完毕后及时将paint的xfermode设置为null,避免影响下次绘制paint.setXfermode(null)

这里主要使用了两种模式:
SRC_IN: 在源图像(后绘制的)和目标图像相交的地方,取源图像
SRC_ATOP:在源图像和目标图像相交的地方绘制源图像
这两种模式的应用在代码注释里也有相应的解释

onDraw的代码将改写成:

 // 先绘制背景色文字,然后讲Canvas裁切这个path路径,然后绘制白色的文字
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.d(TAG, "onDraw: mCurPercent " + mCurPercent);
        mTextPaint.setTextSize(mTextHeight);
        // 先绘制背景色文字
        mTextPaint.setColor(mColor);
        //绘制 文字
        Rect rect = new Rect(0, 0, mWidth, mHeight);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
        Paint.FontMetrics metrics = mTextPaint.getFontMetrics();
        float top = metrics.top;
        float bottom = metrics.bottom;
        int centerY = (int) (rect.centerY() - top / 2 - bottom / 2);
        canvas.drawText(mText, rect.centerX(), centerY, mTextPaint);

        // 启动离屏缓冲
        final int saved = canvas.saveLayer(0, 0, canvas.getWidth(), canvas.getHeight(), null, Canvas.ALL_SAVE_FLAG);
        final Bitmap circle = getCircleBitmap(mWidth, mHeight);
        // 生成闭合波浪路径
        mPath = getActionPath(mCurPercent);
        canvas.drawPath(mPath, mPaint);
        // SRC_IN  在src(bitmap)和dst(path)相交的地方取源图像
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        // 如果直接使用canvas.drawCircle()绘制圆形,canvas绘制圆形之外的部分没有alpha通道
        // 而xfermode计算图片层叠样式的原理是通过alpha通道,所以这里必须使用一个bitmap来绘制
        // 才能裁切掉多余的矩形
        canvas.drawBitmap(circle, 0, 0, mPaint);

        // SRC_ATOP在src(text)和dst(bitmap+path)相交的地方绘制源图像
        mTextPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));
        mTextPaint.setColor(Color.WHITE);
        canvas.drawText(mText, rect.centerX(), centerY, mTextPaint);

        canvas.restoreToCount(saved);
        // onDraw()结束前记得将xfermode设置为null,避免影响下次绘制
        mPaint.setXfermode(null);
        mTextPaint.setXfermode(null);
    }

　实现方式１完整代码


/**
 * Created by yangtianrui on 17-8-12.
 * 使用Cavas Clip实现贴吧小球
 */
@SuppressLint("DrawAllocation")
public class CanvasClipWave extends View {

    private static final String TAG = "ytr";

    private final String mText;
    private final int mColor;

    private final Paint mPaint;
    private final Paint mTextPaint;
    private Path mPath;

    private float mCurPercent;
    private int mTextHeight;
    private int mWidth;
    private int mHeight;


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

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

    public CanvasClipWave(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        final TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CanvasClipWave);
        mText = a.getString(R.styleable.CanvasClipWave_text);
        mColor = a.getColor(R.styleable.CanvasClipWave_color, Color.BLUE);
        a.recycle();
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(mColor);
        // 设置防抖动
        mPaint.setDither(true);
        mTextPaint = new Paint();
        mTextPaint.setTypeface(Typeface.DEFAULT_BOLD);

        // 不断重绘
        ValueAnimator va = ValueAnimator.ofFloat(0F, 1F);
        va.setInterpolator(new LinearInterpolator());
        va.setRepeatMode(ValueAnimator.RESTART);
        va.setRepeatCount(ValueAnimator.INFINITE);
        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mCurPercent = (float) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        va.setDuration(1000);
        va.start();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        final int wMode = MeasureSpec.getMode(widthMeasureSpec);
        final int wSize = MeasureSpec.getSize(widthMeasureSpec);
        final int hMode = MeasureSpec.getMode(heightMeasureSpec);
        final int hSize = MeasureSpec.getSize(heightMeasureSpec);
        if (wMode == MeasureSpec.EXACTLY && hMode == MeasureSpec.EXACTLY) {
            mTextHeight = hSize / 2;
            mWidth = wSize;
            mHeight = hSize;
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    // 先绘制背景色文字,然后讲Canvas裁切这个path路径,然后绘制白色的文字
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.d(TAG, "onDraw: mCurPercent " + mCurPercent);
        mTextPaint.setTextSize(mTextHeight);
        // 先绘制背景色文字
        mTextPaint.setColor(mColor);
        //绘制 文字
        Rect rect = new Rect(0, 0, mWidth, mHeight);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
        Paint.FontMetrics metrics = mTextPaint.getFontMetrics();
        float top = metrics.top;
        float bottom = metrics.bottom;
        int centerY = (int) (rect.centerY() - top / 2 - bottom / 2);
        canvas.drawText(mText, rect.centerX(), centerY, mTextPaint);

        // 生成闭合波浪路径
        mPath = getActionPath(mCurPercent);

        // 将Canvas按照Path的规则进行裁剪
        canvas.clipPath(mPath);
        canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2, mPaint);
        mTextPaint.setColor(Color.WHITE);
        canvas.drawText(mText, rect.centerX(), centerY, mTextPaint);
    }

    private Path getActionPath(float curPercent) {
        final Path path = new Path();
        int x = -mWidth;
        x += curPercent * mWidth;
        path.moveTo(x, mHeight / 2);
        // 计算控制点
        int quadWidth = mWidth / 4;
        int quadHeight = mHeight / 20 * 3;
        // 第一个周期
        path.rQuadTo(quadWidth, quadHeight, quadWidth * 2, 0);
        path.rQuadTo(quadWidth, -quadHeight, quadWidth * 2, 0);
        // 第二个周期
        path.rQuadTo(quadWidth, quadHeight, quadWidth * 2, 0);
        path.rQuadTo(quadWidth, -quadHeight, quadWidth * 2, 0);

        // 右侧的直线
        path.lineTo(x + mWidth * 2, mHeight);
        path.lineTo(x, mHeight);
        path.close();
        return path;
    }
}

实现方式2完整代码:


/**
 * Created by yangtianrui on 17-8-13.
 * 使用Xfermode实现这样的Canvas裁切效果, 代码基本上与CanvasClipWave相同
 */
@SuppressLint("DrawAllocation")
public class XfermodeWave extends View {

    private static final String TAG = "ytr";

    private final String mText;
    private final int mColor;

    private final Paint mPaint;
    private final Paint mTextPaint;
    private Path mPath;

    private float mCurPercent;
    private int mTextHeight;
    private int mWidth;
    private int mHeight;


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

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

    public XfermodeWave(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        final TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CanvasClipWave);
        mText = a.getString(R.styleable.CanvasClipWave_text);
        mColor = a.getColor(R.styleable.CanvasClipWave_color, Color.BLUE);
        a.recycle();
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(mColor);
        // 设置防抖动
        mPaint.setDither(true);
        mTextPaint = new Paint();
        mTextPaint.setTypeface(Typeface.DEFAULT_BOLD);

        // 不断重绘
        ValueAnimator va = ValueAnimator.ofFloat(0F, 1F);
        va.setInterpolator(new LinearInterpolator());
        va.setRepeatMode(ValueAnimator.RESTART);
        va.setRepeatCount(ValueAnimator.INFINITE);
        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mCurPercent = (float) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        va.setDuration(1000);
        va.start();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        final int wMode = MeasureSpec.getMode(widthMeasureSpec);
        final int wSize = MeasureSpec.getSize(widthMeasureSpec);
        final int hMode = MeasureSpec.getMode(heightMeasureSpec);
        final int hSize = MeasureSpec.getSize(heightMeasureSpec);
        if (wMode == MeasureSpec.EXACTLY && hMode == MeasureSpec.EXACTLY) {
            mTextHeight = hSize / 2;
            mWidth = wSize;
            mHeight = hSize;
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    // 先绘制背景色文字,然后讲Canvas裁切这个path路径,然后绘制白色的文字
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.d(TAG, "onDraw: mCurPercent " + mCurPercent);
        mTextPaint.setTextSize(mTextHeight);
        // 先绘制背景色文字
        mTextPaint.setColor(mColor);
        //绘制 文字
        Rect rect = new Rect(0, 0, mWidth, mHeight);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
        Paint.FontMetrics metrics = mTextPaint.getFontMetrics();
        float top = metrics.top;
        float bottom = metrics.bottom;
        int centerY = (int) (rect.centerY() - top / 2 - bottom / 2);
        canvas.drawText(mText, rect.centerX(), centerY, mTextPaint);

        // 启动离屏缓冲
        final int saved = canvas.saveLayer(0, 0, canvas.getWidth(), canvas.getHeight(), null, Canvas.ALL_SAVE_FLAG);
        final Bitmap circle = getCircleBitmap(mWidth, mHeight);
        // 生成闭合波浪路径
        mPath = getActionPath(mCurPercent);
        canvas.drawPath(mPath, mPaint);
        // SRC_IN  在src(bitmap)和dst(path)相交的地方取源图像
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        // 如果直接使用canvas.drawCircle()绘制圆形,canvas绘制圆形之外的部分没有alpha通道
        // 而xfermode计算图片层叠样式的原理是通过alpha通道,所以这里必须使用一个bitmap来绘制
        // 才能裁切掉多余的矩形
        canvas.drawBitmap(circle, 0, 0, mPaint);

        // SRC_ATOP在src(text)和dst(bitmap+path)相交的地方绘制源图像
        mTextPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));
        mTextPaint.setColor(Color.WHITE);
        canvas.drawText(mText, rect.centerX(), centerY, mTextPaint);

        canvas.restoreToCount(saved);
        // onDraw()结束前记得将xfermode设置为null,避免影响下次绘制
        mPaint.setXfermode(null);
        mTextPaint.setXfermode(null);
    }


    /**
     * 创建一个中间绘制圆形的bitmap
     */
    private Bitmap getCircleBitmap(int width, int height) {
        Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ALPHA_8);
        Canvas canvas = new Canvas(bitmap);
        canvas.drawCircle(width / 2, height / 2, width / 2, mPaint);
        return bitmap;
    }

    private Path getActionPath(float curPercent) {
        final Path path = new Path();
        int x = -mWidth;
        x += curPercent * mWidth;
        path.moveTo(x, mHeight / 2);
        // 计算控制点
        int quadWidth = mWidth / 4;
        int quadHeight = mHeight / 20 * 3;
        // 第一个周期
        path.rQuadTo(quadWidth, quadHeight, quadWidth * 2, 0);
        path.rQuadTo(quadWidth, -quadHeight, quadWidth * 2, 0);
        // 第二个周期
        path.rQuadTo(quadWidth, quadHeight, quadWidth * 2, 0);
        path.rQuadTo(quadWidth, -quadHeight, quadWidth * 2, 0);

        // 右侧的直线
        path.lineTo(x + mWidth * 2, mHeight);
        path.lineTo(x, mHeight);
        path.close();
        return path;
    }
}
杨天睿
关注
专栏目录
Android自定义View实现Loading动态图
乐活青年的博客
03-29 3232
最近家里的宽带业务到期，客服打电话说之前的套餐没了，新套餐普遍涨价，就选了一个+20元绑定一个摄像头的套餐，前两天师傅上门安装了摄像头，我手机上下载一个“小翼管家”就能在手机上实时看家里情况。话说，这种收费服务就是抢劫呀！ 回到正题，“小翼管家”App做的一般，不过打开摄像头一刻，loading动画倒是让我挺有兴趣，于是决定在摸鱼的时间动手仿一个......画六边形实在有点麻烦，还要计算角度，没那么多时间，我还要打王者......就用圆角矩形代替了...... package com.example.
baiduloading
10-11
baiduloading,仿百度加载动画的动画效果，很简单的实现。
Android:自定义view实现动画
BAOLIANG196的博客
03-03 3052
在做android APP开发时，我们需要自定义View和自定义动画，例如： 实现过程为 代码：package com.example.administrator.view;import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.ut
自定义 View 添加动画效果
PowerMartin Talk
05-21 496
自定义 View 添加动画效果 今天看教程的时候看到了自定义 View 添加动画效果的方法，通过属性动画获取值，然后设置到自定义 View 中即可。 部分代码如下： // 属性动画 ValueAnimator valueAnimator = ObjectAnimator.ofFloat(0, 3000); valueAnimator.setDuration(1000); valueAnimator.setInterpolator(new Dec
自定义View(二)-动画- 代码生成View动画
gg199402的博客
01-02 787
前言上篇我们介绍了视图动画，说的确切点应该是视图动画中的补间动画(Tween Animation)，关于逐帧动画(Frame Animation)用法更简单，这里先不做介绍后期再自定义View的使用会用到，到时候讲解。这篇我们来一起学习将上篇用XML实现的动画用试着用代码来生成，毕竟有些时候我们是用代码来控制动画的。代码生成动画Animation公共类 这里给大家发一个网站里面XML，类属性都
自定义view，动画，分类 ，联动
weixin_43819517的博客
02-23 238
Android自定义View实现loading动画加载效果
08-31
本文将探讨如何在Android中通过自定义View来实现loading动画加载效果。在系统默认的loading动画可能无法满足设计需求或审美标准时，自定义View可以提供更加个性化和高效的选择。 首先，创建一个名为`Loading_view`...
Android自定义加载loading view动画组件
01-20
CircleProgress 是一个自定义的 Android 视图组件，专门用于创建一种酷炫的加载动画效果。...它允许开发者在应用程序中集成具有特定...此外，使用自定义的插补器（Interpolator）可以实现更平滑的动画过渡，增强视觉效果。
自定义view（一）：有动画效果的计步器
jinshitou2012的专栏
07-06 159
开始练习基础： 自定义view，丢掉自己眼高手低的毛病。 自定义view：StepTextView import android.animation.ObjectAnimator; import android.animation.ValueAnimator; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.gr
Android仿百度加载动画
钝悟需要时间的打磨，顿悟需要时间的积累
10-11 3042
Android仿百度加载动画昨天我们已经做了一个仿搜狗浏览器的加载的动画，今天我们再接再厉做一个百度网页加载时的动画，大家可能会疑惑，我们天天用百度，没见什么动画啊，哥们，只能说明你的网速比较好，确实，我为了给大家录下这个动画，还专门把浏览器的速度限制在10kb/s的情况下给你截取的。切看效果图： 感觉是不是很不错，我也觉得不错，所以自己也试试怎么实现，我们先来分析下怎么实现。 1、中间的圆固定不
html逐帧动画,CSS秘密花园： 逐帧动画
weixin_35826493的博客
06-09 297
《CSS Secrets》是@Lea Verou最新著作，这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书，经过一段时间的阅读，我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感，与大家一起分享。问题通常，我们需要一个动画效果是比较难的或者说使用CSS的transition是不可能实现的。例如，一个卡通移动或一个复杂的进度条。在这种情况下，基于图像的逐帧动画是完美...
百度地图一加载进来一片空白，需要再次刷新才能正常显示
花铛
08-22 5763
可能是因为JS的加载速度大于CSS，可以通过setTimeout()延迟JS的加载。
百度地图-异步加载地图
游海东的技术专栏
05-08 8095
1、问题背景     百度地图核心js初始化不引入，在函数中创建script后引入2、实现源码 body, html,#allmap { width: 100%; height: 100%; overflow: hidden; margin:0; font-family:"微软雅黑"; font-size: 12px; font-size-adjust: n
Android自定义View实现炫酷的主题切换动画(仿酷安客户端)
热门推荐
陈小缘的博客
03-18 1万+
前两日偶然看到了一个很炫酷的动画效果： 于是就想知道它是怎么实现的，因为有了上一次分析动画效果的经验(Android仿bilibili弹幕聊天室后面的线条动画): 判断它是不是用的ValueAnimator, 如果是的话, 我们可以在设置-开发者选项里面设置 “动画时长缩放”来改变动画时长. 所以这次我们通过设置这个选项, 把动画速度降低之后, 很快就看出了其中的奥妙。 初步...
Android自定义View的动画实现方法
kg_2012的博客
09-19 2170
在自定义的柱状图中实现动画的两种方法：第一种方法，通过延时调用invalidate()方法；第二种方法，通过属性动画实现。
View 动画的实现原理以及自定义实现
欢迎关注微信公众号：DroidMind
09-30 2867
一、View动画的实现原理 View 动画的简单使用，以平移动画为例 TranslateAnimation translateAnimation = new TranslateAnimation(0, 0, 200, 200); translateAnimation.setDuration(1000); // 开始动画 view.startAnimation(translateAnimat...
关于自定义view 以及view中的动画实现
just_tanks的博客
09-20 484
最近研究了一下自定义view，现在记一下笔记：看的人不如自己去google developer自己学 自定义view用于定制特殊效果的view，或者在不愿意嵌套多个view（布局）时候实现复杂布局， 首先需要继承View类，或者如果功能比较接进已经有了的view，比如LinearLayout 可以直接继承它，然后实现自己功能； 继承之后，需要实现其构造方法，主要是用于建立内置的变量，可以在xm
Android自定义View实现碟片加载动画
"该资源主要介绍如何在...总结来说，这个示例通过自定义View，利用Matrix对图片进行旋转操作，结合Canvas的绘图功能，实现了类似碟片加载的动态效果。这种方法对于创建各种定制的加载动画或图形旋转效果非常有用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值