Android實現(xiàn)漸變色水波紋效果
本文實例為大家分享了Android實現(xiàn)漸變色水波紋效果的具體代碼,供大家參考,具體內(nèi)容如下
項目中使用到的效果,效果圖如下:

代碼實現(xiàn):
public class WaveView extends View {
private Paint mPaint, mCriclePaint, mTextPaint;
// 傾斜或旋轉(zhuǎn)、快速變化,當(dāng)在屏幕上畫一條直線時, 橫豎不會出現(xiàn)鋸齒,
// 但是當(dāng)斜著畫時, 就會出現(xiàn)鋸齒的效果,所以需要設(shè)置抗鋸齒
private DrawFilter mDrawFilter;
private int mTotalHeight, mTotalWidth;
private int mXoffset = 0;
private float[] mPointY;
private float[] mDaymicPointY;
private int currentIndex = 1;
private int currentColor=0xaa3bb6e7;
//波浪線移動速度
private static final int X_SPEED = 20;
private int percent;
public void setPercent(int percent) {
this.percent = percent;
}
public WaveView(Context context) {
super(context);
init();
}
public int getCurrentIndex() {
return currentIndex;
}
public void setCurrentIndex(int currentIndex) {
this.currentIndex = currentIndex;
if (currentIndex==1){
currentColor = 0xaa3bb6e7;
}else if(currentIndex==2){
currentColor = 0xaa3c3c3c;
}else if (currentIndex==3){
currentColor = 0xaa724527;
}
}
public WaveView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public WaveView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
//圖片線條(通用)的抗鋸齒需要另外設(shè)置
mDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
//實例化一個畫筆
mPaint = new Paint();
//去除畫筆鋸齒
mPaint.setAntiAlias(true);
//設(shè)置畫筆風(fēng)格為實線
mPaint.setStyle(Paint.Style.FILL);
//設(shè)置畫筆顏色
mPaint.setColor(Color.GREEN);
//實例化圓的畫筆
mCriclePaint = new Paint(mPaint);
mCriclePaint.setColor(Color.parseColor("#88dddddd"));
mCriclePaint.setAlpha(255);
//實例化文字畫筆
mTextPaint = new Paint();
mTextPaint.setAntiAlias(true);
}
LinearGradient linearGradient;
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//去除鋸齒
canvas.setDrawFilter(mDrawFilter);
runWave();
int canvasWidth = canvas.getWidth();
int canvasHeight = canvas.getHeight();
int layerId = canvas.saveLayer(0, 0, canvasWidth, canvasHeight, null, Canvas.ALL_SAVE_FLAG);
// canvas.drawCircle(mTotalWidth / 2, mTotalHeight / 2, mTotalWidth / 2, mCriclePaint);
//設(shè)置顏色混合模式
// mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
//高減去寬除以2使水波紋底部在圓底部,動態(tài)改變percent值,在Y軸上變化
//畫進(jìn)度條
//aa3c3c3c
//aa724527
final int c = currentColor;
int colorSweep[] = {c,Color.TRANSPARENT};
//設(shè)置漸變色
linearGradient = new LinearGradient(0, mTotalHeight-percent*mTotalHeight/100-80,0,mTotalHeight, colorSweep, null, Shader.TileMode.MIRROR);
mPaint.setShader(linearGradient);
for (int i = 0; i < mTotalWidth; i++) {
canvas.drawLine(i, mTotalHeight - mDaymicPointY[i] - (mTotalHeight - mTotalWidth) / 2 - percent * mTotalWidth / 100, i, mTotalHeight - (mTotalHeight - mTotalWidth) / 2, mPaint);
}
// RoundLightBarView
//最后將畫筆去除Xfermode
// mPaint.setXfermode(null);
canvas.restoreToCount(layerId);
//改變兩條波紋的移動點
mXoffset += X_SPEED;
//如果已經(jīng)移動到末尾處,則到頭重新移動
if (mXoffset > mTotalWidth) {
mXoffset = 0;
}
String text = percent + " ";
mTextPaint.setColor(Color.WHITE);
mTextPaint.setTextSize(180);
float textLength = mTextPaint.measureText(text);
int textY = mTotalHeight - percent * mTotalHeight / 100;
if (textY < 180) {
textY = 180;
}
if (textY > mTotalHeight - 80) {
textY = mTotalHeight - 80;
}
canvas.drawText(text, (mTotalWidth - textLength) / 2, textY, mTextPaint);
mTextPaint.setTextSize(90);
String aText = percent < 10 ? " %" : percent < 100 ? " %" : " %";
//4 9 13
canvas.drawText(aText, (mTotalWidth - textLength) / 2, textY, mTextPaint);
// LogUtils.d("totalWdith:"+mTotalWidth+"---totalH:"+mTotalHeight);
//引起view重繪
postInvalidateDelayed(300);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mTotalHeight = h;
mTotalWidth = w;
//數(shù)組的長度為view的寬度
mPointY = new float[w];
mDaymicPointY = new float[w];
//這里我們以view的總寬度為周期,y = a * sin(2π) + b
for (int i = 0; i < mTotalWidth; i++) {
mPointY[i] = (float) (20 * (Math.sin(2 * Math.PI * i / w)));
}
}
private void runWave() {
// 超出屏幕的挪到前面,mXoffset表示第一條水波紋要移動的距離
int yIntelrval = mPointY.length - mXoffset;
//使用System.arraycopy方式重新填充第一條波紋的數(shù)據(jù)
System.arraycopy(mPointY, 0, mDaymicPointY, mXoffset, yIntelrval);
System.arraycopy(mPointY, yIntelrval, mDaymicPointY, 0, mXoffset);
}
}
實現(xiàn)原理:
1、首先波浪的繪制是很多個豎直的線,并通過正弦坐標(biāo)轉(zhuǎn)換坐標(biāo)實現(xiàn)。
2、漸變色通過設(shè)置畫筆LinearGradient實現(xiàn)。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android學(xué)習(xí)之SharedPerference存儲詳解
這篇文章主要為大家詳細(xì)介紹了Android學(xué)習(xí)之SharedPerference存儲的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08
Android使用Handler實現(xiàn)定時器與倒計時器功能
Handler的最常見應(yīng)用場景之一便是通過Handler在子線程中間接更新UI。這篇文章主要介紹了Android使用Handler實現(xiàn)定時器與倒計時器功能,需要的朋友可以參考下2018-02-02
Android組件TabHost實現(xiàn)頁面中多個選項卡切換效果
這篇文章主要為大家詳細(xì)介紹了Android組件TabHost實現(xiàn)頁面中多個選項卡切換效果的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-05-05
Android編程實現(xiàn)為應(yīng)用添加菜單的方法
這篇文章主要介紹了Android編程實現(xiàn)為應(yīng)用添加菜單的方法,涉及Android菜單界面布局與功能實現(xiàn)的相關(guān)技巧,需要的朋友可以參考下2016-01-01
Android 出現(xiàn)問題Installation error: INSTALL_FAILED_CONFLICTING_P
這篇文章主要介紹了Android 出現(xiàn)問題Installation error: INSTALL_FAILED_CONFLICTING_PROVIDER解決辦法的相關(guān)資料,需要的朋友可以參考下2016-12-12
Android通話默認(rèn)打開揚(yáng)聲器的方法
這篇文章主要介紹了Android通話默認(rèn)打開揚(yáng)聲器的方法.小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
Android實現(xiàn)保存QQ賬號與密碼功能(文件存儲)
這篇文章主要介紹了Android保存QQ賬號與密碼,文件存儲是Android中最基本的一種數(shù)據(jù)存儲方式,它與Java中的文件存儲類似,都是通過I/O流形式把數(shù)據(jù)直接存儲到文件中,下面我們一起來看一下如何用Android實現(xiàn)文件存儲功能吧2022-04-04

