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

代碼實(shí)現(xiàn):
public class WaveView extends View {
private Paint mPaint, mCriclePaint, mTextPaint;
// 傾斜或旋轉(zhuǎn)、快速變化,當(dāng)在屏幕上畫一條直線時(shí), 橫豎不會(huì)出現(xiàn)鋸齒,
// 但是當(dāng)斜著畫時(shí), 就會(huì)出現(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;
//波浪線移動(dòng)速度
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);
//實(shí)例化一個(gè)畫筆
mPaint = new Paint();
//去除畫筆鋸齒
mPaint.setAntiAlias(true);
//設(shè)置畫筆風(fēng)格為實(shí)線
mPaint.setStyle(Paint.Style.FILL);
//設(shè)置畫筆顏色
mPaint.setColor(Color.GREEN);
//實(shí)例化圓的畫筆
mCriclePaint = new Paint(mPaint);
mCriclePaint.setColor(Color.parseColor("#88dddddd"));
mCriclePaint.setAlpha(255);
//實(shí)例化文字畫筆
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使水波紋底部在圓底部,動(dòng)態(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);
//改變兩條波紋的移動(dòng)點(diǎn)
mXoffset += X_SPEED;
//如果已經(jīng)移動(dòng)到末尾處,則到頭重新移動(dò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ù)組的長(zhǎng)度為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表示第一條水波紋要移動(dòng)的距離
int yIntelrval = mPointY.length - mXoffset;
//使用System.arraycopy方式重新填充第一條波紋的數(shù)據(jù)
System.arraycopy(mPointY, 0, mDaymicPointY, mXoffset, yIntelrval);
System.arraycopy(mPointY, yIntelrval, mDaymicPointY, 0, mXoffset);
}
}
實(shí)現(xiàn)原理:
1、首先波浪的繪制是很多個(gè)豎直的線,并通過正弦坐標(biāo)轉(zhuǎn)換坐標(biāo)實(shí)現(xiàn)。
2、漸變色通過設(shè)置畫筆LinearGradient實(shí)現(xiàn)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android實(shí)現(xiàn)水波紋效果實(shí)例代碼
- Android如何自定義View實(shí)現(xiàn)橫向的雙水波紋進(jìn)度條
- Android 通過自定義view實(shí)現(xiàn)水波紋效果案例詳解
- Android 自定義球型水波紋帶圓弧進(jìn)度效果(實(shí)例代碼)
- Android實(shí)現(xiàn)水波紋擴(kuò)散效果
- Android實(shí)現(xiàn)水波紋特效
- android實(shí)現(xiàn)簡(jiǎn)單底部導(dǎo)航欄
- Android實(shí)現(xiàn)底部導(dǎo)航欄效果
- Android自定義水波紋底部導(dǎo)航的實(shí)現(xiàn)
相關(guān)文章
Android框架Volley使用之Json請(qǐng)求實(shí)現(xiàn)
這篇文章主要介紹了Android框架Volley使用之Json請(qǐng)求實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
Android Moveview滑屏移動(dòng)視圖類完整實(shí)例
這篇文章主要介紹了Android Moveview滑屏移動(dòng)視圖類,很有實(shí)用價(jià)值,需要的朋友可以參考下2014-07-07
Android 桌面圖標(biāo)右上角顯示未讀消息數(shù)字
本文主要介紹了Android 桌面圖標(biāo)右上角顯示未讀消息數(shù)字的方法。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
Android 高仿微信轉(zhuǎn)賬金錢輸入框規(guī)則
這篇文章主要介紹了Android 高仿微信金錢輸入框規(guī)則的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12
Android 日常開發(fā)總結(jié)的60條技術(shù)經(jīng)驗(yàn)
這篇文章主要介紹了Android日常開發(fā)總結(jié)的技術(shù)經(jīng)驗(yàn)60條,需要的朋友可以參考下2016-03-03
詳解Android平臺(tái)上讀寫NFC標(biāo)簽
NFC,即Near Field Communication,近距離無線通訊技術(shù),是一種短距離的(通常<=4cm或更短)高頻(13.56M Hz)無線通信技術(shù),可以讓消費(fèi)者簡(jiǎn)單直觀地交換信息、訪問內(nèi)容與服務(wù)。2017-01-01
react native android6+拍照閃退或重啟的解決方案
android 6+權(quán)限使用的時(shí)候需要?jiǎng)討B(tài)申請(qǐng),那么在使用rn的時(shí)候要怎么處理拍照權(quán)限問題呢?本文提供的是一攬子rn操作相冊(cè)、拍照的解決方案,需要的朋友可以參考下2017-11-11
android自定義等級(jí)評(píng)分圓形進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了android自定義等級(jí)評(píng)分圓形進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07

