Android——實現漸變色水波紋效果原始碼
專案中使用到的效果,效果圖如下:
程式碼實現:
實現原理:public class WaveView extends View { private Paint mPaint, mCriclePaint, mTextPaint; // 傾斜或旋轉、快速變化,當在螢幕上畫一條直線時, 橫豎不會出現鋸齒, // 但是當斜著畫時, 就會出現鋸齒的效果,所以需要設定抗鋸齒 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() { //圖片線條(通用)的抗鋸齒需要另外設定 mDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG); //例項化一個畫筆 mPaint = new Paint(); //去除畫筆鋸齒 mPaint.setAntiAlias(true); //設定畫筆風格為實線 mPaint.setStyle(Paint.Style.FILL); //設定畫筆顏色 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); //設定顏色混合模式 // mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); //高減去寬除以2使水波紋底部在圓底部,動態改變percent值,在Y軸上變化 //畫進度條 //aa3c3c3c //aa724527 final int c = currentColor; int colorSweep[] = {c,Color.TRANSPARENT}; //設定漸變色 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; //如果已經移動到末尾處,則到頭重新移動 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; //陣列的長度為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方式重新填充第一條波紋的資料 System.arraycopy(mPointY, 0, mDaymicPointY, mXoffset, yIntelrval); System.arraycopy(mPointY, yIntelrval, mDaymicPointY, 0, mXoffset); } }
1、首先波浪的繪製是很多個豎直的線,並通過正弦座標轉換座標實現。
2、漸變色通過設定畫筆LinearGradient實現。
相關推薦
Android——實現漸變色水波紋效果原始碼
專案中使用到的效果,效果圖如下: 程式碼實現: public class WaveView extends View { private Paint mPaint, mCriclePaint, mTextPaint; // 傾斜或旋轉、快速變化,當在螢幕上
Android點選Button水波紋效果
先上圖,看看接下來我要向大家介紹的是個什麼東西,如下圖: 接下來要介紹的就是如何實現上述圖中的波紋效果,這種效果如果大家沒有體驗過的話,可以看看百度手機衛士或者360手機衛士,裡面的按鈕點選效果都是這樣的,另外Android 5.0以上的版本也出現了這種效
android實現炫酷水波紋介面
利用正弦函式 1、這篇是兩條水波紋,樣子類似點融(理財),波浪上面還漂浮一個圖示,超炫酷 2、多條水波紋聯動效果(容易出現問題) 1)有種向右漂移的感覺 2)動著動著就重合了(大姨媽app) 利用2階貝塞爾曲線 1、android 繪製波浪線 2、 Android 貝
Android自定義View——實現水波紋效果類似剩余流量球
string 三個點 pre ber block span 初始化 move 理解 最近突然手癢就想搞個貝塞爾曲線做個水波紋效果玩玩,終於功夫不負有心人最後實現了想要的效果,一起來看下吧: 效果圖鎮樓 一:先一步一步來分解一下實現的過程 需要繪制一個正弦曲線(sin
android 水波紋效果實現
drawable color utf true odi lec .com enc orm 1.在drawable文件下,新建seletor,作為button的背景,這裏我用的是兩個圓角的shape <?xml version="1.0" encoding="utf-
Android 實現所有View的點選水波紋效果
點選水波紋效果,是安卓5.0以上的一個新特技。 一開始,我只會在普通的Button上新增這個效果。 利用新建主題的方法: <style name="MyButton" parent="Theme.AppCompat.Light"> <item n
Android 實現水波紋效果
一、首先還是先上效果 二、實現原理 自定義view,使用Path和貝塞爾曲線繪製,然後不斷重新整理,並且改變X、Y的值 主要知識點rQuadTo的使用 三、實現 WaveView.java public class WaveView extends V
Android 水波紋效果實現並且適配API21以下
前言 水波紋的點選效果還是很不錯的,使用起來也很簡單,但是在API21,Android5.0以下使用水波紋效果會直接崩潰,所以我們得考慮到適配 1、在res裡建立drawable-v21資料夾,在該資料夾下建立一個xml檔案 <!-- color_106是一個淺灰色的
Android中按鈕的水波紋點選效果的實現
關於按鈕水波紋的點選效果,這個是我在http://blog.csdn.net/singwhatiwanna/article/details/42614953這篇文章讀到的。寫得真心不錯,我只是站在巨人的肩上而已。 我加了一些註釋,以至於我們更好的理解這篇不錯的文章 下面是主
Android 自定義view實現水波紋效果
今天主要分享水波紋效果:1.標準正餘弦水波紋;2.非標準圓形液柱水波紋;雖說都是水波紋,但兩者在實現上差異是比較大的,一個通過正餘弦函式模擬水波紋效果,另外一個會運用到影象的混合模式(PorterDuffXfermode);先看效果:
android 實現水波紋效果(二) 優化篇
在我的上一篇文章中,初步介紹了一下水波紋的實現,確實也實現了,剛開始我表示很滿意啊,但是後來看了一下系統的實現效果,我開始發現有點不對勁;來對比一下: 這是優化前的效果 這是優化後的效果 區別看不出來?仔細看一下,系統的實現效果是
Android自定義View實現水波紋效果
本篇博文介紹一個Android自定義View的案例,後續博文會接下自定義View的相關流程和繪製原理。通過自定義控制元件實現。觸控式螢幕幕實現水波紋效果。實現步驟第1步.自定義MyWave繼承Viewpublic class MyWave extends View {}第2步
Android自定義View——實現水波紋效果類似剩餘流量球
最近突然手癢就想搞個貝塞爾曲線做個水波紋效果玩玩,終於功夫不負有心人最後實現了想要的效果,一起來看下吧: 效果圖鎮樓 一:先一步一步來分解一下實現的過程 需要繪製一個正弦曲線(sin)或者餘弦曲線(cos) 通過水平平移曲線來的到像水
Android 水波紋效果
今天翻看部落格,發現了水波紋效果。順便研究了一下 一,Touch Feedback(觸控反饋) 1,原始自帶效果 程式碼: <Button android:layout_width="wrap_content" an
ripple實現點選時的水波紋效果
前言 在看網易雲音樂播放器的時候,覺得它在選擇音樂時候的波紋效果很好看,就想要模仿這種效果。然後在網上找了一下這方面的文章,最後被我發現了ripple,用ripple就能很好地實現這種波紋效果。所以用這篇文章記錄下ripple的實現,如果發現我的程式碼有問題,
自定義view,貝塞爾曲線實現水波紋效果的動畫
作為一名碼農,除了用基本的姿勢去搬磚,還應該get一些炫酷的技能,用高逼格的姿態去搬磚。而貝塞爾曲線無疑是炫酷技能之一。 簡介: Bézier curve(貝塞爾曲線)是應用於二維圖形應用程式的數學曲線。 曲線定義:起始點、終止點(也稱錨點)、控制點。通過調整控
自定義view實現水波紋效果
自定義view實現水波紋效果 參考csdn大神 啟艦的部落格http://blog.csdn.net/harvic880925/article/details/50995587,自己實現了一遍,碰到的坑有2個: 1、記得呼叫mPath.reset(),否則每次的path內容會疊
iOS開發:類似水波紋效果以及最外部圓環的實現
最近新開發的一個專案裡面需要用到水波紋效果,類似從中心往四周擴散那種,其實這種效果很常見,就是根據動畫來實現的,具體需求效果如下: 一、工具類的實現 首先建立一個基於UIView的工具類,然後在這個工具類裡面實現動畫效果,具體程式碼如下
自定義view(三) 貝塞爾曲線 水波紋效果實現
目錄 前言 api分析 水波紋效果 前言 在上面的部落格中說了path的繪製,path繪製, 介紹了除了貝塞爾曲線的其他情況。 在這裡單獨介紹一下貝塞爾曲線。貝塞爾曲線是應用於二維圖形應用程式的數學曲線。一般的向量圖形軟體通過它來精確畫出曲線,
Android 中Layout實現點選水波紋特效
Android5.0以後TextView,Button、TabLayout等控制元件預設都有點選水波紋效果,那佈局類LinearLayout、RelativeLayout、TableLayout、FrameLayout、AbsoluteLayou如何實現 A: