Android自定义View——仿ViVO X6 极速闪充动画效果

最新推荐文章于 2022-11-06 00:00:02 发布
最新推荐文章于 2022-11-06 00:00:02 发布
阅读量4.4k 收藏 68
点赞数 8
分类专栏： Android 文章标签： android 动画 控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25193681/article/details/51873237
版权

一直都在看自定义View，经过一个星期的坚持，基本上能够写出一些比较实用的控件效果了，今天天气太热，就待在家里玩手机，然后手机没电了，在充电的时候，看到了手机的充电动画，觉得挺酷，然后自己我就仔细的分析了一下这里的动画内容，就觉得，这个我也能写出来，所以就有了这篇博客。纯属原创。

先看看效果，因为图片的原因，只能看到静态的。

这里写图片描述

这个就是效果图了。当然了，这么看好像不怎么样，但是配上了动画，还是挺好看的。

自定义控件的话，其实做的多了，运用的多了，就会觉得自定义View，跟在Photo shop 里面画图一样，我们通过建立图层，然后再图层里面绘制自己想要的效果。

这里其实也是一样的，运用到了我前面讲的一些知识，比如这篇：
Android自定义View——弧线展示图，原理上大体相当，结合这次的效果，我们看看，这里面是有四个弧形，两个圆，还有一个类似于时钟刻度的效果。所以知道这些的话，这就比较容易实现了。

首先，新建一个类，取名为VIVOPhone,然后继承自View，重载三个构造函数，然后进入主题。

同样的，我们先看看运用到了哪些变量

    // 定义五个画笔
    private Paint mSmileRing, mBigRing, mInCrilePaint, mInLine, mTextPaint;
    // 控件的高宽
    private float mWidth, mHeight;
    // 矩形的空间
    private RectF mRectF;
    // 四个弧线的开始角度
    private float startAngle = 270, startAngle2 = 270, startAngle3 = 270,
            startAngle4 = 270, sweepAngle = 90;
    // 文字
    private String text = "70%";
    // 文字的大小
    private float tvSize = 80;
    // 刻度的进度
    private float progress;

然后我们开始初始化数据。

private void initView() {
        mSmileRing = new Paint();
        mSmileRing.setAntiAlias(true);
        mSmileRing.setStrokeWidth(5);
        mSmileRing.setStyle(Style.STROKE);
        mSmileRing.setColor(Color.parseColor("#12ADFF"));

        mBigRing = new Paint();
        mBigRing.setAntiAlias(true);
        mBigRing.setStrokeWidth(20);
        mBigRing.setStyle(Style.STROKE);
        mBigRing.setColor(Color.parseColor("#12ADFF"));

        mInCrilePaint = new Paint();
        mInCrilePaint.setAntiAlias(true);
        mInCrilePaint.setStrokeWidth((float) 0.5);
        mInCrilePaint.setStyle(Style.STROKE);
        mInCrilePaint.setColor(Color.parseColor("#eeeeee"));

        mInLine = new Paint();
        mInLine.setAntiAlias(true);
        mInLine.setStrokeWidth(3);
        mInLine.setColor(Color.parseColor("#00ff00"));

        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setStrokeWidth(3);
        mTextPaint.setTextSize(tvSize);
        mTextPaint.setColor(Color.parseColor("#ffffff"));
    }

这里主要是对画笔进行初始化，包括设置大小、宽度、样式、颜色等等。这个方法，最后还是要在构造函数里面调用。

画笔初始化好了，接下来就看看怎么给变量赋值；

一样的，我们还是在onSizeChange()方法里面写赋值的操作。代码如下：


    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;

    }

这里很简单，就是给高跟宽赋值。

好了，最后看看onDraw方法是怎么写的。


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvasOutArc1(canvas, mRectF);
        canvasOutArc2(canvas, mRectF);
        canvasOutArc3(canvas, mRectF);
        canvasOutArc4(canvas, mRectF);
        drawCircle(canvas);
        drawCircleIn(canvas);
        canvasDrawText(canvas);

    }

没错，我这里把每一个的绘制都抽成了方法，这样是为了更好的管理和阅读。看到一个：


    /**
     * 绘制最外面的弧线
     * 
     * @param canvas
     */
    private void canvasOutArc1(Canvas canvas, RectF mRectF) {
        mRectF = new RectF((float) (mWidth * 0.1), (float) (mWidth * 0.1),
                (float) (mWidth * 0.9), (float) (mWidth * 0.9));
        canvas.drawArc(mRectF, startAngle, sweepAngle + 90, false, mSmileRing);
    }

