com.android.vovo,Android仿ViVO X6 极速闪充动画效果
一直都在看自定义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的全部内容，下面，我把所有的代码都列出来：
布局文件：
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg"
tools:context=".MainActivity" >
android:id="@+id/vivo"
android:layout_width="180dip"
android:layout_height="180dip"
android:layout_centerInParent="true" />
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);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
com.android.vovo,Android仿ViVO X6 极速闪充动画效果相关推荐
- Android自定义View——仿ViVO X6 极速闪充动画效果
一直都在看自定义View,经过一个星期的坚持,基本上能够写出一些比较实用的控件效果了,今天天气太热,就待在家里玩手机,然后手机没电了,在充电的时候,看到了手机的充电动画,觉得挺酷,然后自己我就仔细的分 ...
- Android动画——仿vivo X6闪充动画效果
做程序猿这么久一直没有写博客,是不正常的,故以此为第一篇博客,开始我的博客生涯. 前不久,看到一篇博客,关于X6闪充动画的效果,是一个叫什么"瓶子盖子"写的,暂时就叫这个名字吧,具 ...
- Android属性动画与自定义View——实现vivo x6更新系统的动画效果
晚上好,现在是凌晨两点半,然后我还在写代码.电脑里播放着<凌晨两点半>,晚上写代码,脑子更清醒,思路更清晰. 今天聊聊属性动画和自定义View搭配使用,前面都讲到自定义View和属性动画, ...
- android 自定义园动画,Android 自定View实现仿QQ运动步数圆弧及动画效果
在之前的Android超精准计步器开发-Dylan计步中的首页用到了一个自定义控件,和QQ运动的界面有点类似,还有动画效果,下面就来讲一下这个View是如何绘制的. 1.先看效果图 2.效果图分析 功 ...
- android菊花动画,Android实现仿iOS菊花加载圈动画效果
常见的实现方式 切图,做旋转动画 自定义View,绘制效果 gif图 1.切图会增加体积,但相对简单,不过在换肤的场景下,会使用不同颜色,需要准备多张图,不够灵活. 2.由于自定义的好处,不同颜色只需 ...
- android app启动图片 加动画效果,Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案...
Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案 大家在设计APP的末期,都会想给APP搞一些"花里胡哨"的特效来提高APP的B格.博主表示亲测有效 ...
- vue移动端过渡动画_Vue仿微信app页面跳转动画效果
10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面 ...
- Android 文字 流光特效(仿锁屏文字的白光闪过动画效果)
最近有需求说要开发一个新模块,再模块的入口 用动画 提醒用户.模仿的动画效果 如下: 经过百度,发现Android 这类的动画很少,通过度娘知道可以通过 LinearGradient 线性渲染 来实现 ...
- android动画知乎,Android模仿知乎的回答详情页的动画效果
废话不多说,咱们第一篇文章就是模仿"知乎"的回答详情页的动画效果,先上个原版的效果图,咱们就是要做出这个效果 在实现之前,我们先根据上面的动画效果,研究下需求,因为gif帧数有限, ...
最新文章
- bartender外部表不是预期格式_批量合并Excel数据时“外部表不是预期格式”或“文件包含损坏数据”的两种情况...
- c# 正则过滤非中文字符
- html怎么压缩ttf,如何使用CSS包含.ttf字体？
- 基于用户行为的兴趣标签模型
- kswapd0 挖矿_bioset linux_linux bioset 进程 腾讯云
- 第 3 章 镜像 - 015 - 调试 Dockerfile
- Python项目开发公用方法--excel生成方法
- oracle excel vba6,vba6.dll下载
- rapidsvn 安装步骤
- 天正双击墙体不能编辑_20个天正CAD常备技巧，助你神速绘图！
- Django入门,,适用小白
- 新知实验室TRTC初探
- “真正的”欧洲杯，鸡冻不鸡冻？
- CentOS 6.3安装chrome
- 关于spacing和重采样、降采样的理解
- iOS 图片滚动播放
- Excel用正则表达式提取出输入正确的身份证号
- python-gitlab
- c语言程序设计例案教程,C语言程序设计案例教程
- C盘被占满原因及解决方法
热门文章
- python解释器环境中用于表示上一次运算结果的特殊变量_在Python解释器环境中,用于表示上一次运算结果的特殊变量为________...
- 《CPU自制入门》笔记——第二章 电路板的设计与制作
- Python“文件操作”略知
- Noip2019暑期训练2 反思
- android jsoup简书,爬虫之Jsoup
- SAP 系统中销项税多科目配置
- js之DOM操作（插入节点insertBefore()）
- Python开发系列课程(0) - 公告
- ICDE 2022 | Apache ShardingSphere: 一个功能全面和可插拔的数据分片平台(附论文)
- 蓝桥杯PREV-1 历届试题 核桃的数量