怎么求 Javaandroid 贝塞尔曲线线两点之间的角度

主题信息(必填)
主题描述(最多限制在50个字符)
申请人信息(必填)
申请信息已提交审核,请注意查收邮件,我们会尽快给您反馈。
如有疑问,请联系
http://CodeCloud.net
微博:/ilizhike
与世界分享我的认识、见解,我是it人,我喜欢it
关注软件开发和互联网业界
| 微信公众号:AndroidDeveloper
二阶贝塞尔曲线的实现原理与实际应用转自:/kf/838.html
Android动画学习Demo(3) 沿着贝塞尔曲线移动的Property Animation
Property Animation中最重要,最基础的一个类就是ValueAnimator了。Property Animation利用ValueAnimator来跟踪记录对象属性已经变化了多长时间及当前这个时间点的值。
而在ValueAnimator中,又封装了两个类:
1)TimeInterpolator,也称插值器,是来计算当前动画运动的一个跟时间有关系的比例因子。
2)TypeEvaluator,这个就是利用TimeInterpolator计算出来的因子来算出当前动画运行到的位置。
这样讲太抽象了,我们还是先用自然语言来描述一下整个动画的过程吧。
动画的原理,其实就是一帧帧的画面顺着时间顺序,在我们眼中形成视觉残留的效果。所以在动画中,时间的概念是很重要的,只有时间的变化,才能形成动画效果。
0)动画准备开始,我们在这里设置了一个动画的时长(duration),如果不设置的话,动画的时长就是300毫秒,每个画面显示的时间是10ms。同时也设置了某个属性值在这个时间段中变化的起始值start和结束值end,意思就是说,在duration时间中,属性值要从start 变化到 end。
1)动画开始了,过了 t 时间,ValueAnimator会根据 t / duration 算出一个时间消逝的比例因子(elapsed fraction),意思就是说,现在时间到 t了,我们假设总的时间的duration就是3t吧,那就是现在已经过了1/3时间了,那这个属性值也应该要变化到1/3了。
2)动画继续,现在到了2t了,那么现在动画时间已经过了2/3了,那么这个属性值是不是已经变化到2/3了呢。
3)现在到了3t了,动画结束了,属性值就已经从start变成end值了。
那么现在问题来了,如果都是这样算的话,那动画不就一直是很匀速的了吗?是的,如果用的是LinearInterpolator的话。
TimeInterpolator
TimeInterpolator就是用来改变我们这个动画速度的这样一个类了。为什么叫插值器呢?我理解就是,本来动画踩着时间点,一步一步走的挺好的,它硬生生在中间的插了些值进去,或者抽了一些值出去,让整条路变得不好走了,前面变然变上坡了,走起来就慢了,本来过去 t 时间之后,动画的画面也应该在1/3的位置了,但是路不好走,它就走不到1/3,而可能只走了1/4了,而后面是下坡,一激动,步伐就快了许多,又赶上去了,但是不管中间的路怎么变化,时间点一到,一定是刚刚好落在最终的位置上的。 Android中提供的Interpolator主要有九个: 1)AccelerateDecelerateInterpolator:先加速再减速。2)AccelerateInterpolator:一直加速。3)AnticipateInterpolator:先往后一下,再嗖的一声一往无前。4)AnticipateOvershootInterpolator:先往后一下,再一直往前超过终点,再往回收一下。5)BounceInterpolator:最后像个小球弹几下。6)CycleInterpolator:重复几次,感觉就是环形进度条那种,具体我还没试过。7)DecelerateInterpolator:一直减速。8)LinearInterpolator:线性,这个就是我们上面讲到的很均匀的了。9)OvershootInterpolator:到了终点之后,超过一点,再往回走。有个参数可以定义,超过的力度。&这些Interpolator都是实现了TimeInterpolator接口的类,它们只需要实现一个方法:getInterpolation (float input),将这个input根据自己的需求重新计算这个比例&第一步:当到了某时间t之后,ValueAnimator会算出某个比例 fraction = t / duration,而Interpolator会接收这个比例fraction,再调用其getInterpolation方法将这个比例因子重新计算一下,返回一个新的比例因子,比如LinearInterpolator实现的方法就是什么都不变,如下:
public float getInterpolation(float input) {
&&&&return
而 AccelerateDecelerateInterpolator 则会利用余弦函数的对称性变化计算这个比例因子,如下:
public float getInterpolation(float input) {
&&&&return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;
如上所述,通过第一步 Interpolator 的插值,我们会得到一个比例因子,接下来就是要用到我们的TypeEvaluator了。&
TypeEvaluator
第二步:TypeEvaluator会接受第一步中算出来的比例因子,然后算出当前的属性的值,将其返回给ValuaAnimator,由ValueAnimator去设置对应属性的值。 比如,我自己写了一个BezierTypeEvaluator,根据时间的变化来让一个按钮沿着贝塞尔曲线移动,如下:
class BezierEvaluator implements TypeEvaluator&pointf&{
&&&&&&&&@Override
&&&&&&&&public PointF evaluate(float fraction, PointF startValue,
&&&&&&&&&&&&&&&&PointF endValue) {
&&&&&&&&&&&&final float t =
&&&&&&&&&&&&float oneMinusT = 1.0f -
&&&&&&&&&&&&PointF point = new PointF();
&&&&&&&&&&&&&
&&&&&&&&&&&&PointF point0 = (PointF)startV
&&&&&&&&&&&&&
&&&&&&&&&&&&PointF point1 = new PointF();
&&&&&&&&&&&&point1.set(width, 0);
&&&&&&&&&&&&&
&&&&&&&&&&&&PointF point2 = new PointF();
&&&&&&&&&&&&point2.set(0, height);
&&&&&&&&&&&&&
&&&&&&&&&&&&PointF point3 = (PointF)endV
&&&&&&&&&&&&&
&&&&&&&&&&&&point.x = oneMinusT * oneMinusT * oneMinusT * (point0.x)
&&&&&&&&&&&&&&&&&&&&+ 3 * oneMinusT * oneMinusT * t * (point1.x)
&&&&&&&&&&&&&&&&&&&&+ 3 * oneMinusT * t * t * (point2.x)
&&&&&&&&&&&&&&&&&&&&+ t * t * t * (point3.x);
&&&&&&&&&&&&&
&&&&&&&&&&&&point.y = oneMinusT * oneMinusT * oneMinusT * (point0.y)
&&&&&&&&&&&&&&&&&&&&+ 3 * oneMinusT * oneMinusT * t * (point1.y)
&&&&&&&&&&&&&&&&&&&&+ 3 * oneMinusT * t * t * (point2.y)
&&&&&&&&&&&&&&&&&&&&+ t * t * t * (point3.y);&&&&&&&&&&
&&&&&&&&&&&&return
&&&&&&&&}&&
&&&&}&/pointf&
自定义TypeEvaluator,我们必须实现其evaluate方法,目的就是计算出目前的对象对应属性的值,而它会接收三个参数,一个是上文中通过interpolator算出的比例,还有我们在创建动画时设置的起始值和结束值。&
ValueAnimator.AnimatorUpdateListener
既然我们已经算出了在 t 时刻,对象的某个属性的值,那么我们要把这个值重新设置到对象中,才能够起作用啊。所以ValueAnimator也提供了一个内部的Listener接口,其只有一个方法,就是获取TypeEvaluator计算出来的值,并设置给对应的属性,比如我们Demo中的代码:
valueAnimator.addUpdateListener(new AnimatorUpdateListener() {&&&&&&&&&
&&&&&&&&&&&&@Override
&&&&&&&&&&&&public void onAnimationUpdate(ValueAnimator animation) {
&&&&&&&&&&&&&&&&PointF pointF = (PointF)animation.getAnimatedValue();
&&&&&&&&&&&&&&&&button.setX(pointF.x);
&&&&&&&&&&&&&&&&button.setY(pointF.y);
&&&&&&&&&&&&}
&&&&&&&&});
我们在这里改变Button的X坐标和Y坐标,从而改变其具体的位置。至于validate,然后引起重新绘制的过程,对于这些基本的属性,ValueAnimator已经帮我们实现了。 下面,我们看看效果图,然后再总结一下ValueAnimator的实现机制。&下载&嗯,这一篇文章大概就是这样了,大家如果有兴趣了解Property Animation的应用的话,可以看一下动画学习Demo(2) 关于Property Animation的用法及总结最后还是要提醒一下,Property Animation是3.0以后才支持的,如果大家想在3.0之前去应用这些属性的话,可以去下载jake wharton的nineoldandroids包,基本上都可以直接将方法套上,不过据我实验,还是有某些方法,比如 PropertyValuesHolder就会有些bug出现的。我把这个包也放在这里吧,点击NineoldAndroids下载
二、自定义贝塞尔曲线View
转自:/kf/130.html
Android 自定义View高级特效,神奇的贝塞尔曲线
效果图中我们实现了一个简单的随手指滑动的二阶贝塞尔曲线,还有一个复杂点的,穿越所有已知点的贝塞尔曲线。学会使用贝塞尔曲线后可以实现例如QQ红点滑动删除啦,360动态球啦,bulabulabula~
什么是贝塞尔曲线?
贝赛尔曲线(Bézier曲线)是电脑图形学中相当重要的参数曲线。更高维度的广泛化贝塞尔曲线就称作贝塞尔曲面,其中贝塞尔三角是一种特殊的实例。贝塞尔曲线于1962年,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau算法开发,以稳定数值的方法求出贝塞尔曲线。
读完上述贝塞尔曲线简介我还是一头雾水,来个示例呗。
线性贝塞尔曲线
给定点P0、P1,线性贝塞尔曲线只是一条两点之间的直线。这条线由下式给出:
二次方贝塞尔曲线
二次方贝塞尔曲线的路径由给定点P0、P1、P2的函数B(t)追踪:
三次方贝塞尔曲线
P0、P1、P2、P3四个点在平面或在三维空间中定义了三次方贝塞尔曲线。曲线起始于P0走向P1,并从P2的方向来到P3。一般不会经过P1或P2;公式如下:
N次方贝塞尔曲线
身为三维生物超出三维我很方,这里只给示例图。想具体了解的同学请左转度娘。
就当没看过上面
在API=1的时候就提供了贝塞尔曲线的画法,只是隐藏在Path#quadTo()和Path#cubicTo()方法中,一个是二阶贝塞尔曲线,一个是三阶贝塞尔曲线。当然,如果你想自己写个方法,依照上面贝塞尔的表达式也是可以的。不过一般没有必要,因为Android已经在native层为我们封装好了二阶和三阶的函数。
从一个二阶贝塞尔开始
自定义一个BezierView
初始化各个参数,花3s扫一下即可。
&code class="hljs java"&&&& private Paint mP
&&&&private Path mP
&&&&private Point startP
&&&&private Point endP
&&&&private Point assistP
&&&&&&&&public BezierView(Context context) {
&&&&&&&&this(context, null);
&&&&public BezierView(Context context, AttributeSet attrs) {
&&&&&&&&this(context, attrs, 0);
&&&&public BezierView(Context context, AttributeSet attrs, int defStyleAttr) {
&&&&&&&&super(context, attrs, defStyleAttr);
&&&&&&&&init(context);
&&&&private void init(Context context) {
&&&&&&&&mPaint = new Paint();
&&&&&&&&mPath = new Path();
&&&&&&&&startPoint = new Point(300, 600);
&&&&&&&&endPoint = new Point(900, 600);
&&&&&&&&assistPoint = new Point(600, 900);
&&&&&&&&mPaint.setAntiAlias(true);
&&&&&&&&mPaint.setDither(true);
&&&&}&/code&
在onDraw中画二阶贝塞尔
&code class="hljs avrasm"&&&&&&&&
&&&&&&&&mPaint.setColor(Color.BLACK);
&&&&&&&&mPaint.setStrokeWidth(POINTWIDTH);
&&&&&&&&mPaint.setStyle(Paint.Style.STROKE);
&&&&&&&&mPath.reset();
&&&&&&&&mPath.moveTo(startPoint.x, startPoint.y);
&&&&&&&&mPath.quadTo(assistPoint.x, assistPoint.y, endPoint.x, endPoint.y);
&&&&&&&&canvas.drawPath(mPath, mPaint);
&&&&&&&&canvas.drawPoint(assistPoint.x, assistPoint.y, mPaint);&/code&
上面注释很清晰就不赘述了。示例中贝塞尔是可以跟着手指的滑动而变化,我一拍榴莲,肯定是复写了onTouchEvent()!
&code class="hljs cs"&&&& @Override
&&&&public boolean onTouchEvent(MotionEvent event) {
&&&&&&&&switch (event.getAction()) {
&&&&&&&&&&&&case MotionEvent.ACTION_DOWN:
&&&&&&&&&&&&case MotionEvent.ACTION_MOVE:
&&&&&&&&&&&&&&&&assistPoint.x = (int) event.getX();
&&&&&&&&&&&&&&&&assistPoint.y = (int) event.getY();
&&&&&&&&&&&&&&&&Log.i(TAG, "assistPoint.x = " + assistPoint.x);
&&&&&&&&&&&&&&&&Log.i(TAG, "assistPoint.Y = " + assistPoint.y);
&&&&&&&&&&&&&&&&invalidate();
&&&&&&&&&&&&&&&&break;
&&&&&&&&return true;
&&&&}&/code&
最后将我们自定义的BezierView添加到布局文件中。至此一个简单的二阶贝塞尔曲线就完成了。假设一下,在向下拉动的过程中,在曲线上增加一个“小超人”,360动态清理是不是就出来了呢?有兴趣的可以自己拓展下。
以一个三阶贝塞尔结束
天气预报曲线图示例
(图一)(图二)
要想得到上图的效果,需要二阶贝塞尔和三阶贝塞尔配合。具体表现为,第一段和最后一段曲线为二阶贝塞尔,中间N段都为三阶贝塞尔曲线。
先根据相邻点(P1,P2, P3)计算出相邻点的中点(P4, P5),然后再计算相邻中点的中点(P6)。然后将(P4,P6, P5)组成的线段平移到经过P2的直线(P8,P2,P7)上。接着根据(P4,P6,P5,P2)的坐标计算出(P7,P8)的坐标。最后根据P7,P8等控制点画出三阶贝塞尔曲线。
点和线的解释
黑色点:要经过的点,例如温度 蓝色点:两个黑色点构成线段的中点 黄色点:两个蓝色点构成线段的中点 灰色点:贝塞尔曲线的控制点 红色线:黑色点的折线图 黑色线:黑色点的贝塞尔曲线,也是我们最终想要的效果
为了方便讲解以及读者的理解。本篇以图一效果为例进行讲解。BezierView坐标都是根据屏幕动态生成的,想要图二的效果只需修改初始坐标,不用对代码做很大的修改即可实现。
那么,开始吧!
初始化参数
&code class="hljs java"&&&& private static final String TAG = "BIZIER";
&&&&private static final int LINEWIDTH = 5;
&&&&private static final int POINTWIDTH = 10;
&&&&private Context mC
&&&&/** 即将要穿越的点集合 */
&&&&private List&point& mPoints = new ArrayList&&();
&&&&/** 中点集合 */
&&&&private List&point& mMidPoints = new ArrayList&&();
&&&&/** 中点的中点集合 */
&&&&private List&point& mMidMidPoints = new ArrayList&&();
&&&&/** 移动后的点集合(控制点) */
&&&&private List&point& mControlPoints = new ArrayList&&();
&&&&private int mScreenW
&&&&private int mScreenH
&&&&private void init(Context context) {
&&&&&&&&mPaint = new Paint();
&&&&&&&&mPath = new Path();
&&&&&&&&mPaint.setAntiAlias(true);
&&&&&&&&mPaint.setDither(true);
&&&&&&&&mContext =
&&&&&&&&getScreenParams();
&&&&&&&&initPoints();
&&&&&&&&initMidPoints(this.mPoints);
&&&&&&&&initMidMidPoints(this.mMidPoints);
&&&&&&&&initControlPoints(this.mPoints, this.mMidPoints , this.mMidMidPoints);
&&&&}&/point&&/point&&/point&&/point&&/code&
第一个函数获取屏幕宽高就不说了。紧接着初始化了初始点、中点、中点的中点、控制点。我们一个个的跟进。首先是初始点。
&code class="hljs java"&&&& /** 添加即将要穿越的点 */
&&&&private void initPoints() {
&&&&&&&&int pointWidthSpace = mScreenWidth / 5;
&&&&&&&&int pointHeightSpace = 100;
&&&&&&&&for (int i = 0; i & 5; i++) {
&&&&&&&&&&&&P
&&&&&&&&&&&&
&&&&&&&&&&&&if (i%2 != 0) {
&&&&&&&&&&&&&&&&point = new Point((int) (pointWidthSpace*(i + 0.5)), mScreenHeight/2 - pointHeightSpace);
&&&&&&&&&&&&} else {
&&&&&&&&&&&&&&&&point = new Point((int) (pointWidthSpace*(i + 0.5)), mScreenHeight/2);
&&&&&&&&&&&&}
&&&&&&&&&&&&mPoints.add(point);
&&&&}&/code&
这里循环创建了一高一低五个点,并添加到List&mPoints中。上文说道图一到图二只需修改这里的初始点即可。
&code class="hljs java"&&&& /** 初始化中点集合 */
&&&&private void initMidPoints(List&point& points) {
&&&&&&&&for (int i = 0; i & points.size(); i++) {
&&&&&&&&&&&&Point midPoint = null;
&&&&&&&&&&&&if (i == points.size()-1){
&&&&&&&&&&&&&&&&return;
&&&&&&&&&&&&}else {
&&&&&&&&&&&&&&&&midPoint = new Point((points.get(i).x + points.get(i + 1).x)/2, (points.get(i).y + points.get(i + 1).y)/2);
&&&&&&&&&&&&}
&&&&&&&&&&&&mMidPoints.add(midPoint);
&&&&/** 初始化中点的中点集合 */
&&&&private void initMidMidPoints(List&point& midPoints){
&&&&&&&&for (int i = 0; i & midPoints.size(); i++) {
&&&&&&&&&&&&Point midMidPoint = null;
&&&&&&&&&&&&if (i == midPoints.size()-1){
&&&&&&&&&&&&&&&&return;
&&&&&&&&&&&&}else {
&&&&&&&&&&&&&&&&midMidPoint = new Point((midPoints.get(i).x + midPoints.get(i + 1).x)/2, (midPoints.get(i).y + midPoints.get(i + 1).y)/2);
&&&&&&&&&&&&}
&&&&&&&&&&&&mMidMidPoints.add(midMidPoint);
&&&&}&/point&&/point&&/code&
这里算出中点集合以及中点的中点集合,小学数学题没什么好说的。唯一需要注意的是他们数量的差别。
&code class="hljs avrasm"&&&& /** 初始化控制点集合 */
&&&&private void initControlPoints(List&point& points, List&point& midPoints, List&point& midMidPoints){
&&&&&&&&for (int i = 0; i & points.size(); i ++){
&&&&&&&&&&&&if (i ==0 || i == points.size()-1){
&&&&&&&&&&&&&&&&continue;
&&&&&&&&&&&&}else{
&&&&&&&&&&&&&&&&Point before = new Point();
&&&&&&&&&&&&&&&&Point after = new Point();
&&&&&&&&&&&&&&&&before.x = points.get(i).x - midMidPoints.get(i - 1).x + midPoints.get(i - 1).x;
&&&&&&&&&&&&&&&&before.y = points.get(i).y - midMidPoints.get(i - 1).y + midPoints.get(i - 1).y;
&&&&&&&&&&&&&&&&after.x = points.get(i).x - midMidPoints.get(i - 1).x + midPoints.get(i).x;
&&&&&&&&&&&&&&&&after.y = points.get(i).y - midMidPoints.get(i - 1).y + midPoints.get(i).y;
&&&&&&&&&&&&&&&&mControlPoints.add(before);
&&&&&&&&&&&&&&&&mControlPoints.add(after);
&&&&&&&&&&&&}
&&&&}&/point&&/point&&/point&&/code&
大家需要注意下这个方法的计算过程。以图一(P2,P4, P6,P8)为例。现在P2、P4、P6的坐标是已知的。根据由于(P8, P2)线段由(P4, P6)线段平移而来,所以可得如下结论:P2 - P6 = P8 - P4 。即P8 = P2 - P6 + P4。其余同理。
画辅助点以及对比折线图
&code class="hljs mel"&&&& @Override
&&&&protected void onDraw(Canvas canvas) {
&&&&&&&&super.onDraw(canvas);
&&&&&&&&drawPoints(canvas);
&&&&&&&&drawCrossPointsBrokenLine(canvas);
&&&&&&&&drawMidPoints(canvas);
&&&&&&&&drawMidMidPoints(canvas);
&&&&&&&&drawControlPoints(canvas);
&&&&&&&&drawBezier(canvas);
&&&&}&/code&
可以看到,在画贝塞尔曲线之前我们画了一系列的辅助点,还有和贝塞尔曲线作对比的折线图。效果如图一。辅助点的坐标全都得到了,基本的画画就比较简单了。有能力的可跳过下面这段,直接进入drawBezier(canvas)方法。基本的画画这里只贴代码,如有疑问可评论或者私信。
&code class="hljs java"&&&& /** 画原始点 */
&&&&private void drawPoints(Canvas canvas) {
&&&&&&&&mPaint.setStrokeWidth(POINTWIDTH);
&&&&&&&&for (int i = 0; i & mPoints.size(); i++) {
&&&&&&&&&&&&canvas.drawPoint(mPoints.get(i).x, mPoints.get(i).y, mPaint);
&&&&/** 画穿越原始点的折线 */
&&&&private void drawCrossPointsBrokenLine(Canvas canvas) {
&&&&&&&&mPaint.setStrokeWidth(LINEWIDTH);
&&&&&&&&mPaint.setColor(Color.RED);
&&&&&&&&mPath.reset();
&&&&&&&&mPath.moveTo(mPoints.get(0).x, mPoints.get(0).y);
&&&&&&&&for (int i = 0; i & mPoints.size(); i++) {
&&&&&&&&&&&&mPath.lineTo(mPoints.get(i).x, mPoints.get(i).y);
&&&&&&&&canvas.drawPath(mPath, mPaint);
&&&&/** 画中间点 */
&&&&private void drawMidPoints(Canvas canvas) {
&&&&&&&&mPaint.setStrokeWidth(POINTWIDTH);
&&&&&&&&mPaint.setColor(Color.BLUE);
&&&&&&&&for (int i = 0; i & mMidPoints.size(); i++) {
&&&&&&&&&&&&canvas.drawPoint(mMidPoints.get(i).x, mMidPoints.get(i).y, mPaint);
&&&&/** 画中间点的中间点 */
&&&&private void drawMidMidPoints(Canvas canvas) {
&&&&&&&&mPaint.setColor(Color.YELLOW);
&&&&&&&&for (int i = 0; i & mMidMidPoints.size(); i++) {
&&&&&&&&&&&&canvas.drawPoint(mMidMidPoints.get(i).x, mMidMidPoints.get(i).y, mPaint);
&&&&/** 画控制点 */
&&&&private void drawControlPoints(Canvas canvas) {
&&&&&&&&mPaint.setColor(Color.GRAY);
&&&&&&&&for (int i = 0; i & mControlPoints.size(); i++) {
&&&&&&&&&&&&canvas.drawPoint(mControlPoints.get(i).x, mControlPoints.get(i).y, mPaint);
画贝塞尔曲线
&code class="hljs avrasm"&&&& /** 画贝塞尔曲线 */
&&&&private void drawBezier(Canvas canvas) {
&&&&&&&&mPaint.setStrokeWidth(LINEWIDTH);
&&&&&&&&mPaint.setColor(Color.BLACK);
&&&&&&&&mPath.reset();
&&&&&&&&for (int i = 0; i & mPoints.size(); i++){
&&&&&&&&&&&&if (i == 0){
&&&&&&&&&&&&&&&&mPath.moveTo(mPoints.get(i).x, mPoints.get(i).y);
&&&&&&&&&&&&&&&&mPath.quadTo(mControlPoints.get(i).x, mControlPoints.get(i).y,
&&&&&&&&&&&&&&&&&&&&&&&&mPoints.get(i + 1).x,mPoints.get(i + 1).y);
&&&&&&&&&&&&}else if(i & mPoints.size() - 2){
&&&&&&&&&&&&&&&&mPath.cubicTo(mControlPoints.get(2*i-1).x,mControlPoints.get(2*i-1).y,
&&&&&&&&&&&&&&&&&&&&&&&&mControlPoints.get(2*i).x,mControlPoints.get(2*i).y,
&&&&&&&&&&&&&&&&&&&&&&&&mPoints.get(i+1).x,mPoints.get(i+1).y);
&&&&&&&&&&&&}else if(i == mPoints.size() - 2){
&&&&&&&&&&&&&&&&mPath.moveTo(mPoints.get(i).x, mPoints.get(i).y);
&&&&&&&&&&&&&&&&mPath.quadTo(mControlPoints.get(mControlPoints.size()-1).x,mControlPoints.get(mControlPoints.size()-1).y,
&&&&&&&&&&&&&&&&&&&&&&&&mPoints.get(i+1).x,mPoints.get(i+1).y);
&&&&&&&&&&&&}
&&&&&&&&canvas.drawPath(mPath,mPaint);
注释太详细,都没什么好写的了。不过这里需要注意判断里面的条件,对起点和终点的判断一定要理解。要不然很可能会送你一个ArrayIndexOutOfBoundsException。
贝塞尔曲线可以实现很多绚丽的效果,难的不是贝塞尔,而是good idea。
研究一下贝塞尔曲线.
贝塞尔方程&
&&&&private&class&BeizerEvaluator&implements&TypeEvaluator&PointF&&{&&
&&&&&&&&private&PointF&point1;&&
&&&&&&&&private&PointF&point2;&&
&&&&&&&&private&PointF&pointF;&&
&&&&&&&&public&BeizerEvaluator(PointF&point1,&PointF&point2)&{&&
&&&&&&&&&&&&this.point1&=&point1;&&
&&&&&&&&&&&&this.point2&=&point2;&&
&&&&&&&&}&&
&&&&&&&&@Override&&
&&&&&&&&public&PointF&evaluate(float&time,&PointF&start,&PointF&end)&{&&
&&&&&&&&&&&&float&timeLeft&=&1.0f&-&&&
&&&&&&&&&&&&pointF&=&new&PointF();
&&&&&&&&&&&&PointF&point0&=&
&&&&&&&&&&&&PointF&point3&=&
&&&&&&&&&&&&pointF.x&=&timeLeft&*&timeLeft&*&timeLeft&*&(point0.x)&&
&&&&&&&&&&&&&&&&&&&&+&3&*&timeLeft&*&timeLeft&*&time&*&(point1.x)&&
&&&&&&&&&&&&&&&&&&&&+&3&*&timeLeft&*&time&*&time&*&(point2.x)&&
&&&&&&&&&&&&&&&&&&&&+&time&*&time&*&time&*&(point3.x);&&
&&&&&&&&&&&&pointF.y&=&timeLeft&*&timeLeft&*&timeLeft&*&(point0.y)&&
&&&&&&&&&&&&&&&&&&&&+&3&*&timeLeft&*&timeLeft&*&time&*&(point1.y)&&
&&&&&&&&&&&&&&&&&&&&+&3&*&timeLeft&*&time&*&time&*&(point2.y)&&
&&&&&&&&&&&&&&&&&&&&+&time&*&time&*&time&*&(point3.y);&&
&&&&&&&&&&&&return&pointF;&&
&&&&&&&&}&&
&&&&&&&&BeizerEvaluator&evaluator&=&new&BeizerEvaluator(getPointF(1),&getPointF(2));&&
&&&&&&&&ValueAnimator&animator&=&ValueAnimator.ofObject(evaluator,&new&PointF(rand.nextInt(getWidth()),&0),&new&PointF(rand.nextInt(getWidth()),&mHeight&-&dHeight));
&&&&&&&&animator.addUpdateListener(new&BezierListenr(tag));&&
&&&&&&&&animator.setInterpolator(interpolators[rand.nextInt(3)]);&&
&&&&&&&&animator.setTarget(tag);&&
&&&&&&&&animator.setDuration(3000);&&
然后在需要更新的时候去Update设置imageVIew的路径:
private&class&BezierListenr&implements&ValueAnimator.AnimatorUpdateListener&{&&
&&&&&&&&private&View&&&
&&&&&&&&public&BezierListenr(View&target)&{&&
&&&&&&&&&&&&this.target&=&&&
&&&&&&&&}&&
&&&&&&&&@Override&&
&&&&&&&&public&void&onAnimationUpdate(ValueAnimator&animation)&{&&
&&&&&&&&&&&&PointF&pointF&=&(PointF)&animation.getAnimatedValue();&&
&&&&&&&&&&&&ViewHelper.setX(target,&pointF.x);&&
&&&&&&&&&&&&ViewHelper.setY(target,&pointF.y);&&
&&&&&&&&&&&&ViewHelper.setAlpha(target,&1&-&animation.getAnimatedFraction());&&
&&&&&&&&}&&
GitHub:/q422013/BezierFlower
阅读(...) 评论()}

我要回帖

更多关于 java 贝塞尔曲线库 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信