这个是最外层的圆，接下来就是第二个，第三个，第四个，我全部列出来。

/**
     * 绘制外层的第二个
     * 
     * @param canvas
     * @param mRectF
     */
    private void canvasOutArc2(Canvas canvas, RectF mRectF) {
        mRectF = new RectF((float) (mWidth * 0.14), (float) (mWidth * 0.14),
                (float) (mWidth * 0.85), (float) (mWidth * 0.85));
        canvas.drawArc(mRectF, startAngle2, sweepAngle + 30, false, mBigRing);
    }

第三个：

/**
     * 绘制里面第二个小的
     * 
     * @param canvas
     */
    private void canvasOutArc3(Canvas canvas, RectF mRectF) {
        mRectF = new RectF((float) (mWidth * 0.22), (float) (mWidth * 0.22),
                (float) (mWidth * 0.795), (float) (mWidth * 0.795));
        canvas.drawArc(mRectF, startAngle3, sweepAngle, false, mSmileRing);
    }

第四个：

    /**
     * 绘制里面第二个小的
     * 
     * @param canvas
     */
    private void canvasOutArc4(Canvas canvas, RectF mRectF) {
        mRectF = new RectF((float) (mWidth * 0.255), (float) (mWidth * 0.255),
                (float) (mWidth * 0.75), (float) (mWidth * 0.75));
        canvas.drawArc(mRectF, startAngle4, sweepAngle, false, mBigRing);
    }

然后就是两个圆了：

第一个圆，这里面还包含了锯齿：

// 绘制内切圆和锯齿
    private void drawCircle(Canvas canvas) {
        float radius = (float) (mHeight - (mHeight * 0.3) * 2 - (mWidth * 0.17));
        float yuanX = (float) (mHeight / 2);
        float yuanY = (float) (mWidth / 2);

        canvas.drawCircle(yuanX, yuanY, radius, mInCrilePaint);
        canvas.save();

        float nowWidth = (float) (getMeasuredWidth());
        float nowHeight = getMeasuredHeight();
        for (int i = 0; i < 72; i++) {
            // canvas.drawLine(nowWidth / 2, nowHeight / 2 - nowWidth / 2,
            // nowWidth / 2, nowHeight / 2 - nowWidth / 2 + 30, mInLine);

            if (i >= progress) {
                mInLine.setColor(Color.parseColor("#555555"));
            } else {
                mInLine.setColor(Color.parseColor("#00ff00"));
            }

            canvas.drawLine(nowWidth / 2,
                    (float) (nowHeight / 2 - nowWidth / 2 + mWidth / 3.7),
                    nowWidth / 2, (float) (nowHeight / 2 - nowWidth / 2
                            + mWidth * 0.05 + mWidth / 3.7), mInLine);

            canvas.rotate(5, getWidth() / 2, getHeight() / 2);

        }

    }

第二个圆：

// 绘制最里面的圆
    private void drawCircleIn(Canvas canvas) {
        float radius = (float) (mHeight - (mHeight * 0.3) * 2 - (mWidth * 0.22));
        float yuanX = (float) (mHeight / 2);
        float yuanY = (float) (mWidth / 2);

        canvas.drawCircle(yuanX, yuanY, radius, mInCrilePaint);
        canvas.save();

    }

最后暴露给外面一个方法，用于动画效果：

    public void setData(int startAngle, float d) {
        this.startAngle = startAngle;
        this.startAngle2 = 360 - startAngle;
        this.startAngle3 = startAngle;
        this.startAngle4 = 360 - startAngle;
        progress = d / 4;
        postInvalidateDelayed(500);
    }

这里为了效果更明显，我让它五毫秒的速度更新UI，这里就是View的全部内容，下面，我把所有的代码都列出来：

布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg"
    tools:context=".MainActivity" >

    <com.example.vivoopen.weight.VivoView
        android:id="@+id/vivo"
        android:layout_width="180dip"
        android:layout_height="180dip"
        android:layout_centerInParent="true" />

</RelativeLayout>

MainActivity.java:

public class MainActivity extends Activity {
    private VivoView view;
    private boolean isRun = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        view = (VivoView) findViewById(R.id.vivo);

