android 贝塞尔曲线 波浪线,Android 贝塞尔曲线实现水纹波动效果
贝塞尔曲线简介
千篇一律,很多类似的文章都会介绍一下什么是贝塞尔曲线,但是这里就不做介绍了,我们在这里只需要知道在Android API为我们提供了绘制二阶贝塞尔曲线和三阶贝塞尔曲线的方法即可。
效果图
本文,最终实现效果如图所示:
从图中我们可以看出,水纹不断波动并且上涨,当上涨超过屏幕时,自动最初高度波动,接下来,我们就来看如何实现这一效果。
实现过程
所需要知道的
Android API为我们提供了绘制二阶贝塞尔曲线和三阶贝塞尔曲线的方法
绘制二阶贝塞尔曲线的方法是:
/**
* Same as quadTo, but the coordinates are considered relative to the last
* point on this contour. If there is no previous point, then a moveTo(0,0)
* is inserted automatically.
*
* @param dx1 The amount to add to the x-coordinate of the last point on
* this contour, for the control point of a quadratic curve
* @param dy1 The amount to add to the y-coordinate of the last point on
* this contour, for the control point of a quadratic curve
* @param dx2 The amount to add to the x-coordinate of the last point on
* this contour, for the end point of a quadratic curve
* @param dy2 The amount to add to the y-coordinate of the last point on
* this contour, for the end point of a quadratic curve
*/
public void rQuadTo(float dx1, float dy1, float dx2, float dy2) {
isSimplePath = false;
nRQuadTo(mNativePath, dx1, dy1, dx2, dy2);
}
从源码注释中我们可以看出rQuadTo传递的参数分别是第一个点与第二个点距离上一个点的相对X坐标,相对Y坐标
quadTo方法传递的是绝对坐标(如下所示)
/**
* Add a quadratic bezier from the last point, approaching control point
* (x1,y1), and ending at (x2,y2). If no moveTo() call has been made for
* this contour, the first point is automatically set to (0,0).
*
* @param x1 The x-coordinate of the control point on a quadratic curve
* @param y1 The y-coordinate of the control point on a quadratic curve
* @param x2 The x-coordinate of the end point on a quadratic curve
* @param y2 The y-coordinate of the end point on a quadratic curve
*/
public void quadTo(float x1, float y1, float x2, float y2) {
isSimplePath = false;
nQuadTo(mNativePath, x1, y1, x2, y2);
}
三阶贝塞尔曲线与二阶类似分别是:
cubicTo(float x1, float y1, float x2, float y2,
float x3, float y3)
与
rCubicTo(float x1, float y1, float x2, float y2,
float x3, float y3)
新建WaveRippleView继承自View
既然要绘制,那么肯定要初始化画笔和路径,画笔的颜色值选择蓝色尽可能和海水颜色相似,画笔设为封闭样式
/**
* 初始化
* @param context
*/
private void init(Context context) {
paint = new Paint();
paint.setColor(Color.parseColor("#009FCC"));
paint.setStyle(Paint.Style.FILL);
path = new Path();
}
如何绘制水波纹
矩形表示手机屏幕(这个自定义view默认是充满屏幕的),波浪线表示水纹波动效果。
一段水波纹是曲线AD,我们只需要让这段曲线不断的滚动就实现了水波纹动画。曲线AD我们可以用贝塞尔曲线分别画出曲线AC和曲线CD,我们之所以从屏幕外开始画是因为水波纹要不断的波动要确保任何时刻都能看到水波纹,所以我们需要在屏幕前后及屏幕内画满水波纹。
设置水波纹的高度WAVE_HEGHT为100,曲线AD的长度即水波纹的波长WAVE_LENGTH为1500(具体值根据显示效果修改)
设置起始点Y点wavestartY为400;
/**
* 波纹的长度
*/
private final static int WAVE_LENGTH = 1500;
/**
* 波纹的高度
*/
private final static int WAVE_HEGHT = 100;
/**
* 起始点y坐标
*/
private static int wavestartY = 400;
计算ABCD点坐标
绘制AD曲线,最主要的是计算ABCD的坐标,根据我们的定义不难得出
A点坐标为(-WAVE_LENGTH,wavestartY)
B点相对A点坐标为(WAVE_LENGTH / 4, -WAVE_HEGHT)
C点相对B点坐标为(WAVE_LENGTH / 2, 0)
以此类推:
path.moveTo(-WAVE_LENGTH+dx, wavestartY);
for (int i = -WAVE_LENGTH; i < getWidth() + WAVE_LENGTH; i = i + WAVE_LENGTH) {
path.rQuadTo(WAVE_LENGTH / 4, -WAVE_HEGHT, WAVE_LENGTH / 2, 0);
path.rQuadTo(WAVE_LENGTH / 4, WAVE_HEGHT, WAVE_LENGTH / 2, 0);
}
canvas.drawPath(path, paint);
此时运行代码,效果如图所示:
此时我们的看到AD曲线绘制回来了,为了看起来更像水纹波动,还需要将D点和A点之间下方的空隙连接起来
path.lineTo(getWidth(), getHeight());
path.lineTo(0,getHeight());
path.close();
连接起来后,运行效果如图所示:
此时看起来就比较像水纹了
让水纹波动
水纹波其实就是一个简单的属性动画,关于动画我们这里不详细介绍了,
/**
* 水波纹属性动画
*/
public void startAnim(){
final ValueAnimator valueAnimator = ValueAnimator.ofInt(0,WAVE_LENGTH);
valueAnimator.setDuration(2500);
valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
dx = (int) valueAnimator.getAnimatedValue();
postInvalidate();
}
});
valueAnimator.start();
}
这里记得设置动画插值器让动画看起来更加流畅。
动画每执行一次就重新绘制一次,需要注意的是绘制的起点变为
path.moveTo(-WAVE_LENGTH+dx, wavestartY);
执行动画,运行效果如图所示:
水波纹升涨
最后我们让水波纹升涨就大功告成了,水波纹升涨只是绘制时y起点升高,所以我们让绘制的起点每次绘制时都减少一个像素
当值小于0的时候,重新设置为初始值400即可
wavestartY = wavestartY - 1;
if (wavestartY <= 0){
wavestartY = 400;
}
path.moveTo(-WAVE_LENGTH+dx, wavestartY)
android 贝塞尔曲线 波浪线,Android 贝塞尔曲线实现水纹波动效果相关推荐
- android 图片底部波浪线,Android实现波浪线效果(xml bitmap)
我们要实现的效果如下: 在这之前先带大家了解一下xml bitmap,何为xml bitmap? xml bitmap是一个用xml定义的文件放在资源目录,定义的对象是图片,为bitmap定义别名,这 ...
- Android 贝塞尔曲线实现水纹波动效果
前言 最近工作上比较忙碌,很久没有更新文章了,难得国庆小长假,现在是2019年10月2日凌晨00:49,写一篇简单且实用的贝塞尔曲线应用,许多技术点的文章很多前辈都已经写的很好了,所以 如有纰漏之处, ...
- 苹果usbc音频android,苹果USB-C音频线Android手机能用么?实测10款手机仅1款不支持...
原标题:苹果USB-C音频线Android手机能用么?实测10款手机仅1款不支持 苹果在新iPad Pro上取消了3.5mm耳机孔和Lightning接口,改为USB Type-C接口.这个接口既可以 ...
- android 图片底部波浪线,如何添加文字下面的红色波浪线在Android的TextView的
@ bpronin的代码不适用于我 - 跨度在高分辨率屏幕上太小,跨越整个文本,不仅跨越错误. 但按照他的想法,我更新了我的答案以删除添加的资源的需求: public class ErrorSpan ...
- android波浪线,android自定义veiw——波浪线
[实例简介] 详情:http://blog.csdn.net/it_xf/article/details/75014160 [实例截图] [核心代码] src ├── AndroidManifest. ...
- android字符串加删除线,android textview 添加上划线 中划线 删除线
很简单:两个例子一样 例如1: android textview 添加下划线 中划线 删除线 tv=(TextView)findViewById(R.id.tvId); tv.getPaint().s ...
- android百度地图画线,Android实现百度地图两点画弧线
import android.support.annotation.NonNull; import com.baidu.mapapi.map.ArcOptions; import com.baidu. ...
- android字符串加删除线,android TextView 设置和取消删除线的两种方法
一.TextView 设置删除线有两种方式: (推荐)方式一: 通过按位或运算符|,将 TextView 原本的 Flags 属性和删除线一块设置.setPaintFlags内会对 TextView ...
- Android绘制波浪线 进阶
前言 在我的上一篇博客中,我讲解了如何绘制一条波浪线,今天我们的目的是,绘制一条随心所欲的波浪线,什么叫随心所欲的波浪线呢,由于上篇主要讲解的是绘制波浪线的原理,不过就有人提问了,万一我想要的波浪线长 ...
最新文章
- 安卓的两种界面编写方式对比
- .net 同步mysql_MySQL服务器主从数据库同步配置
- C语言-数据结构与其他数据形式
- ansible(6)——模块命令command、shell详细用法
- java获取http状态码_java获取Json和http状态码
- 黑马day16 jqueryamp;属性过滤选择器
- html写出五个文本标签,HTML的几个常用标签
- BEIT:基于图像重建进行预训练!微软提出BEIT,Top-1准确率达86.3%!代码已开源!...
- 数据结构专题(二):2.7顺序表反转
- REPERTOIRE: CD
- 手机横版动作类游戏的开发思路
- 手机整人脚本html,vbs整人代码_手机vbs整人代码_如何让别人执行vbs代码(3)
- Halcon教程五:简单的条码识别案例
- MATLAB基本语法
- 黄永成-thinkphp讲解-个人博客讲解26集
- 怎么打开系统服务器,Win10怎么打开系统服务管理器 Win10打开系统服务管理器操作方法...
- 方差、标准差、协方差
- 【小教程】Ubuntu ASF steam自动挂卡
- 韩国首发元宇宙 5 年计划,市民可戴 VR 头显见政府官员
- 现实版的黑客大战,这可能是中国黑客做过最燃的事情了
热门文章
- c语言编程作业最大整数问题,C语言编程第六章作业答案.doc
- 不是css3新增的技术,CSS3中的5个有趣的新技术
- sql server mysql 同步_SQL Server 用链接server 同步MySQL
- JS 打印 data数据_小程序导出数据到excel表
- java中html的树状_HTML中的树状选择
- 关闭windows hello然后尝试再次运行安装程序_蜂鸟E203系列——Windows下运行hello world例程...
- zplane函数怎么用m文件调用_matlab中cla用法
- python delete_rows,Python:如何刪除以特定字符結尾的行?
- 基于JAVA+SpringMVC+Mybatis+MYSQL的图书馆座位预约系统
- 基于JAVA+SpringMVC+MYSQL的学生信息管理系统