android曲线水波纹录音动画,Android-贝塞尔曲线实现水波纹动画
Android 系统api提供了quadTo和rQuadTo实现二阶贝塞尔曲线,三阶贝塞尔曲线在这不做阐述,只不过是两个控制点。
效果图
首先看张二阶贝赛尔的曲线
Path path = new Path();
//贝赛尔的起始点moveTo(x,y)
path.moveTo(getWidth() / 2 - 200, getHeight() / 2);
//quadTo 参数讲解(x1,y1,x2,y2)
//x1:控制点x坐标
//y1:在控制点y坐标
//x2:终点x坐标
//y2:终点y坐标
path.quadTo(getWidth() / 2 - 100, getHeight() / 2 - 100, getWidth() / 2, getHeight() / 2);
path.quadTo(getWidth() / 2 + 100, getHeight() / 2 + 100, getWidth() / 2 + 200, getHeight() / 2);
canvas.drawPath(path, mPaint);
quadTo和rQuadTo的区别
//rQuadTo参数讲解(dx1,dy1,dx2,dy2):
//dx1:控制点相对起点的x位移
//dy1:控制点相对起点的y位移
//dx2:终点相对起点的x位移
/dy2:终点相对起点的y位移
path.moveTo(getWidth() / 2 - 200, getHeight() / 2);
path.rQuadTo(100, -100, 200, 0);
path.rQuadTo(100, 100, 200, 0);
canvas.drawPath(path, mPaint);
效果一样,在这就不贴图了。
quadTo参数讲解(x1,y1,x2,y2):x1:控制点x坐标,y1:在控制点y坐标,x2:终点x坐标,y2:终点y坐标
rQuadTo参数讲解(dx1,dy1,dx2,dy2):dx1:控制点相对起点的x位移,dy1:控制点相对起点的y位,dx2:终点相对起点的x位移,dy2:终点相对起点的y位移
实现水波纹动态效果无非是曲线向左一个偏移量dx,看过去想凹凸的曲线,于是形成了水波纹动态效果。看代码。
实现水波纹动态的效果
public class WaveView extends View {
private Paint mPaint;
private int mWidth;
private int mHeight;
private int mWaveHeight;
private int mWaveDx;
private int dx;
public WaveView(Context context) {
this(context, null);
}
public WaveView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setDither(true);
mPaint.setColor(Color.parseColor("#FF3891"));
mPaint.setStyle(Paint.Style.FILL);
//波长的的长度(这里设置为屏幕的宽度)
mWaveDx = getResources().getDisplayMetrics().widthPixels;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//控件的宽高
mWidth = MeasureUtils.measureView(widthMeasureSpec, mWaveDx);
mHeight = MeasureUtils.measureView(heightMeasureSpec, 300);
//水波的高度
mWaveHeight = DensityUtil.dip2px(getContext(), 16);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawWave(canvas);
}
private void drawWave(Canvas canvas) {
Path path = new Path();
path.reset();
path.moveTo(-mWaveDx + dx, mHeight / 2);
for (int i = -mWaveDx; i < getWidth() + mWaveDx; i += mWaveDx) {
path.rQuadTo(mWaveDx / 4, -mWaveHeight, mWaveDx / 2, 0);
path.rQuadTo(mWaveDx / 4, mWaveHeight, mWaveDx / 2, 0);
}
path.lineTo(mWidth, mHeight);
path.lineTo(0, mHeight);
//path.close() 绘制封闭的区域
path.close();
canvas.drawPath(path, mPaint);
}
public void startAnimation() {
ValueAnimator valueAnimator = ValueAnimator.ofInt(0, mWaveDx);
valueAnimator.setDuration(2000);
valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//水平方向的偏移量
dx = ( int ) animation.getAnimatedValue();
invalidate();
}
});
valueAnimator.start();
}
}
核心代码是drawWave()这个方法,startAnimation()是一个水平方向动画,偏移量是dx,在Activity中调用。水波纹的高度(就是贝塞尔曲线的高度),颜色、大小都可以自定义。小编没有写,整个绘制水波纹动画效果的思路和清晰。主要是搞懂quadTo和rQuadTo的区别和参数的意思。有问题可以留言!
打开App,阅读手记
android曲线水波纹录音动画,Android-贝塞尔曲线实现水波纹动画相关推荐
- Android开发 之 曲线运动动画(贝塞尔曲线)
曲线运动动画(贝塞尔曲线) 贝塞尔曲线:维基百科中这样说到:在数学的数值分析领域中,贝塞尔曲线(英语:Bézier curve)是计算机图形学中相当重要的参数曲线.更高维度的广泛化贝塞尔曲线就称作贝塞 ...
- android 贝塞尔曲线点击区域,白话经典贝塞尔曲线及其在 Android 中的应用
一.前言 谈到贝塞尔曲线可能不少人会浮现它高大上的数学公式.然而,在实际应用中,并不需要我们去完全理解或者推导出公式才能应用得上.实际情况是,即使真的只是一个学渣,我们应该也能很轻松的掌握贝塞尔曲线的 ...
- CSS3动画常用贝塞尔曲线-效果演示
CSS与贝塞尔曲线 CSS3动画常用贝塞尔曲线实现更加自然,物理感的动画. demo演示 列举了一些常见的贝塞尔曲线数值,用于做动画的存档. .a1{animation: stretch 1s cub ...
- 前端动画之贝塞尔曲线推导及应用
hello,大家好,今天豆皮范儿给大家带来了贝塞尔曲线推导和应用,优美的贝塞尔曲线想起了大学时候老师在给我们讲如何实现,如何推导,如何实现和应用.本来也来详细介绍一下,纯纯的干货- 作者:lff 生活 ...
- 史上最全的贝塞尔曲线(Bezier)全解(一):初识贝塞尔曲线
作为一个有只志向的码农,除了知道一些基本的知识够自己努力搬砖以外,还应该get一些更炫酷的技能,用更优雅的姿势进行搬砖;想要实现一些十分炫酷的效果,贝塞尔曲线就必须进行一些研究了; 最近一段时间, ...
- 光滑曲线_计算机图形学十:贝塞尔曲线与贝塞尔曲面
贝塞尔曲线与贝塞尔曲面 1 贝塞尔曲线(Bézier Curves) 在进入具体原理讲解之前,首先看一下一条实际的贝塞尔曲线长什么样子 其中 为 控制点,蓝色所表示曲线正是非常著名的贝塞尔曲线了,可以 ...
- unity 控制点 贝塞尔曲线_在Unity中使用贝塞尔曲线(转)
鼎鼎大名的贝塞尔曲线相信大家都耳熟能详.这两天因为工作的原因需要将贝塞尔曲线加在工程中,那么MOMO迅速的研究了一下成果就分享给大家了哦.贝塞尔曲线的原理是由两个点构成的任意角度的曲线,这两个点一个是 ...
- 加入购物车动画(贝塞尔曲线)
此文乃搬运后整理,如有侵权立删. 原文为一个小球,但存在连续点击时小球的运动重新开始,所以我在搞懂原理后 改为五个小球循环使用,这样在连续点击时小球的运动不会终止 index.vue <temp ...
- canvas贝塞尔曲线爱心_canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
写在最前 由于原生的Canvas最高只支持到三阶贝塞尔曲线,那么我想添加多个控制点怎么办呢?(即便大部分复杂曲线都可以用3阶贝塞尔来模拟)与此同时,关于贝塞尔控制点的位置我们很难非常直观的清楚到底将控 ...
- unity 控制点 贝塞尔曲线_在Unity中使用贝塞尔曲线
前言 最近项目需要呈现各种轨道且随机性较强,在找了一天插件后打算自己实现平滑曲线,思路是策划对关卡中的轨道放置任意个节点,我通过代码将所有节点绘制成一条平滑的曲线,每两个节点之间通过三阶贝塞尔实现,最 ...
最新文章
- Qt 小技巧之“To-Do 事项”
- 理解浏览器允许的并发请求资源数
- mysql ptquerydigest_MySQL - pt-query-digest的下载与使用
- Docker的界面话管理工具
- 明源云·天际,地产⾏业的Salesforce Lightning Platform
- 将指标标签与MicroProfile Metrics 2.0结合使用
- 局域网聊天2011记住
- vb.net 打开ie 传参数_FF与IE对javascript和CSS的区别?
- php分页函数代码,PHP分页函数代码分享
- java中userservice是什么,【图片】求助大神~~我在Reaml中注入userService对象启动tomcat就报错【java吧】_百度贴吧...
- C++ STL string字符串内容修改和替换
- 使用tushare数据进行backtrader回测
- Vlan中 tagged和untagged的区别
- 晶圆涨、封测涨、芯片涨、材料涨…涨价的野火烧到哪了?
- 受欢迎的牛+Trajan缩点+树形dp
- 1089: 手机短号 (多实例)
- Simpoint - 0x1 切片完整步骤
- 做个全栈工程师真的好吗?
- Semi-supervised Semantic Segmentation with Error Localization Network(基于误差定位网络的半监督语义分割 )
- 质量过剩还意味着什么?
热门文章
- solr索引大小对比
- Host-Only(仅主机模式)
- 4月10日下午学习日志
- BestCoder Round #81 (div.2) B Matrix
- unrecognized selector sent to class 0x235e7ec
- 使用C#开发纽曼USB来电小秘书客户端小结
- [转载] python getattr_Python中的异常处理
- Windows 命令行及Git操作
- Selector提取数据1:XPath选择器
- npm install 错误 安装 chromedriver 失败的解决办法