        new Thread(new Runnable() {
            public void run() {
                synchronized (view) {

                    while (isRun) {
                        Message msg;
                        for (int i = 0; i < n2; i = i + 10) {
                            msg = new Message();
                            msg.obj = i;
                            SystemClock.sleep(100);
                            msg.what = 1;
                            handler.sendMessage(msg);
                        }
                        msg = new Message();
                        msg.what = 2;
                        handler.sendMessage(msg);
                    }
                }
            }
        }).start();

    }

    int n2 = 2;
    private Handler handler = new Handler() {
        public void handleMessage(android.os.Message msg) {

            switch (msg.what) {
            case 1:
                int a = (Integer) msg.obj;
                view.setData(a, a);
                break;
            case 2:
                n2 = 359;
                break;
            default:
                break;
            }

        };
    };

}

VivoView.java:

public class VivoView extends View {
    // 定义五个画笔
    private Paint mSmileRing, mBigRing, mInCrilePaint, mInLine, mTextPaint;
    // 控件的高宽
    private float mWidth, mHeight;
    // 矩形的空间
    private RectF mRectF;
    // 四个弧线的开始角度
    private float startAngle = 270, startAngle2 = 270, startAngle3 = 270,
            startAngle4 = 270, sweepAngle = 90;
    // 文字
    private String text = "70%";
    // 文字的大小
    private float tvSize = 80;
    // 刻度的进度
    private float progress;

    public VivoView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initView();

    }

    public VivoView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    public VivoView(Context context) {
        super(context);
        initView();
    }

    private void initView() {
        mSmileRing = new Paint();
        mSmileRing.setAntiAlias(true);
        mSmileRing.setStrokeWidth(5);
        mSmileRing.setStyle(Style.STROKE);
        mSmileRing.setColor(Color.parseColor("#12ADFF"));

        mBigRing = new Paint();
        mBigRing.setAntiAlias(true);
        mBigRing.setStrokeWidth(20);
        mBigRing.setStyle(Style.STROKE);
        mBigRing.setColor(Color.parseColor("#12ADFF"));

        mInCrilePaint = new Paint();
        mInCrilePaint.setAntiAlias(true);
        mInCrilePaint.setStrokeWidth((float) 0.5);
        mInCrilePaint.setStyle(Style.STROKE);
        mInCrilePaint.setColor(Color.parseColor("#eeeeee"));

        mInLine = new Paint();
        mInLine.setAntiAlias(true);
        mInLine.setStrokeWidth(3);
        mInLine.setColor(Color.parseColor("#00ff00"));

        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setStrokeWidth(3);
        mTextPaint.setTextSize(tvSize);
        mTextPaint.setColor(Color.parseColor("#ffffff"));
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvasOutArc1(canvas, mRectF);
        canvasOutArc2(canvas, mRectF);
        canvasOutArc3(canvas, mRectF);
        canvasOutArc4(canvas, mRectF);
        drawCircle(canvas);
        drawCircleIn(canvas);
        canvasDrawText(canvas);

    }

    // 绘制文字
    private void canvasDrawText(Canvas canvas) {
        float textSize = mTextPaint.measureText(text);
        float x = mWidth / 2 - textSize / 2;
        float y = mHeight / 2 + textSize / 5;
        canvas.drawText(text, x, y, mTextPaint);
    }

    // 绘制最里面的圆
    // 绘制内切圆和锯齿
    private void drawCircleIn(Canvas canvas) {
        float radius = (float) (mHeight - (mHeight * 0.3) * 2 - (mWidth * 0.22));
        float yuanX = (float) (mHeight / 2);
        float yuanY = (float) (mWidth / 2);

        canvas.drawCircle(yuanX, yuanY, radius, mInCrilePaint);
        canvas.save();

    }

    // 绘制内切圆和锯齿
    private void drawCircle(Canvas canvas) {
        float radius = (float) (mHeight - (mHeight * 0.3) * 2 - (mWidth * 0.17));
        float yuanX = (float) (mHeight / 2);
        float yuanY = (float) (mWidth / 2);

        canvas.drawCircle(yuanX, yuanY, radius, mInCrilePaint);
        canvas.save();

        float nowWidth = (float) (getMeasuredWidth());
        float nowHeight = getMeasuredHeight();
        for (int i = 0; i < 72; i++) {
            // canvas.drawLine(nowWidth / 2, nowHeight / 2 - nowWidth / 2,
            // nowWidth / 2, nowHeight / 2 - nowWidth / 2 + 30, mInLine);

            if (i >= progress) {
                mInLine.setColor(Color.parseColor("#555555"));
            } else {
                mInLine.setColor(Color.parseColor("#00ff00"));
            }

            canvas.drawLine(nowWidth / 2,
                    (float) (nowHeight / 2 - nowWidth / 2 + mWidth / 3.7),
                    nowWidth / 2, (float) (nowHeight / 2 - nowWidth / 2
                            + mWidth * 0.05 + mWidth / 3.7), mInLine);

            canvas.rotate(5, getWidth() / 2, getHeight() / 2);

        }

    }

    /**
     * 绘制最外面的弧线
     * 
     * @param canvas
     */
    private void canvasOutArc1(Canvas canvas, RectF mRectF) {
        mRectF = new RectF((float) (mWidth * 0.1), (float) (mWidth * 0.1),
                (float) (mWidth * 0.9), (float) (mWidth * 0.9));
        canvas.drawArc(mRectF, startAngle, sweepAngle + 90, false, mSmileRing);
    }

    /**
     * 绘制外层的第二个
     * 
     * @param canvas
     * @param mRectF
     */
    private void canvasOutArc2(Canvas canvas, RectF mRectF) {
        mRectF = new RectF((float) (mWidth * 0.14), (float) (mWidth * 0.14),
                (float) (mWidth * 0.85), (float) (mWidth * 0.85));
        canvas.drawArc(mRectF, startAngle2, sweepAngle + 30, false, mBigRing);
    }

    /**
     * 绘制里面第二个小的
     * 
     * @param canvas
     */
    private void canvasOutArc3(Canvas canvas, RectF mRectF) {
        mRectF = new RectF((float) (mWidth * 0.22), (float) (mWidth * 0.22),
                (float) (mWidth * 0.795), (float) (mWidth * 0.795));
        canvas.drawArc(mRectF, startAngle3, sweepAngle, false, mSmileRing);
    }

    /**
     * 绘制里面第二个小的
     * 
     * @param canvas
     */
    private void canvasOutArc4(Canvas canvas, RectF mRectF) {
        mRectF = new RectF((float) (mWidth * 0.255), (float) (mWidth * 0.255),
                (float) (mWidth * 0.75), (float) (mWidth * 0.75));
        canvas.drawArc(mRectF, startAngle4, sweepAngle, false, mBigRing);
    }

    public void setData(int startAngle, float d) {
        this.startAngle = startAngle;
        this.startAngle2 = 360 - startAngle;
        this.startAngle3 = startAngle;
        this.startAngle4 = 360 - startAngle;
        progress = d / 4;
        postInvalidateDelayed(500);
    }

}

