贝塞尔曲线开发的艺术
来源:互联网 发布:js农历日历控件 编辑:程序博客网 时间:2024/06/07 06:32
水流波动的波形都是三角波,曲线是正余弦曲线,但是Android中没有提供绘制正余弦曲线的API,好在Path类有个绘制贝塞尔曲线的方法quadTo,绘制出来的是2阶的贝塞尔曲线,要想实现波动效果,只能用它来绘制Path曲线。待会儿再讲解2阶的贝塞尔曲线是怎么回事,先来看实现的效果:
这个波长比较短,还看不到起伏,只是荡漾,把波长拉长再看一下:
已经可以看到起伏很明显了,再拉长看一下:
这个的起伏感就比较强了。利用这个波动效果,可以用在绘制水位线的时候使用到,还可以做一个波动的进度条WaveUpProgress,比如这样:
是不是很动感?
那这样的波动效果是怎么做的呢?前面讲到的贝塞尔曲线到底是什么呢?下面一一讲解。想要用好贝塞尔曲线就得先理解它的表达式,为了形象描述,我从网上盗了些动图。
首先看1阶贝塞尔曲线的表达式:
随着t的变化,它实际是一条P0到P1的直线段:
Android中Path的quadTo是3点的2阶贝塞尔曲线,那么2阶的表达式是这样的:
看起来很复杂,我把它拆分开来看:
然后再合并成这样:
看到什么了吧?如果看不出来再替换成这样:
B0和B1分别是P0到P1和P1到P2的1阶贝塞尔曲线。而2阶贝塞尔曲线B就是B0到B1的1阶贝塞尔曲线。显然,它的动态图表示出来就不难理解了:
红色点的运动轨迹就是B的轨迹,这就是2阶贝塞尔曲线了。当P1位于P0和P2的垂直平分线上时,B就是开口向上或向下的抛物线了。而在WaveView中就是用的开口向上和向下的抛物线模拟水波。在Android里用Path的方法,首先path.moveTo(P0),然后path.quadTo(P1, P2),canvas.drawPath(path, paint)曲线就出来了,如果想要绘制多个贝塞尔曲线就不断的quadTo吧。
讲完贝塞尔曲线后就要开始讲水波动的效果是怎么来的了,首先要理解,机械波的传输就是通过介质的震动把波形往传输方向平移,每震动一个周期波形刚好平移一个波长,所有介质点又回到一个周期前的状态。所以要实现水波动效果只需要把波形平移就可以了。
那么WaveView的实现原理是这样的:
首先在View上根据View宽计算可以容纳几个完整波形,不够一个的算一个,然后在View的不可见处预留一个完整的波形;然后波动开始的时候将所有点同时在x方向上移动相同的距离,这样隐藏的波形就会被平移出来,当平移距离达到一个波长时,这时候将所有点的x坐标又恢复到平移前的值,这样就可以一个波形一个波形地往外传输。用草图表示如下:
WaveView的原理在上图很直观的看出来了,P[2n+1],n>=0都是贝塞尔曲线的控制点,红线为水位线。
波浪效果
波浪的绘制是贝塞尔曲线一个非常简单的应用,而让波浪进行波动,其实并不需要对控制点进行改变,而是可以通过位移来实现,这里我们是借助贝塞尔曲线来实现波浪的绘制效果,效果如图所示:
package com.xys.animationart.views;import android.animation.ValueAnimator;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.util.AttributeSet;import android.view.View;import android.view.animation.LinearInterpolator;/** * 波浪图形 */public class WaveBezier extends View implements View.OnClickListener { private Paint mPaint; private Path mPath; private int mWaveLength = 1000; private int mOffset; private int mScreenHeight; private int mScreenWidth; private int mWaveCount; private int mCenterY; public WaveBezier(Context context) { super(context); } public WaveBezier(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } public WaveBezier(Context context, AttributeSet attrs) { super(context, attrs); mPath = new Path(); mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint.setColor(Color.LTGRAY); mPaint.setStyle(Paint.Style.FILL_AND_STROKE); setOnClickListener(this); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mScreenHeight = h; mScreenWidth = w; mWaveCount = (int) Math.round(mScreenWidth / mWaveLength + 1.5); mCenterY = mScreenHeight / 2; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); mPath.reset(); mPath.moveTo(-mWaveLength + mOffset, mCenterY); for (int i = 0; i < mWaveCount; i++) { // + (i * mWaveLength) // + mOffset mPath.quadTo((-mWaveLength * 3 / 4) + (i * mWaveLength) + mOffset, mCenterY + 60, (-mWaveLength / 2) + (i * mWaveLength) + mOffset, mCenterY); mPath.quadTo((-mWaveLength / 4) + (i * mWaveLength) + mOffset, mCenterY - 60, i * mWaveLength + mOffset, mCenterY); } mPath.lineTo(mScreenWidth, mScreenHeight); mPath.lineTo(0, mScreenHeight); mPath.close(); canvas.drawPath(mPath, mPaint); } @Override public void onClick(View view) { ValueAnimator animator = ValueAnimator.ofInt(0, mWaveLength); animator.setDuration(1000); animator.setRepeatCount(ValueAnimator.INFINITE); animator.setInterpolator(new LinearInterpolator()); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mOffset = (int) animation.getAnimatedValue(); postInvalidate(); } }); animator.start(); }}
- 贝塞尔曲线开发的艺术
- 贝塞尔曲线开发的艺术
- 贝塞尔曲线开发的艺术
- 贝塞尔曲线开发的艺术
- 【Android】贝塞尔曲线的艺术(一)
- 贝塞尔曲线的艺术---弹性效果实现
- iOS开发 贝塞尔曲线
- iOS 开发贝塞尔曲线
- 《敏捷开发的艺术》勘误
- 测试驱动开发的艺术
- 艺术开发-View的测量
- iOS开发 贝塞尔曲线UIBezierPath
- iOS开发 贝塞尔曲线UIBezierPath
- iOS开发 贝塞尔曲线UIBezierPath
- iOS开发 贝塞尔曲线UIBezierPath
- iOS开发 贝塞尔曲线UIBezierPath
- iOS开发 贝塞尔曲线UIBezierPath
- iOS开发 贝塞尔曲线UIBezierPath
- C语言位运算
- 删除历史记录后,兼容性视图列表被清空怎么办?
- Vue中如何使用vue-resource获取端口数据
- 有关RadioGroup的OnCheckedChanged方法执行多次的探讨
- 带页签的 scrollview
- 贝塞尔曲线开发的艺术
- Java ECB解密时报错
- Boost.Interprocess使用手册翻译之五:独立于映射地址的指针:offset_pt (Mapping Address Independent Pointer: offset_ptr)
- Redis配置与异常总结
- UIAutomator定位Android控件的方法(渐进篇)
- winform解析csv文件自动入库并开机自启+邮件告知执行情况
- 接触一门新语言,lua为例
- Java之进程与线程
- 强化市场营销意识,提升军队医院口碑