android自定义组件(手机加速球+水面波动效果)
通过上一篇的博客,相信你对Android中的坐标系和绘制刻度的实现原理有了一个认识(所以这一篇可能没有那么详细。。。),接下来就是另外一部分内容,如何去绘制水波加速球。
自定义View确定一个正方形
public class WaterView extends View { private int len; public WaterView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int width = MeasureSpec.getSize(widthMeasureSpec); int height = MeasureSpec.getSize(heightMeasureSpec); //以最小值为正方形的长 len = Math.min(width, height); //设置测量高度和宽度(必须要调用,不然无效果) setMeasuredDimension(len, len); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); }}
同样这里集成了View,并通过设置测量值,限定空间为正方形。
布局中使用:
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/ll_parent" android:orientation="vertical" android:background="@color/colorPrimary" android:padding="20dp" tools:context="com.example.huaweiview.MainActivity"> <com.example.huaweiview.WaterView android:layout_gravity="center" android:background="@color/colorAccent" android:layout_width="200dp" android:layout_height="300dp" />LinearLayout>
ok,我们设置的长度和宽度并不一样,但是他显示的是一个正方形,并且,根据上一篇博客的介绍,它是有自己的坐标系的,我们绘制的所有东西都在这个坐标系内,并且依靠它去确定位置。
回忆正余弦
大家通过查资料和联想心电图等可以知道,水波其实就是在绘制一条正弦或者余弦波,如果让这条波移动就是
这里我们使用正弦实现需要如下公式:
y = Asin(wx+b)+h ,这个公式里:w影响周期,A影响振幅,h影响y位置,b为初相;
画图就少不了要确定不同的点,通过这个公式,我们可以得到Y轴坐标点的值,那么X轴坐标点的值该如何得到呢?
通过观察图我们可以发现,这些点连起来就是一条曲线,也就是说每个点之间的距离是非常小的,是不是可以用,这些所有的点都在X轴上有值,刚好是i(i从0加到len的长度(View的长度也就是圆的直径))
比如图中的中间点的坐标(y=0,x=i=len/2)
当然Y值是通过公式得到的,既然有很多点,我们就需要用数组来保存这些点,水波效果最好是有两条效果会好些,所以需要个数组:
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int width = MeasureSpec.getSize(widthMeasureSpec); int height = MeasureSpec.getSize(heightMeasureSpec); //以最小值为正方形的长 len = Math.min(width, height); //定义两个数组,保存Y值 firstWaterLine = new float[len]; secondWaterLine = new float[len]; //设置测量高度和宽度(必须要调用,不然无效果) setMeasuredDimension(len, len); }
这里定义了两个全局数组,用来保存Y轴值,个数和View长度相等(直径相等)
然后就是利用公式获取每个点的Y轴坐标值
@Override protected void onDraw(Canvas canvas) { // y = Asin(wx+b)+h ,这个公式里:w影响周期,A影响振幅,h影响y位置,b为初相; // 将周期定为view总宽度 float mCycleFactorW = (float) (2 * Math.PI / len); // 得到第一条波的y值 for (int i = 0; i < len; i++) { firstWaterLine[i] = (float) (10 * Math .sin(mCycleFactorW * i)); } // 得到第二条波的y值(第二条波的初相偏左) for (int i = 0; i < len; i++) { secondWaterLine[i] = (float) (15 * Math.sin(mCycleFactorW * i + 10)); } }
在onDraw()方法中分别得到了两个数组中Y轴的值,并且将他一个周期的长度定位len(和直径相等)每个值都对应着一个X轴的值,也就是说我们得到两个正弦波上的所有点的坐标值了。并且第二天波偏左一点
而且还要增加一下他们的振幅,不然0-1之间的值太小,显示在屏幕上像一条直线。
上图是什么意思呢?我们的水波效果是下面有填充色的,那么这些填充色其实就是波上的每个点,往View的底边画的一条一条的直线(数学中的细分法或者微积分吧)然后线就组成了面。
ok,划线需要知道起点坐标,和终点坐标,如图中的两个绿色的坐标点。(i,y)到(i,len);接下来开始画直线
public WaterView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); waterPaint = new Paint(); //抗锯齿 waterPaint.setAntiAlias(true); waterPaint.setColor(Color.GREEN); } @Override protected void onDraw(Canvas canvas) { // y = Asin(wx+b)+h ,这个公式里:w影响周期,A影响振幅,h影响y位置,b为初相; // 将周期定为view总宽度 float mCycleFactorW = (float) (2 * Math.PI / len); // 得到第一条波的y值 for (int i = 0; i < len; i++) { firstWaterLine[i] = (float) (10 * Math .sin(mCycleFactorW * i)); } // 得到第二条波的y值 for (int i = 0; i < len; i++) { secondWaterLine[i] = (float) (15 * Math.sin(mCycleFactorW * i + 10)); } //第一条波的所有直线 for (int i = 0; i < len; i++) { canvas.drawLine(i, firstWaterLine[i], i, len, waterPaint); } //第二条波的所有直线 for (int i = 0; i < len; i++) { canvas.drawLine(i, secondWaterLine[i], i, len, waterPaint); } }
构造方法中实例化出了一个画笔对象,颜色为绿色,抗锯齿。在onDraw()方法中添加了两个画直线的方法,我们要对每个点都要绘制所以使用了循环。
哎呀,这不是咱们想看到的效果呀,这是因为坐标的原点依旧在View的左上角,振幅小,都往下方画直线就覆盖了整个View,接下来我们把坐标系往下放移动len/2的距离,再去绘制:
@Override protected void onDraw(Canvas canvas) { // y = Asin(wx+b)+h ,这个公式里:w影响周期,A影响振幅,h影响y位置,b为初相; // 将周期定为view总宽度 float mCycleFactorW = (float) (2 * Math.PI / len); // 得到第一条波的y值 for (int i = 0; i < len; i++) { firstWaterLine[i] = (float) (10 * Math .sin(mCycleFactorW * i)); } // 得到第二条波的y值 for (int i = 0; i < len; i++) { secondWaterLine[i] = (float) (15 * Math.sin(mCycleFactorW * i + 10)); } //保存原来的内容 canvas.save(); canvas.translate(0,len/2); //第一条波的所有直线 for (int i = 0; i < len; i++) { canvas.drawLine(i, firstWaterLine[i], i, len, waterPaint); } //第二条波的所有直线 for (int i = 0; i < len; i++) { canvas.drawLine(i, secondWaterLine[i], i, len, waterPaint); } //恢复到原来的状态(会自动结合绘制的内容) canvas.restore();; }
我们需要先保存画布的状态,再去移动坐标系,之后在恢复合并。
现在是我们想看到的样子了,但是还有一点,我们希望他是一个圆形的,这时候就需要另外一个功能,cavans的剪切功能
@Override protected void onDraw(Canvas canvas) { // y = Asin(wx+b)+h ,这个公式里:w影响周期,A影响振幅,h影响y位置,b为初相; // 将周期定为view总宽度 float mCycleFactorW = (float) (2 * Math.PI / len); // 得到第一条波的y值 for (int i = 0; i < len; i++) { firstWaterLine[i] = (float) (10 * Math .sin(mCycleFactorW * i)); } // 得到第二条波的y值 for (int i = 0; i < len; i++) { secondWaterLine[i] = (float) (15 * Math.sin(mCycleFactorW * i + 10)); } // 裁剪成圆形区域 Path path = new Path(); path.reset(); float clipRadius=len/2; //添加圆形路径 //Path.Direction.CCW逆时针 //Path.Direction.CW顺时针 path.addCircle(len / 2, len / 2, clipRadius, Path.Direction.CCW); // (剪裁路径)裁剪成圆形区域 //(REPLACE用当前要剪切的区域代替画布中的内容的区域) canvas.clipPath(path, android.graphics.Region.Op.REPLACE); canvas.save(); canvas.translate(0,len/2); //第一条波的所有直线 for (int i = 0; i < len; i++) { canvas.drawLine(i, firstWaterLine[i], i, len, waterPaint); } //第二条波的所有直线 for (int i = 0; i < len; i++) { canvas.drawLine(i, secondWaterLine[i], i, len, waterPaint); } canvas.restore();; }
在我们要移动画布之前,将View剪切成了圆形
点击了解
Region.Op
在布局中我去除了,控件的背景,效果如图所示,接下来就是去控制让他动起来了,水平方向移动也就是每次初相都不相同,开启时间任务,让它的初相值不断变化(从右往左移动就加上一个数)
@Override protected void onDraw(Canvas canvas) { // y = Asin(wx+b)+h ,这个公式里:w影响周期,A影响振幅,h影响y位置,b为初相; // 将周期定为view总宽度 float mCycleFactorW = (float) (2 * Math.PI / len); // 得到第一条波的y值 for (int i = 0; i < len; i++) { //添加一个可变的初相值 firstWaterLine[i] = (float) (10 * Math .sin(mCycleFactorW * i+move)); } // 得到第二条波的y值 for (int i = 0; i < len; i++) { //添加一个可变的初相值 secondWaterLine[i] = (float) (15 * Math.sin(mCycleFactorW * i + move+10)); } // 裁剪成圆形区域 Path path = new Path(); path.reset(); float clipRadius=len/2; //添加圆形路径 //Path.Direction.CCW逆时针 //Path.Direction.CW顺时针 path.addCircle(len / 2, len / 2, clipRadius, Path.Direction.CCW); // (剪裁路径)裁剪成圆形区域 //(REPLACE用当前要剪切的区域代替画布中的内容的区域) canvas.clipPath(path, android.graphics.Region.Op.REPLACE); canvas.save(); canvas.translate(0,len/2); //第一条波的所有直线 for (int i = 0; i < len; i++) { canvas.drawLine(i, firstWaterLine[i], i, len, waterPaint); } //第二条波的所有直线 for (int i = 0; i < len; i++) { canvas.drawLine(i, secondWaterLine[i], i, len, waterPaint); } canvas.restore();; }
在onDraw()的方法中,获取坐标Y值的时候,添加一条可变的全局变量,动态改变初相值。开启时间任务:
public void moveWaterLine() { final Timer timer = new Timer(); timer.schedule(new TimerTask() { @Override public void run() { //不断改变初相 move += 1; //重新绘制(子线程中调用) postInvalidate(); } }, 500, 200); }
在时间任务中,这里没用去关闭时间任务,它会一直动,,动态去改变,并在构造方法中去调用
效果已经很不错了,如何让它去增加和减少呢,让它从下往上增加,只要不断去影响Y的值就好了,
如果坐标系不改变,绘制水波的时候还要判断是增加还是减少,为了方便计算,只需要将坐标系移动到底部就好了,为0的时候代表什么都没用,有的时候让Y值不断的减去一个值就实现了网上增加。
@Override protected void onDraw(Canvas canvas) { // y = Asin(wx+b)+h ,这个公式里:w影响周期,A影响振幅,h影响y位置,b为初相; // 将周期定为view总宽度 float mCycleFactorW = (float) (2 * Math.PI / len); // 得到第一条波的y值 for (int i = 0; i < len; i++) { //添加一个可变的初相值 firstWaterLine[i] = (float) (10 * Math .sin(mCycleFactorW * i + move) - up); } // 得到第二条波的y值 for (int i = 0; i < len; i++) { //添加一个可变的初相值 secondWaterLine[i] = (float) (15 * Math.sin(mCycleFactorW * i + move + 10) - up); } // 裁剪成圆形区域 Path path = new Path(); path.reset(); float clipRadius = len / 2; //添加圆形路径 //Path.Direction.CCW逆时针 //Path.Direction.CW顺时针 path.addCircle(len / 2, len / 2, clipRadius, Path.Direction.CCW); // (剪裁路径)裁剪成圆形区域 //(REPLACE用当前要剪切的区域代替画布中的内容的区域) canvas.clipPath(path, android.graphics.Region.Op.REPLACE); canvas.save(); canvas.translate(0, len); //第一条波的所有直线 for (int i = 0; i < len; i++) { canvas.drawLine(i, firstWaterLine[i], i, len, waterPaint); } //第二条波的所有直线 for (int i = 0; i < len; i++) { canvas.drawLine(i, secondWaterLine[i], i, len, waterPaint); } canvas.restore(); ; }
在onDraw()方法中将坐标系移动到底部,并且声明一个全局变量up来动态改变Y值,因为是从下往上运动,所以是减去,开启时间任务:
//如果在运行,就不会执行下次动画 private boolean isRunning; //判断是上升还是下降 public int state = 1; public void change(final int trueAngle) { if (isRunning) { return; } final Timer timer = new Timer(); timer.schedule(new TimerTask() { @Override public void run() { switch (state) { case 1: isRunning = true; up -= 10; if (up <= 0) { up = 0; state = 2; } break; case 2: up += 10; if (up >= trueAngle) { up = trueAngle; state = 1; isRunning = false; timer.cancel(); } break; default: break; } postInvalidate(); } }, 500, 30); }
声明一个boolean值来判断是否在运动,如果在动,就不进行下次运动,声明一个state变量来判断是上还是下
up值动态增加或减小,再重复绘制
activity调用
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final WaterView wv= (WaterView) findViewById(R.id.wv); wv.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { wv.change(200); } }); }}
设置点击事件,调用动的方法
终于大功告成了
目已经上传到github
github点击下载
最后的最后,个人淘宝店(抱歉,请见谅)。。霓裳雅阁
有喜欢的商品可以和我说下哦,,QQ:1070379530
谢谢
更多相关文章
- 安卓(android)统计图表の曲线图,折线图
- Android(安卓)OpenCV(四):绘制几何图形
- android 蓝牙发送数据
- Android入门——利用Canvas完成绘制点、圆、直线、路径、椭圆、
- 解析后台进程对Android性能影响的详解
- 微信Android客户端架构演进及其对开发流程的影响
- 云时代下,设备的移动性到底对企业有什么影响?
- Android(安卓)onTouchEvent 返回值不同时对事件的传递的影响
- 谷歌发布Android(安卓)auto车载系统对当前车载市场的影响