Android仿ViVO X6 極速閃充動畫效果
更新時間：2016年07月12日 12:05:02 作者：qq_25193681
這篇文章主要介紹了Android仿ViVO X6 極速閃充動畫效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
一直都在看自定義View，經(jīng)過一個星期的堅持，基本上能夠?qū)懗鲆恍┍容^實用的控件效果了，今天天氣太熱，就待在家里玩手機(jī)，然后手機(jī)沒電了，在充電的時候，看到了手機(jī)的充電動畫，覺得挺酷，然后自己我就仔細(xì)的分析了一下這里的動畫內(nèi)容，就覺得，這個我也能寫出來，所以就有了這篇博客。純屬原創(chuàng)。
先看看效果，因為圖片的原因，只能看到靜態(tài)的。
這個就是效果圖了。當(dāng)然了，這么看好像不怎么樣，但是配上了動畫，還是挺好看的。
自定義控件的話，其實做的多了，運用的多了，就會覺得自定義View，跟在Photo shop 里面畫圖一樣，我們通過建立圖層，然后再圖層里面繪制自己想要的效果。
這里其實也是一樣的，運用到了我前面講的一些知識，比如這篇：
Android自定義View弧線進(jìn)度控件，原理上大體相當(dāng)，結(jié)合這次的效果，我們看看，這里面是有四個弧形，兩個圓，還有一個類似于時鐘刻度的效果。所以知道這些的話，這就比較容易實現(xiàn)了。
首先，新建一個類，取名為VIVOPhone,然后繼承自View，重載三個構(gòu)造函數(shù)，然后進(jìn)入主題。
同樣的，我們先看看運用到了哪些變量
// 定義五個畫筆 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; // 刻度的進(jìn)度 private float progress;
然后我們開始初始化數(shù)據(jù)。
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"));
}
這里主要是對畫筆進(jìn)行初始化，包括設(shè)置大小、寬度、樣式、顏色等等。這個方法，最后還是要在構(gòu)造函數(shù)里面調(diào)用。
畫筆初始化好了，接下來就看看怎么給變量賦值；
一樣的，我們還是在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);
}
然后就是兩個圓了：
第一個圓，這里面還包含了鋸齒：
// 繪制內(nèi)切圓和鋸齒
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的全部內(nèi)容，下面，我把所有的代碼都列出來：
布局文件：
<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;
// 刻度的進(jìn)度
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);
}
// 繪制最里面的圓
// 繪制內(nèi)切圓和鋸齒
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();
}
// 繪制內(nèi)切圓和鋸齒
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);
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
對于Android來說其中一項很方便的操作便是下拉菜單,下拉菜單欄可以快捷打開某項設(shè)置,這篇文章主要給大家介紹了關(guān)于Android通知欄增加快捷開關(guān)的功能實現(xiàn),需要的朋友可以參考下2023-04-04
Android實現(xiàn)聊天記錄上傳本地服務(wù)器（即時通訊）
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)聊天記錄上傳本地服務(wù)器，即時通訊功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
很多用戶經(jīng)常會出現(xiàn)過快且多次點擊同一按鈕的情況，本篇文章主要介紹了Android 防止過快點擊的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要為大家詳細(xì)介紹了android實現(xiàn)文件讀寫功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
Android自定義View實現(xiàn)環(huán)形進(jìn)度條的思路與實例
最近看到豆瓣FM的音樂播放界面，有一個環(huán)形的進(jìn)度條挺不錯的，最近有空就想著實現(xiàn)了，所以下面這篇文章主要給大家介紹了Android自定義View實現(xiàn)環(huán)形進(jìn)度條的思路與實例，需要的朋友可以參考借鑒，下面來一起看看吧。2017-04-04
Android HorizontalScrollView左右滑動效果
這篇文章主要為大家詳細(xì)介紹了Android HorizontalScrollView左右滑動效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
詳解Android中Intent對象與Intent Filter過濾匹配過程
這篇文章主要介紹了Android中Intent對象與Intent Filter過濾匹配過程，感興趣的小伙伴們可以參考一下2015-12-12
Intel HAXM為Android 模擬器加速解決模擬器運行慢的問題
Android 模擬器一直以運行速度慢著稱， 本文介紹使用 Intel HAXM 技術(shù)為 Android 模擬器加速， 使模擬器運行度媲美真機(jī)， 徹底解決模擬器運行慢的問題,感興趣的朋友可以了解下哦2013-01-01
Android App中使用RatingBar實現(xiàn)星級打分功能的教程
這篇文章主要介紹了Android App中使用RatingBar實現(xiàn)星級打分功能的教程,文中舉了一個使用SeekBar與RatingBar制作的應(yīng)用內(nèi)打分條的功能,非常簡單,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了Android Hilt依賴注入的使用，首先，某個類的成員變量稱為依賴，如若此變量想要實例化引用其類的方法，可以通過構(gòu)造函數(shù)傳參或者通過某個方法獲取對象，此等通過外部方法獲取對象實例的稱為依賴注入2023-01-01