好了，所有的代码都列出来了，有什么不懂的可以在下方留言，如果有更好的想法，也可以分享一下哈。最后，祝大家周末愉快！

小瓶盖_tl
关注
  • 8
    点赞
  • 踩
  • 68
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Android 10.0 SystemUI 仿华为充电动画
安卓兼职framework和app工程师的博客
04-03 1161
在华为手机上经常看到在锁屏充电时，会出现一个充电动画，几秒钟后消失了，觉得这个动画挺好看的，所以就来自定义模仿华为动画，在10.0的产品中使用这个充电动画来增加产品亮点增加充电动画的实现类，
Android仿ViVO X6 极速闪充动画效果
09-02
本篇文章将探讨如何在Android平台上仿制ViVO X6的极速闪充动画效果，这是一个吸引用户注意力并提升用户体验的视觉特效。 首先，我们要创建一个新的类`VIVOPhone`，继承自`View`。在类中，我们需要定义一些必要的...
基于Visual C#2010 与WPF开发Windows 7电源管理
尹成的技术博客
05-30 4891
关注微软动态的用户还记得他发布的那份“Windows 7 Power Management”白皮书吗？这个白皮书详细的讲述了Win7的电源管理技术方案，和如何降低电能消耗的原理。那么这个原理是怎么样的呢？    　　1. 空闲资源的能耗　　这是众多省电技术中最根本的一项节电技术。在Win7里，空闲时的耗电量得到有效改善，当某个硬件一定时间不工作后就会进入低功耗状态已达到省电的目的。包括CPU，
android炫酷的自定义view,Android自定义View实现炫酷进度条
weixin_31128057的博客
05-25 106
本文实例为大家分享了Android实现炫酷进度条的具体代码，供大家参考，具体内容如下下面我们来实现如下效果：第一步：创建attrs文件夹，自定义属性：第二步：自定义View：/*** Created by Michael on 2019/11/1.*/public class MyProgress extends View {private int outColor;private int inn...
Android11.0(R) 手机锁屏炫酷充电动画————自定义View方案
cczhengv
03-12 1726
本片文章的源码和修改思路均来自 Robin-GG 这里只是将其整理出来，实际验证亲测可行。 效果图 修改文件清单 SystemUI锁屏充电动画.zip vendor/mediatek/proprietary/packages/apps/SystemUI/res/drawable-xhdpi/ vendor/mediatek/proprietary/packages/apps/SystemUI/res/layout/prize_charge_layout.xml vendor/mediatek/propr
android6自定义锁屏,Android自定义view 锁屏的绘制
weixin_42522750的博客
05-25 158
1. 锁屏效果如下图所示2. 源码及流程介绍2.1 辅助线绘制canvas.drawLine(0, standardY, canvas.getWidth(), standardY, paint);paint.setColor(Color.BLUE);canvas.drawLine(standardX, 0, standardX, canvas.getHeight(), paint);2.2 绘制忽...
Android属性动画与自定义View——实现vivo x6更新系统的动画效果
07-17
本篇文章将聚焦于如何利用这些技术来实现类似vivo x6更新系统的水波纹动画效果。通过学习这个案例，我们可以深入理解Android动画系统的工作原理，并提升自定义View的开发能力。 属性动画是Android 3.0（API Level ...
自定义View——仿Vivo i管家病毒扫描动画效果
07-12
本示例中，我们探讨的主题是“自定义View——仿Vivo i管家病毒扫描动画效果”，这是一个模仿Vivo手机内置i管家应用的病毒扫描过程的动画效果。通过这个项目，我们可以学习到如何在Android中创建动态的、交互式的视图...
Android自定义View——仿1号店垂直滚动广告条实现
12-25
Android自定义View——仿1号店垂直滚动广告条实现 Android自定义View——仿1号店垂直滚动广告条实现
基于WPF进度条实现的电池自定义控件
10-09
一个基于WPF进度条实现的电池自定义控件 实现了充电的效果，有充电的图标，有电量不同百分比的颜色变化，从红到绿。 有纵向和横向两种。 里面有一个可执行的工程，用slider去改变电池progressbar的value，效果不错。 请大家多提宝贵意见。 交流可发送到simonopera#aliyun.com
模仿vivo官网html+css.zip
07-17
模仿vivo官网html+css 包含登录注册和官网 模仿vivo官网html+css
自定义电池充电动画效果
10-28
这是一个电池充电的效果，电量从底部上顶部逐渐变多，再变为0。反复循环。可以设置进度。代码用了属性动画。
超酷超炫的vivo jquery
11-12
超酷超炫的vivo jquery pc web 端完美兼容，采用最新的htmm5,css3。 解压后点解index.html 就可以运行
ios-电池电量展示的动画.zip
07-11
模拟输入电量的方式展示动画，如果后需要的小伙伴可以获取手机电量显示！ github地址：https://github.com/yanhaiqiang/HQBatteryGauge.git
Android canvas 监听绘制电池电量
Venus 的博客
02-27 1022
文章目录1、简介2、自定义 BatteryView3、 xml 文件 1、简介 使用canvas 根据电池电量变化 绘制电池图标 1)充电 显示绿色 2）电量低于10%使用 红色 3）其余白色 2、自定义 BatteryView package recognizerdemo.speech.baidu.com.mybatteryshow; import android.content.Broa...
vue中用canvas画移动端电量显示 实现充电动画
石头的专栏
06-26 5034
写一个电量组件 battery.vue <template> <div> <canvas ref="mycanvas" :width="cWidth" :height="cHeight"></canvas> </div> </template> <script> export d...
Android仿苹果电量显示
最新发布
分享技术与经验的博客
11-06 1万+
自定义电池电量的View自定义中通过函数裁剪圆角矩形，实现类似苹果电量的半圆角半直角的效果。
vivo电池损耗指令代码_「值得收藏」手机上的神奇代码，除了*#*#6485#*#*，还有这些...
热门推荐
weixin_39766109的博客
10-23 3万+
最近在各大手机平台好奇的看到一条代码可快速查看手机电池的详细信息，居然成为了大家谈论的焦点，各手机商粉丝纷纷晒出自己新买手机电池信息的截图。除了*#*#6485#*#*外，安卓手机还有哪些神奇的代码呢？小编本人用的是小米10，亲测有效。(仅限安卓系统)1.(查看设备串号*#06#)现在我们所使用的手机，在出厂前都会有入网登记的，并且会分配移动设备设备识别代码，即通常所说的手机序列号(IMEI)和串...
Android酷炫动画效果之3D星体旋转效果
01-20
通过解读本文的示例代码，读者将学会如何通过自定义View和属性动画来实现自己想要的动画效果，这将对他们在Android开发中实现炫酷的动画效果有很大帮助。 总之，本文通过介绍Android中实现酷炫的3D星体旋转效果的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值