Shulou(Shulou.com)06/02 Report--

This article mainly introduces Android how to achieve gradient water ripple effect, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

The effects used in the project are shown below:

Code implementation: public class WaveView extends View {private Paint mPaint, mCriclePaint, mTextPaint; / / tilt or rotate, change quickly. When drawing a straight line on the screen, there will be no aliasing horizontally and vertically, / / but aliasing will occur when drawing diagonally, so you need to set anti-aliasing 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; / / wavy line moving speed 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 () {/ / Anti-aliasing of picture lines (generic) requires additional setting mDrawFilter = new PaintFlagsDrawFilter (0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG); / / instantiate a brush mPaint = new Paint () / / Anti-aliasing mPaint.setAntiAlias (true); / / set brush style to solid line mPaint.setStyle (Paint.Style.FILL); / / set brush color mPaint.setColor (Color.GREEN); / / instance round brush mCriclePaint = new Paint (mPaint); mCriclePaint.setColor (Color.parseColor ("# 88dddddd")) MCriclePaint.setAlpha; / / instantiate the text brush mTextPaint = new Paint (); mTextPaint.setAntiAlias (true);} LinearGradient linearGradient; @ Override protected void onDraw (Canvas canvas) {super.onDraw (canvas); / / Anti-aliasing 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); / / set color blending mode / / mPaint.setXfermode (new PorterDuffXfermode (PorterDuff.Mode.SRC_IN)) / / High minus width divided by 2 to make the bottom of the water ripple at the bottom of the circle, dynamically change the threshold value, change the progress bar / / aa3c3c3c / / aa724527 final int c = currentColor; int colorSweep [] on the Y axis; / / set gradient linearGradient = new LinearGradient (0mTotalHeight-percent*mTotalHeight/100-80mTotalHeight, 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); / / cause view to redraw postInvalidateDelayed (300);} @ Override protected void onSizeChanged (int w, int h, int oldw, int oldh) {super.onSizeChanged (w, h, oldw, oldh); mTotalHeight = h MTotalWidth = w; / the length of the array is the width of view mPointY = new float [w]; mDaymicPointY = new float [w]; / / here we take the total width of view as the period, y = a * sin (2 π) + b for (int I = 0; I < mTotalWidth) MXoffset +) {mPointY [I] = (float) (20 * (Math.sin (2 * Math.PI * I / w);}} private void runWave () {/ / move beyond the screen to the front, and mXoffset indicates the distance to be moved by the first ripple int yIntelrval = mPointY.length-mXoffset / / re-populate the first ripple data System.arraycopy (mPointY, 0, mDaymicPointY, mXoffset, yIntelrval) using System.arraycopy method; System.arraycopy (mPointY, yIntelrval, mDaymicPointY, 0, mXoffset);} implementation principle:

The main contents are as follows: 1. first of all, the wave is drawn by many vertical lines, which is realized by sinusoidal coordinate transformation.

2. The gradient is realized by setting the brush LinearGradient.

Thank you for reading this article carefully. I hope the article "how to achieve the ripple effect of Android" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.