自己免费做网站的流程,竞价交易规则,网站和网页,金融网站开发目的本文主要介绍的是一个球形水波的百分比控件#xff0c;市面上有各种形形色色的百分比控件#xff0c;我一直觉得水波是最炫的#xff0c;UI给了我这个机会#xff0c;然而网上搜了一大堆#xff0c;不是太复杂#xff0c;代码太多(反正我是调不出效果来)#xff0c;就是…本文主要介绍的是一个球形水波的百分比控件市面上有各种形形色色的百分比控件我一直觉得水波是最炫的UI给了我这个机会然而网上搜了一大堆不是太复杂代码太多(反正我是调不出效果来)就是有瑕疵的所以只好自己写了这里开源出来方便大家。有什么问题或者建议大家留言指出。先看效果这里动态图不好截取就贴张静态的对于水波百分比控件实现方法有如下几种- 画好水波形状的bitmap利用属性动画进行平移- 利用曲线精确绘制目标水波- 利用大范围曲线与容器做交集第一种比较烦网上有这种思路实现的代码量比较庞大。bitmap移动时要注意的问题很多一不小心就bug一堆了。第二种代码量小但需要几何功底。很丢脸的说我算了好久。才算出公式(年代久远都忘了)不过这种方法计算量大绘制时遍历的点少。第三种方法代码量极少计算量几乎没有遍历的点是第二种方法的两倍以上。考虑到遍历的消耗和计算的复杂度选择第三种。这里我们选择正弦曲线和圆做交集。for (int i left; i length; i) {int x i;int y (int) (Math.sin(Math.toRadians(x mTranX) / 2) * mRadius / 4);path2.lineTo(x, mH y);}sin函数x横坐标y纵坐标mTranX每次偏移量 波形起伏mRadius / 4核心代码利用圆的path与我们之前绘制的曲线做交集Path pc new Path();pc.addCircle(mCentrePoint.x, mCentrePoint.y, mRadius, Path.Direction.CCW);canvas.clipPath(pc, Region.Op.INTERSECT);canvas.drawPath(path2, mWavePaint);canvas.restore();水位上升和水波起伏while (isDraw) {if (mWaterLevel mNowHeight) {mNowHeight mNowHeight mUpSpeed;}if (mStart) {if (mTranX mRadius) {mTranX 0;}mTranX mTranX - mWaveSpeed;}drawUI();}这里由于动画效果比较细腻更新UI界面比较平凡所以我们采用surfaceView来实现(用view实现发现有卡顿影响体验)完整代码就一个waveview类直接布局中引用注释写的应该算比较清楚了。有什么疑问的可以留言package com.aibaide.test;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.graphics.PixelFormat;import android.graphics.Point;import android.graphics.Region;import android.util.AttributeSet;import android.view.SurfaceHolder;import android.view.SurfaceView;/*** gengqiquan* 2016年6月2日16:16:48* 水波显示百分比控件*/public class WaveView extends SurfaceView implements SurfaceHolder.Callback {Point mCentrePoint;int mNowHeight 0;//当前水位int mRadius 0;boolean mStart false;//是否开始float mTextSise 60;//文字大小Context mContext;int mTranX 0;//水波平移量private Paint mCirclePaint;private Paint mOutCirclePaint;private Paint mWavePaint;private Paint mTextPaint;private SurfaceHolder holder;private RenderThread renderThread;private boolean isDraw false;// 控制绘制的开关private int mCircleColor Color.parseColor(#ff6600);//背景内圆颜色private int mOutCircleColor Color.parseColor(#f5e6dc);//背景外圆颜色private int mWaveColor Color.parseColor(#ff944d);//水波颜色private int mWaterLevel;// 水目标高度private int flowNum 60;//水目标占百分比这里是整数。private int mWaveSpeed 5;//水波起伏速度private int mUpSpeed 2;//水面上升速度/*** param context*/public WaveView(Context context) {super(context);// TODO Auto-generated constructor stubmContext context;init(mContext);}/*** param context* param attrs*/public WaveView(Context context, AttributeSet attrs) {super(context, attrs);// TODO Auto-generated constructor stubmContext context;init(mContext);}/*** param context* param attrs* param defStyleAttr*/public WaveView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);// TODO Auto-generated constructor stubmContext context;init(mContext);}private void init(Context context) {mContext context;setZOrderOnTop(true);holder this.getHolder();holder.addCallback(this);holder.setFormat(PixelFormat.TRANSLUCENT);renderThread new RenderThread();mCirclePaint new Paint();mCirclePaint.setColor(mCircleColor);mCirclePaint.setStyle(Paint.Style.FILL);mCirclePaint.setAntiAlias(true);mOutCirclePaint new Paint();mOutCirclePaint.setColor(mOutCircleColor);mOutCirclePaint.setStyle(Paint.Style.FILL);mOutCirclePaint.setAntiAlias(true);mWavePaint new Paint();mWavePaint.setStrokeWidth(1.0F);mWavePaint.setColor(mWaveColor);mWavePaint.setStyle(Paint.Style.FILL);mWavePaint.setAntiAlias(true);mTextPaint new Paint();mTextPaint.setStrokeWidth(1.0F);mTextPaint.setColor(Color.WHITE);mTextPaint.setTextSize(mTextSise);mTextPaint.setTextAlign(Paint.Align.CENTER);mTextPaint.setStyle(Paint.Style.FILL);mTextPaint.setAntiAlias(true);}Overridepublic void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {mRadius (int) (0.5 * width * 0.92);mCentrePoint new Point(width / 2, height / 2);mWaterLevel (int) (2 * mRadius * flowNum / 100f);//算出目标水位高度}Overridepublic void surfaceCreated(SurfaceHolder holder) {isDraw true;if (renderThread ! null !renderThread.isAlive())renderThread.start();}Overridepublic void surfaceDestroyed(SurfaceHolder holder) {isDraw false;}/*** 绘制界面的线程** author Administrator*/private class RenderThread extends Thread {Overridepublic void run() {// 不停绘制界面这里是异步绘制不采用外部通知开启绘制的方式水波根据数据更新才会开始增长while (isDraw) {if (mWaterLevel mNowHeight) {mNowHeight mNowHeight mUpSpeed;}if (mStart) {if (mTranX mRadius) {mTranX 0;}mTranX mTranX - mWaveSpeed;}drawUI();}super.run();}}/*** 界面绘制*/public void drawUI() {Canvas canvas holder.lockCanvas();try {drawCanvas(canvas);} catch (Exception e) {e.printStackTrace();} finally {if (canvas ! null)holder.unlockCanvasAndPost(canvas);}}private void drawCanvas(Canvas canvas) {//画背景圆圈canvas.drawCircle(mCentrePoint.x, mCentrePoint.y, mRadius / 0.92f, mOutCirclePaint);canvas.drawCircle(mCentrePoint.x, mCentrePoint.y, mRadius, mCirclePaint);if (mStart) {//计算正弦曲线的路径int mH mCentrePoint.y mRadius - mNowHeight;int left - mRadius / 2;int length 4 * mRadius;Path path2 new Path();path2.moveTo(left, mH);for (int i left; i length; i) {int x i;int y (int) (Math.sin(Math.toRadians(x mTranX) / 2) * mRadius / 4);path2.lineTo(x, mH y);}path2.lineTo(length, mH);path2.lineTo(length, mCentrePoint.y mRadius);path2.lineTo(0, mCentrePoint.y mRadius);path2.lineTo(0, mH);canvas.save();//这里与圆形取交集除去正弦曲线多画的部分Path pc new Path();pc.addCircle(mCentrePoint.x, mCentrePoint.y, mRadius, Path.Direction.CCW);canvas.clipPath(pc, Region.Op.INTERSECT);canvas.drawPath(path2, mWavePaint);canvas.restore();//绘制文字canvas.drawText(flowNum %, mCentrePoint.x, mCentrePoint.y, mTextPaint);}}public void setFlowNum(int num) {flowNum num;mStart true;}public void setTextSise(float s) {mTextSise s;mTextPaint.setTextSize(s);}//设置水波起伏速度public void setWaveSpeed(int speed) {mWaveSpeed speed;}//设置水面上升速度public void setUpSpeed(int speed) {mUpSpeed speed;}public void setColor(int waveColor, int circleColor, int outcircleColor) {mWaveColor waveColor;mCircleColor circleColor;mOutCircleColor outcircleColor;mWavePaint.setColor(mWaveColor);mCirclePaint.setColor(mCircleColor);mOutCirclePaint.setColor(mOutCircleColor);}//精确算法每次正弦曲线从曲线与圆的交集处开始// private int getX(double h) {// int x 0;// int R mRadius;// if (h R) {// double t 2 * R * h - h * h;// x (int) (R - Math.abs(Math.sqrt(t)));// } else {// double t -2 * R * h h * h;// x (int) (R - Math.abs(Math.sqrt(t)));// }// return x;// }}最后奉上本文的源码源码下载以上就是本文的全部内容希望对大家的学习有所帮助也希望大家多多支持脚本之家。
