关闭

Android自定义View——实现水波纹效果类似剩余流量球

标签: android流量球水波纹贝塞尔曲线
15839人阅读 评论(18) 收藏 举报
分类:

最近突然手痒就想搞个贝塞尔曲线做个水波纹效果玩玩,终于功夫不负有心人最后实现了想要的效果,一起来看下吧:

效果图镇楼

这里写图片描述

一:先一步一步来分解一下实现的过程

  1. 需要绘制一个正弦曲线(sin)或者余弦曲线(cos)
  2. 通过水平平移曲线来的到像水波波动的效果
  3. 水平移动的同时还需要有水位上涨,也就是向上平移
  4. 裁剪画布为圆形,在圆形区域绘制曲线
  5. 通过上面4步就可以实现了

二:现在就来实现第一步,绘制一个sin曲线;这里画了一张图来帮助理解,在PhotoShop中我们绘制一个贝塞尔曲线可以清楚的看到它的控制点如图:

     

   绘制贝塞尔曲线我们必须要知道三个点:起点、控制点、终点;有了这三个点我们就可以绘制一段简单二阶贝塞尔曲线。从图中我们可以看出 起点 控制点p1 x1 这三个点绘制了一段曲线,也就是通过path.quadTo()函数添加一个曲线路径。
   假设我们需要绘制一个周期的sin曲线,那么我们就只需要知道起点、一个周期的宽度、振幅;就可以绘制一个sin曲线了。

三:下面就来看下代码的实际操作了,这里就直接省略掉一些画笔初始化的操作了可以点击这里查看源码

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    //获取view的宽度
    width = getViewSize(800, widthMeasureSpec);
    //获取view的高度
    height = getViewSize(400, heightMeasureSpec);
    //获取起点坐标
    startPoint = new Point(0, height / 2);
}

首先肯定是要获取到画布的大小才能确定好起点的坐标,有了起点坐标就可以开始绘制我们的曲线了

在ondraw()函数中进行曲线的绘制

/*sin曲线 1/4个周期的宽度*/
private int cycle = 200;
/*sin曲线振幅的高度*/
private int waveHeight = 200;

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    path.moveTo(startPoint.x, startPoint.y);
    int j = 1;
    //循环绘制正弦曲线 循环一次半个周期
    for (int i = 1; i <= 8; i++) {
        if (i % 2 == 0) {
        //波峰
            path.quadTo(startPoint.x + (cycle * j), startPoint.y + waveHeight,
                    startPoint.x + (cycle * 2) * i, startPoint.y);
        } else {
        //波谷
            path.quadTo(startPoint.x + (cycle * j), startPoint.y - waveHeight,
                    startPoint.x + (cycle * 2) * i, startPoint.y);
        }
        j += 2;
    }
    //绘制封闭的曲线
    path.lineTo(width, height);//右下角
    path.lineTo(startPoint.x, height);//左下角
    path.lineTo(startPoint.x, startPoint.y);//起点
    path.close();
    canvas.drawPath(path, paint);
}

经过上面一系例操作一个水波纹效果就出来啦

四:接下来就是水平移动这个曲线了为了移动起来更加好看,我们需要在屏幕外面开始绘制一个周期,如下:

//初始化的时候将起点移至屏幕外一个周期
startPoint = new Point(-cycle * 4, height / 2);

//继续在ondraw()函数最后追加平移代码

//判断是不是平移完了一个周期
if (startPoint.x + 40 >= 0) {
    //满了一个周期则恢复默认起点继续平移
    startPoint.x = -cycle * 4;
}
//每次波形的平移量 40
startPoint.x += 40;
postInvalidateDelayed(150);
path.reset();

只需要这样就可以产生水波效果了,一起来看效果图吧。

五:接下来就是要将画布变成圆形了(其实还是个矩形,只是绘画区域在你所裁剪的区域),然后在里面实现水波纹就哦的K了;完整的绘制代码如下:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //裁剪画布为圆形
    Path circlePath = new Path();
    circlePath.addCircle(width / 2, height / 2, width / 2, Path.Direction.CW);
    canvas.clipPath(circlePath);
    canvas.drawPaint(circlePaint);
    canvas.drawCircle(width / 2, height / 2, width / 2, circlePaint);
    //以下操作都是在这个圆形画布中操作
    //根据进度改变起点坐标的y值
    startPoint.y = (int) (height - (progress / 100.0 * height));
    //起点
    path.moveTo(startPoint.x, startPoint.y);
    int j = 1;
    //循环绘制正弦曲线 循环一次半个周期
    for (int i = 1; i <= 8; i++) {
        if (i % 2 == 0) {
            path.quadTo(startPoint.x + (cycle * j), startPoint.y + waveHeight,
                    startPoint.x + (cycle * 2) * i, startPoint.y);
        } else {
            path.quadTo(startPoint.x + (cycle * j), startPoint.y - waveHeight,
                    startPoint.x + (cycle * 2) * i, startPoint.y);
        }
        j += 2;
    }
    //绘制封闭的曲线
    path.lineTo(width, height);//右下角
    path.lineTo(startPoint.x, height);//左下角
    path.lineTo(startPoint.x, startPoint.y);//起点
    path.close();
    canvas.drawPath(path, paint);
    drawText(canvas, textPaint, progress + "%");
    //判断是不是平移完了一个周期
    if (startPoint.x + 40 >= 0) {
        //满了一个周期则恢复默认起点继续平移
        startPoint.x = -cycle * 4;
    }
    //每次波形的平移量 40
    startPoint.x += 40;
    if (autoIncrement) {
        if (progress >= 100) {
            progress = 0;
        } else {
            progress++;
        }
    }
    postInvalidateDelayed(150);
    path.reset();
}

Demo下载

哆啦A梦源码传送门

17
4
查看评论

自定义view实现水波纹效果

今天看到一篇自定view 实现水波纹效果 觉得真心不错 学习之后再次写下笔记和心得.但是感觉原作者写得有些晦涩难懂,也许是本人愚笨 所以重写此作者教程.原作者博文大家可以去看下,感觉他在自定义view方面非常厉害,本文是基于此作者原文重新改写,拥有大量像相似部分 先看下效果吧: 1. 效果1: ...
  • qfanmingyiq
  • qfanmingyiq
  • 2016-11-04 21:43
  • 3386

自定义view实现水波纹效果

在实际的开发中,很多时候还会遇到相对比较复杂的需求,比如产品妹纸或UI妹纸在哪看了个让人兴奋的效果,兴致高昂的来找你,看了之后目的很明确,当然就是希望你能给她; 在这样的关键时候,身子板就一定得硬了,可千万别说不行,爷们儿怎么能说不行呢; 好了,为了让大家都能给妹纸们想要的,后面会逐渐分享一些比...
  • tianjian4592
  • tianjian4592
  • 2015-03-12 17:52
  • 26051

Android自定义View——贝塞尔曲线实现水波纹效果

  • 2016-11-09 13:19
  • 4KB
  • 下载

Android自定义控件之自定义View(三)——自定义水波纹

转载请注明出处:http://blog.csdn.net/xiaohao0724/article/details/54572605 上一篇我们实现了点击屏幕以点击的这个点为圆心画圆并放大,现在我们对上篇进一步加深自定义水波纹效果。 效果图如下: 1、定义一个自定义View和水波纹类,并在构造...
  • xiaohao0724
  • xiaohao0724
  • 2017-01-16 11:32
  • 185

Android自定义View——贝塞尔曲线实现水波纹效果

Android自定义View——贝塞尔曲线实现水波纹效果 本篇文章包含以下内容: 简单介绍 原理分析 实现步骤 简单介绍效果图展示贝塞尔曲线该View涉及到Path类的运用,如果对Path类不熟悉的,可以看http://blog.sina.com.cn/s/blog...
  • qq_30379689
  • qq_30379689
  • 2016-11-09 13:24
  • 6510

自定义view实现水波纹效果

自定义view实现水波纹效果 参考csdn大神 启舰的博客http://blog.csdn.net/harvic880925/article/details/50995587,自己实现了一遍,碰到的坑有2个: 1、记得调用mPath.reset(),否则每次的path内容会叠加在一起,就会...
  • HelloMagina
  • HelloMagina
  • 2017-09-11 22:09
  • 126

Android特效专辑(十一)——仿水波纹流量球进度条控制器,实现高端大气的主流特效

标签: android流量特效 2016-02-18 21:05 2643人阅读 评论(1) 收藏 举报  分类: Android(110)  版权声明:本文为博主原创文章,博客地址:http:...
  • u010854167
  • u010854167
  • 2016-12-08 17:05
  • 501

Android特效专辑(十一)——仿水波纹流量球进度条控制器,实现高端大气的主流特效

Android特效专辑(十一)——仿水波纹流球进度条控制器,实现高端大气的主流特效 今天看到一个效果挺不错的,就模仿了下来,加上了一些自己想要的效果,感觉还不错的样子,所以就分享出来了,话不多说,上图 截图CircleView 这里主要是实现中心圆以及水波特效 package com.lgl...
  • qq_26787115
  • qq_26787115
  • 2016-02-18 21:05
  • 4868

android 网络流量监控源码

  • 2013-06-29 16:25
  • 672KB
  • 下载

Android 百分比、水波、流量剩余进度球的实现

因为项目中有遇到进度的一个需求,目前类似的在实现网络进度加载和流量用量上比较多,所有今天就把代码贴出来,希望有需要的朋友能够有用到。 1.首先是主页面 package com.zhanglu.percentageball; import android.app.Activity; import...
  • meburningg
  • meburningg
  • 2016-06-01 11:15
  • 2334
    个人资料
    • 访问:204634次
    • 积分:3420
    • 等级:
    • 排名:第11612名
    • 原创:98篇
    • 转载:1篇
    • 译文:0篇
    • 评论:289条
    微信扫一扫
    友情链接
    博客专栏
    最新评论