GitHub地址:

一句话归纳贝塞尔曲线:将随意一条曲线转化为标准的数学公式。

先上效果图

洋洋制图工具中的钢笔工具,正是出色的贝塞尔曲线的选择,这里的二个网址能够在线模拟钢笔工具的应用:

图片 1

那一个效能来自于三星(Samsung)S5的充电分界面,版权归Samsung全体,这里只有是技巧达成.

图片 22.png

电瓶背景

因为电瓶内部有少数个部分,所以本例用了一个Grid来做背景,用Clip属性剪切出二个电瓶的差十分的少,这样不唯有显得出三个电池的轮廓,还足以制止水波和气泡跑展现Grid的外面.

Clip的个中,是贰个Path形状.具体画法就十分少说了,此前写过.有意思味的同学看这里:

图片 3

贝塞尔曲线中有生龙活虎对相比较关键的名词,解释如下:

表示电量的液体效果

全体液体分两有些,下面是波浪,下边是矩形.进程值实际决定的是矩形的中度.三个控件放到StackPanel中,让上面包车型大巴矩形往上顶.最后给波浪后面部分Margin值为-1,使其看起来未有间隙.

图片 4

波浪是用贝塞尔曲线实现的,首先介绍下贝塞尔曲线

图片 5

贝塞尔曲线有4个点,起源终点和多个调节点.(此括号里的能够不看:上海体育场面案的并不标准,因为调节点并不一定在曲线上).通过八个调节点决定曲线的路线.

生硬上海体育地方那本人就是个波浪形.使用点动画PointAnimation调控七个点光景运动就有了波浪的动态效果.注意五个卡通时间毫无同样,不然看起来动画太假.多少个时刻错开一丝丝就好了.

图片 6

波浪部分宽度是50,高度是5

图片 7

  • 数总局:平日指一条路子的初始点和终止点
  • 调节点:调节点决定了一条门路的曲折轨迹,依照调整点的个数,贝塞尔曲线被分为后生可畏阶贝塞尔曲线、二阶贝塞尔曲线、三阶贝塞尔曲线等等。

气泡效果

此间的血泡效果正是个规范的粒子效果,并且是最简易的这种,并不涉及到怎么复杂的公式总计.

简要介绍下原理:这里的血泡能够看成是圆依照一定的进程不断的上升(改动Y轴坐标).所以规定二个速率,规定二个相差,使用帧动画CompositionTarget.Rendering,在每意气风发帧都在Y轴上加这一个速率在意气风发帧移动的距离.然后推断又没达到规定的间距.要是达到,移除那一个圈子,不然继续上升.

气泡能够分为三个部分:

1.电瓶内部的气泡.大小适当,移动速度最慢,移动间距最短.

2.显示器底边的大气泡,个头超级大,移动速度比较慢,移动间隔非常的短.

3.显示屏底边的小气泡,个头矮小,移动速度非常的慢,移动间距较远.

新建多个Class,用来表示气泡音讯

图片 8

中间八个重大性质,叁个是速率,贰个是气泡要求活动的间隔.这两本天性决定了血泡的移动轨迹.第两个属性是用来剖断气泡是还是不是到位了重任,第四个属性是增加七个对气泡的援引,那样有助于在后台调控气泡.

概念七个汇聚,用来贮存在三局地的血泡新闻.

在帧渲染事件内,遍历八个会集.让群集里的各类气泡都向上移动(Canvas.SetTop),剖断气泡是还是不是早已移动了钦赐的间隔,是的话就在页面移除气泡,会集也移除该气泡音讯.判别集结的Count是还是不是破罐破摔规定个个数,若是低于,就向页面增加气泡,群集增添气泡消息.

要想对贝塞尔曲线有三个相比较好的认知,能够参见WIKI上的链接:

画气泡

为了美貌,作者要好画了个气泡的模型,用在了大气泡上.小气泡直接用的扁圆形,因为即接收模型,因为太小,也看不出来.实际上海大学气泡也有个别看得出来.可是既然写了,依旧介绍下吧.

图片 9

先是这么些气泡正是个ViewBox.方便缩放.

差相当少是个正圆,Fill给了个渐变画刷,向外不断狠抓,在最外面0.85-1的有的是最深的.四个点的景逸SUV都以20,B都以10,血牙红部分G依次减小,分别是240,150,100.

图片 10

右上面的月牙是个Path,给了个半径是10的模糊效果.Fill是半透明的石榴红.月牙的画法就是四个弧线,起源和终端相近,半径分歧.

图片 11

左上角的亮点便是五个椭圆,和月牙相通.半径是10的模糊效果.Fill是半晶莹剔透的松石绿.

 

2016-12-19更新:

发布到GitHub,地址:

源码下载: 苹果手提式有线电电话机电瓶充电效果.rar

图片 121.png

在Android中,平时的话,开荒者只记挂二阶贝塞尔曲线和三阶贝塞尔曲线,SDK也只提供了二阶和三阶的API调用。对于再高阶的贝塞尔曲线,常常可以将曲线拆分成四个低阶的贝塞尔曲线,也便是所谓的降阶操作。下边将透过代码来效仿二阶和三阶的贝塞尔曲线是哪些绘制和调整的。

贝塞尔曲线的三个比较好的动态演示如下所示:

图片 1320.png

二阶模拟

二阶贝塞尔曲线在Android中的API为:quadTo()和rQuadTo(),那七个API在常理上是能够相互调换的——quadTo是依据相对坐标,而rQuadTo是依照相对坐标,所从前边笔者都只以中间一个来实行讲授。

先来看下最后的效应:

图片 143.gif

从前边的牵线能够清楚,二阶贝塞尔曲线有多少个数分公司和三个调节点,只需求在代码中绘制出那么些扶助点和帮忙线就能够,同期,调节点能够经过onTouch伊夫nt来进展传递。

package com.xys.animationart.views;import android.content.Context;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.Path;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;/** * 二阶贝塞尔曲线 * <p/> * Created by xuyisheng on 16/7/11. */public class SecondOrderBezier extends View { private Paint mPaintBezier; private Paint mPaintAuxiliary; private Paint mPaintAuxiliaryText; private float mAuxiliaryX; private float mAuxiliaryY; private float mStartPointX; private float mStartPointY; private float mEndPointX; private float mEndPointY; private Path mPath = new Path(); public SecondOrderBezier(Context context) { super; } public SecondOrderBezier(Context context, AttributeSet attrs) { super(context, attrs); mPaintBezier = new Paint(Paint.ANTI_ALIAS_FLAG); mPaintBezier.setStyle(Paint.Style.STROKE); mPaintBezier.setStrokeWidth; mPaintAuxiliary = new Paint(Paint.ANTI_ALIAS_FLAG); mPaintAuxiliary.setStyle(Paint.Style.STROKE); mPaintAuxiliary.setStrokeWidth; mPaintAuxiliaryText = new Paint(Paint.ANTI_ALIAS_FLAG); mPaintAuxiliaryText.setStyle(Paint.Style.STROKE); mPaintAuxiliaryText.setTextSize; } public SecondOrderBezier(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mStartPointX = w / 4; mStartPointY = h / 2 - 200; mEndPointX = w / 4 * 3; mEndPointY = h / 2 - 200; } @Override protected void onDraw(Canvas canvas) { super.onDraw; mPath.reset(); mPath.moveTo(mStartPointX, mStartPointY); // 辅助点 canvas.drawPoint(mAuxiliaryX, mAuxiliaryY, mPaintAuxiliary); canvas.drawText("控制点", mAuxiliaryX, mAuxiliaryY, mPaintAuxiliaryText); canvas.drawText("起始点", mStartPointX, mStartPointY, mPaintAuxiliaryText); canvas.drawText("终止点", mEndPointX, mEndPointY, mPaintAuxiliaryText); // 辅助线 canvas.drawLine(mStartPointX, mStartPointY, mAuxiliaryX, mAuxiliaryY, mPaintAuxiliary); canvas.drawLine(mEndPointX, mEndPointY, mAuxiliaryX, mAuxiliaryY, mPaintAuxiliary); // 二阶贝塞尔曲线 mPath.quadTo(mAuxiliaryX, mAuxiliaryY, mEndPointX, mEndPointY); canvas.drawPath(mPath, mPaintBezier); } @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction { case MotionEvent.ACTION_MOVE: mAuxiliaryX = event.getX(); mAuxiliaryY = event.getY(); invalidate(); } return true; }}

三阶模拟

三阶贝塞尔曲线在Android中的API为:cubicTo()和rCubicTo(),那多个API在常理上是足以并行转换的——quadTo是依附相对坐标,而rCubicTo是基于相对坐标,所早前边笔者都只以在那之中一个来开展教学。

有了二阶的根底,再来模拟三阶就非常轻巧了,无非是加多了多个调整点而已,先看下效果图:

图片 154.gif

代码只须要在二阶的根基上增添一些帮忙点即可,上面只交给一些生死攸关代码,详细代码请参见Github:

 @Override protected void onDraw(Canvas canvas) { super.onDraw; mPath.reset(); mPath.moveTo(mStartPointX, mStartPointY); // 辅助点 canvas.drawPoint(mAuxiliaryOneX, mAuxiliaryOneY, mPaintAuxiliary); canvas.drawText("控制点1", mAuxiliaryOneX, mAuxiliaryOneY, mPaintAuxiliaryText); canvas.drawText("控制点2", mAuxiliaryTwoX, mAuxiliaryTwoY, mPaintAuxiliaryText); canvas.drawText("起始点", mStartPointX, mStartPointY, mPaintAuxiliaryText); canvas.drawText("终止点", mEndPointX, mEndPointY, mPaintAuxiliaryText); // 辅助线 canvas.drawLine(mStartPointX, mStartPointY, mAuxiliaryOneX, mAuxiliaryOneY, mPaintAuxiliary); canvas.drawLine(mEndPointX, mEndPointY, mAuxiliaryTwoX, mAuxiliaryTwoY, mPaintAuxiliary); canvas.drawLine(mAuxiliaryOneX, mAuxiliaryOneY, mAuxiliaryTwoX, mAuxiliaryTwoY, mPaintAuxiliary); // 三阶贝塞尔曲线 mPath.cubicTo(mAuxiliaryOneX, mAuxiliaryOneY, mAuxiliaryTwoX, mAuxiliaryTwoY, mEndPointX, mEndPointY); canvas.drawPath(mPath, mPaintBezier); }

模仿网页

如下所示的网页,模拟了三阶贝塞尔曲线的绘图,能够通过拖动曲线来赢得多少个调整点的坐标,而开头点分别是和。

图片 1616.png

通过这几个网页,也可以相比便利的收获三阶贝塞尔曲线的主宰点坐标。

圆滑绘图

当在显示屏上制图路线时,比如手写板,最中央的办法是因而Path.lineTo将相继触点连接起来,而这种办法在不菲时候会意识,四个点的接连几日是十三分刚强的,因为它毕竟是经过直线来连接的,假诺经过二阶贝塞尔曲线来将逐个触点连接,就能圆滑的多,不会现身太多的平板连接。

先来看下代码,特简单的绘图路线代码:

package com.xys.animationart.views;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.MotionEvent;import android.view.View;import android.view.ViewConfiguration;/** * 圆滑路径 * <p/> * Created by xuyisheng on 16/7/19. */public class DrawPadBezier extends View { private float mX; private float mY; private float offset = ViewConfiguration.get(getContext.getScaledTouchSlop(); private Paint mPaint; private Path mPath; public DrawPadBezier(Context context) { super; } public DrawPadBezier(Context context, AttributeSet attrs) { super(context, attrs); mPath = new Path(); mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth; mPaint.setColor(Color.RED); } public DrawPadBezier(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction { case MotionEvent.ACTION_DOWN: mPath.reset(); float x = event.getX(); float y = event.getY(); mX = x; mY = y; mPath.moveTo; break; case MotionEvent.ACTION_MOVE: float x1 = event.getX(); float y1 = event.getY(); float preX = mX; float preY = mY; float dx = Math.abs(x1 - preX); float dy = Math.abs(y1 - preY); if (dx >= offset || dy >= offset) { // 贝塞尔曲线的控制点为起点和终点的中点 float cX = (x1 + preX) / 2; float cY = (y1 + preY) / 2;// mPath.quadTo(preX, preY, cX, cY); mPath.lineTo; mX = x1; mY = y1; } } invalidate(); return true; } @Override protected void onDraw(Canvas canvas) { super.onDraw; canvas.drawPath(mPath, mPaint); }}

先来看下通过mPath.lineTo来贯彻的绘图,效果如下所示:

图片 1718.png

图表中的拐点有令人瞩指标锯齿效果,即通过直线的接连,再来看下通过贝塞尔曲线来再而三的成效,通常景况下,贝塞尔曲线的支配点取四个三回九转点的宗旨:

mPath.quadTo(preX, preY, cX, cY);

经过二阶贝塞尔曲线的连年效果如图所示:

图片 1819.png

能够鲜明的意识,曲线变得更其油滑了。

曲线变形

透过垄断(monopoly)贝塞尔曲线的调整点,就能够兑现对一条路子的退换。所以,利用贝塞尔曲线,能够达成广大的路子动画,举个例子:

图片 195.gif

package com.xys.animationart;import android.animation.ValueAnimator;import android.content.Context;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.Path;import android.util.AttributeSet;import android.view.View;import android.view.animation.BounceInterpolator;/** * 曲线变形 * <p/> * Created by xuyisheng on 16/7/11. */public class PathMorphBezier extends View implements View.OnClickListener{ private Paint mPaintBezier; private Paint mPaintAuxiliary; private Paint mPaintAuxiliaryText; private float mAuxiliaryOneX; private float mAuxiliaryOneY; private float mAuxiliaryTwoX; private float mAuxiliaryTwoY; private float mStartPointX; private float mStartPointY; private float mEndPointX; private float mEndPointY; private Path mPath = new Path(); private ValueAnimator mAnimator; public PathMorphBezier(Context context) { super; } public PathMorphBezier(Context context, AttributeSet attrs) { super(context, attrs); mPaintBezier = new Paint(Paint.ANTI_ALIAS_FLAG); mPaintBezier.setStyle(Paint.Style.STROKE); mPaintBezier.setStrokeWidth; mPaintAuxiliary = new Paint(Paint.ANTI_ALIAS_FLAG); mPaintAuxiliary.setStyle(Paint.Style.STROKE); mPaintAuxiliary.setStrokeWidth; mPaintAuxiliaryText = new Paint(Paint.ANTI_ALIAS_FLAG); mPaintAuxiliaryText.setStyle(Paint.Style.STROKE); mPaintAuxiliaryText.setTextSize; setOnClickListener; } public PathMorphBezier(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mStartPointX = w / 4; mStartPointY = h / 2 - 200; mEndPointX = w / 4 * 3; mEndPointY = h / 2 - 200; mAuxiliaryOneX = mStartPointX; mAuxiliaryOneY = mStartPointY; mAuxiliaryTwoX = mEndPointX; mAuxiliaryTwoY = mEndPointY; mAnimator = ValueAnimator.ofFloat(mStartPointY, ; mAnimator.setInterpolator(new BounceInterpolator; mAnimator.setDuration; mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { mAuxiliaryOneY =  valueAnimator.getAnimatedValue(); mAuxiliaryTwoY =  valueAnimator.getAnimatedValue(); invalidate; } @Override protected void onDraw(Canvas canvas) { super.onDraw; mPath.reset(); mPath.moveTo(mStartPointX, mStartPointY); // 辅助点 canvas.drawPoint(mAuxiliaryOneX, mAuxiliaryOneY, mPaintAuxiliary); canvas.drawText("辅助点1", mAuxiliaryOneX, mAuxiliaryOneY, mPaintAuxiliaryText); canvas.drawText("辅助点2", mAuxiliaryTwoX, mAuxiliaryTwoY, mPaintAuxiliaryText); canvas.drawText("起始点", mStartPointX, mStartPointY, mPaintAuxiliaryText); canvas.drawText("终止点", mEndPointX, mEndPointY, mPaintAuxiliaryText); // 辅助线 canvas.drawLine(mStartPointX, mStartPointY, mAuxiliaryOneX, mAuxiliaryOneY, mPaintAuxiliary); canvas.drawLine(mEndPointX, mEndPointY, mAuxiliaryTwoX, mAuxiliaryTwoY, mPaintAuxiliary); canvas.drawLine(mAuxiliaryOneX, mAuxiliaryOneY, mAuxiliaryTwoX, mAuxiliaryTwoY, mPaintAuxiliary); // 三阶贝塞尔曲线 mPath.cubicTo(mAuxiliaryOneX, mAuxiliaryOneY, mAuxiliaryTwoX, mAuxiliaryTwoY, mEndPointX, mEndPointY); canvas.drawPath(mPath, mPaintBezier); } @Override public void onClick(View view) { mAnimator.start(); }}

此地正是简单的退换二阶贝塞尔曲线的调节点来落到实处曲线的变形。

英特网一些相比复杂的变形动画效果,也是基于这种完毕方式,其规律都以由此转移调节点的职务,进而完毕对图片的退换,例如圆形到心形的生成、圆形到五角星的转换,等等。

波浪效果

波浪的绘图是贝塞尔曲线三个特别轻松的施用,而让波浪实行波动,其实并没有必要对调节点举办更换,而是能够透过位移来实现,这里大家是依附贝塞尔曲线来得以完成波浪的绘图效果,效果如图所示:

图片 206.gif

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;/** * 波浪图形 * <p/> * Created by xuyisheng on 16/7/11. */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; } 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; } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mScreenHeight = h; mScreenWidth = w; mWaveCount =  Math.round(mScreenWidth / mWaveLength + 1.5); mCenterY = mScreenHeight / 2; } @Override protected void onDraw(Canvas canvas) { super.onDraw; 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; animator.setRepeatCount(ValueAnimator.INFINITE); animator.setInterpolator(new LinearInterpolator; animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mOffset =  animation.getAnimatedValue(); postInvalidate; animator.start(); }}

波浪动画实际上并不复杂,但三角函数确实对生龙活虎部分开荒者相比较劳碌,开辟者能够透过上面包车型地铁这几个网址来效仿三角函数图像的绘图:

图片 2117.png

路径动画

贝塞尔曲线的另一个要命常用的作用,就是作为动画的活动轨迹,让动画指标能够沿曲线平滑的完结移动动画,也正是让实体沿着贝塞尔曲线运动,实际不是教条主义的直线,本例达成效果与利益如下所示:

图片 227.gif

package com.xys.animationart.views;import android.animation.ValueAnimator;import android.content.Context;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.Path;import android.graphics.PointF;import android.util.AttributeSet;import android.view.View;import android.view.animation.AccelerateDecelerateInterpolator;import com.xys.animationart.evaluator.BezierEvaluator;/** * 贝塞尔路径动画 * <p/> * Created by xuyisheng on 16/7/12. */public class PathBezier extends View implements View.OnClickListener { private Paint mPathPaint; private Paint mCirclePaint; private int mStartPointX; private int mStartPointY; private int mEndPointX; private int mEndPointY; private int mMovePointX; private int mMovePointY; private int mControlPointX; private int mControlPointY; private Path mPath; public PathBezier(Context context) { super; } public PathBezier(Context context, AttributeSet attrs) { super(context, attrs); mPathPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPathPaint.setStyle(Paint.Style.STROKE); mPathPaint.setStrokeWidth; mCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG); mStartPointX = 100; mStartPointY = 100; mEndPointX = 600; mEndPointY = 600; mMovePointX = mStartPointX; mMovePointY = mStartPointY; mControlPointX = 500; mControlPointY = 0; mPath = new Path(); setOnClickListener; } public PathBezier(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onDraw(Canvas canvas) { super.onDraw; mPath.reset(); canvas.drawCircle(mStartPointX, mStartPointY, 30, mCirclePaint); canvas.drawCircle(mEndPointX, mEndPointY, 30, mCirclePaint); mPath.moveTo(mStartPointX, mStartPointY); mPath.quadTo(mControlPointX, mControlPointY, mEndPointX, mEndPointY); canvas.drawPath(mPath, mPathPaint); canvas.drawCircle(mMovePointX, mMovePointY, 30, mCirclePaint); } @Override public void onClick(View view) { BezierEvaluator bezierEvaluator = new BezierEvaluator(new PointF(mControlPointX, mControlPointY)); ValueAnimator anim = ValueAnimator.ofObject(bezierEvaluator, new PointF(mStartPointX, mStartPointY), new PointF(mEndPointX, mEndPointY)); anim.setDuration; anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { PointF point =  valueAnimator.getAnimatedValue(); mMovePointX =  point.x; mMovePointY =  point.y; invalidate; anim.setInterpolator(new AccelerateDecelerateInterpolator; anim.start(); }}

里面,用于转移运动点坐标的首要evaluator如下所示:

package com.xys.animationart.evaluator;import android.animation.TypeEvaluator;import android.graphics.PointF;import com.xys.animationart.util.BezierUtil;public class BezierEvaluator implements TypeEvaluator<PointF> { private PointF mControlPoint; public BezierEvaluator(PointF controlPoint) { this.mControlPoint = controlPoint; } @Override public PointF evaluate(float t, PointF startValue, PointF endValue) { return BezierUtil.CalculateBezierPointForQuadratic(t, startValue, mControlPoint, endValue); }}

此间的TypeEvaluator总计用到了计算贝塞尔曲线上点的算总结法,这一个会在后边继续上课。

求贝塞尔曲线上随意一点的坐标

求贝塞尔曲线上放肆一点的坐标,那生龙活虎进度,就是利用了De Casteljau算法。

图片 237.png

行使那大器晚成算法,有开辟者开垦了二个示范多阶贝塞尔曲线的机能的App,其原理正是经过绘制贝塞尔曲线上的点来张开绘图的,地址如下所示:

上面那篇小说就详细的解说了该算法的运用,小编的代码也从今以后间提取而来:

计算

有了公式,只要求代码完成就OK了,大家先写八个公式:

package com.xys.animationart.util;import android.graphics.PointF;/** * 计算贝塞尔曲线上的点坐标 * <p/> * Created by xuyisheng on 16/7/13. */public class BezierUtil { /** * B = ^2 * P0 + 2t *  * P1 + t^2 * P2, t ∈ [0,1] * * @param t 曲线长度比例 * @param p0 起始点 * @param p1 控制点 * @param p2 终止点 * @return t对应的点 */ public static PointF CalculateBezierPointForQuadratic(float t, PointF p0, PointF p1, PointF p2) { PointF point = new PointF(); float temp = 1 - t; point.x = temp * temp * p0.x + 2 * t * temp * p1.x + t * t * p2.x; point.y = temp * temp * p0.y + 2 * t * temp * p1.y + t * t * p2.y; return point; } /** * B = P0 * ^3 + 3 * P1 * t * ^2 + 3 * P2 * t^2 *  + P3 * t^3, t ∈ [0,1] * * @param t 曲线长度比例 * @param p0 起始点 * @param p1 控制点1 * @param p2 控制点2 * @param p3 终止点 * @return t对应的点 */ public static PointF CalculateBezierPointForCubic(float t, PointF p0, PointF p1, PointF p2, PointF p3) { PointF point = new PointF(); float temp = 1 - t; point.x = p0.x * temp * temp * temp + 3 * p1.x * t * temp * temp + 3 * p2.x * t * t * temp + p3.x * t * t * t; point.y = p0.y * temp * temp * temp + 3 * p1.y * t * temp * temp + 3 * p2.y * t * t * temp + p3.y * t * t * t; return point; }}

大家来将路线绘制到View中,看是或不是科学:

package com.xys.animationart.views;import android.animation.AnimatorSet;import android.animation.ValueAnimator;import android.content.Context;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.PointF;import android.util.AttributeSet;import android.view.View;import com.xys.animationart.util.BezierUtil;/** * 通过计算模拟二阶、三阶贝塞尔曲线 * <p/> * Created by xuyisheng on 16/7/13. */public class CalculateBezierPointView extends View implements View.OnClickListener { private Paint mPaint; private ValueAnimator mAnimatorQuadratic; private ValueAnimator mAnimatorCubic; private PointF mPointQuadratic; private PointF mPointCubic; public CalculateBezierPointView(Context context) { super; } public CalculateBezierPointView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } public CalculateBezierPointView(Context context, AttributeSet attrs) { super(context, attrs); mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mAnimatorQuadratic = ValueAnimator.ofFloat; mAnimatorQuadratic.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { PointF point = BezierUtil.CalculateBezierPointForQuadratic(valueAnimator.getAnimatedFraction(), new PointF, new PointF, new PointF); mPointQuadratic.x = point.x; mPointQuadratic.y = point.y; invalidate; mAnimatorCubic = ValueAnimator.ofFloat; mAnimatorCubic.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { PointF point = BezierUtil.CalculateBezierPointForCubic(valueAnimator.getAnimatedFraction(), new PointF, new PointF(100, 1100), new PointF(500, 1000), new PointF); mPointCubic.x = point.x; mPointCubic.y = point.y; invalidate; mPointQuadratic = new PointF(); mPointQuadratic.x = 100; mPointQuadratic.y = 100; mPointCubic = new PointF(); mPointCubic.x = 100; mPointCubic.y = 600; setOnClickListener; } @Override protected void onDraw(final Canvas canvas) { super.onDraw; canvas.drawCircle(mPointQuadratic.x, mPointQuadratic.y, 10, mPaint); canvas.drawCircle(mPointCubic.x, mPointCubic.y, 10, mPaint); } @Override public void onClick(View view) { AnimatorSet set = new AnimatorSet(); set.playTogether(mAnimatorQuadratic, mAnimatorCubic); set.setDuration; set.start(); }}

本次我们并从未经过API提供的贝塞尔曲线绘制方法来绘制二阶、三阶贝塞尔曲线,而是通过时间t和开头点来计量一条贝塞尔曲线上的全数一点,能够窥见,通过算法总括出来的点,与通过API所绘制出来的点,是全然适合的。

贝塞尔曲线有二个格外常用的卡通效果——MetaBall算法。相信广大开拓者都见过相近的动画,比如QQ的小红点驱除,UC浏览器的下拉刷新loading等等。要办好那些动画,实际上最重要的正是经过贝塞尔曲线来拟合多个图形。

功用如图所示:

图片 248.png

矩形拟合

笔者们来看一下拟合的原理,实际上就是经过贝塞尔曲线来接二连三几个圆上的多个点,当大家调度下画笔的填写情势,并绘制一些扶持线,大家来看具体是如何举行拟合的,如图所示:

图片 259.png

能够窥见,调节点为两圆圆心连线的中部,连接线为图中的这样一个矩形,当圆非常小时,这种经过矩形来拟合的方法差非常少是一向不难点的,但大家把圆放大,再来看下这种拟合,如图所示:

图片 2610.png

当圆的半径扩大之后,就足以非常引人瞩目标觉察拟合的连接点与圆有必然相交的区域,这样的拟合效果就不好了,大家将画笔形式调度回来,如图所示:

图片 2711.png

故此,轻松的矩形拟合,在圆半径小的时候,是足以的,但当圆半径变大之后,就须要更进一竿严酷的拟合了。

那边我们先来教学下,怎样计算矩形拟合的多少个关键点。

早先边那张线图能够看来,标红的多少个角是相等的,而这些角能够经过三个圆心的坐标来算出,有了如此七个角度,通过大切诺基x cos和 福睿斯 x
sin来计算矩形的贰个极端的坐标,形似的,其余坐标可求,关键代码如下所示:

private void metaBallVersion1(Canvas canvas) { float x = mCircleTwoX; float y = mCircleTwoY; float startX = mCircleOneX; float startY = mCircleOneY; float dx = x - startX; float dy = y - startY; double a = Math.atan; float offsetX =  (mCircleOneRadius * Math.cos; float offsetY =  (mCircleOneRadius * Math.sin; float x1 = startX + offsetX; float y1 = startY - offsetY; float x2 = x + offsetX; float y2 = y - offsetY; float x3 = x - offsetX; float y3 = y + offsetY; float x4 = startX - offsetX; float y4 = startY + offsetY; float controlX = (startX + x) / 2; float controlY = (startY + y) / 2; mPath.reset(); mPath.moveTo; mPath.quadTo(controlX, controlY, x2, y2); mPath.lineTo; mPath.quadTo(controlX, controlY, x4, y4); mPath.lineTo; // 辅助线 canvas.drawLine(mCircleOneX, mCircleOneY, mCircleTwoX, mCircleTwoY, mPaint); canvas.drawLine(0, mCircleOneY, mCircleOneX + mRadiusNormal + 400, mCircleOneY, mPaint); canvas.drawLine(mCircleOneX, 0, mCircleOneX, mCircleOneY + mRadiusNormal + 50, mPaint); canvas.drawLine(x1, y1, x2, y2, mPaint); canvas.drawLine(x3, y3, x4, y4, mPaint); canvas.drawCircle(controlX, controlY, 5, mPaint); canvas.drawLine(mCircleTwoX, mCircleTwoY, mCircleTwoX, 0, mPaint); canvas.drawLine(x1, y1, x1, mCircleOneY, mPaint); canvas.drawPath(mPath, mPaint); }

切线拟合

如前方所说,矩形拟合在半径不大的场所下,是足以兑现完美拟合的,而当半径变大后,就能并发贝塞尔曲线与圆相交的气象,导致拟合战败。

那么哪些来兑现宏观的拟合呢?实际上,也正是说贝塞尔曲线与圆的连接点到贝塞尔曲线的调控点的连线,一定是圆的切线,那样的话,无论圆的半径如何调换,贝塞尔曲线一定是与圆拟合的,具体作用如图所示:

图片 2812.png

这个时候大家把画笔情势调治回来看下填充效果,如图所示:

图片 2913.png

那样拟合是分外周密的。那么要什么来计量那么些拟合的关键点呢?在头里的线图中,小编标识出了八个角,那多个角分别能够求出,相减,就能够赢得切点与圆心的夹角了,那样,通过奥迪Q5x cos和瑞鹰 x sin就足以求出切点的坐标了。

内部,小的角能够由此多个圆心的坐标来求出,而大的角,能够通过直角三角形(圆心、切点、调控点)来求出,即调节点到圆心的间隔/半径。

要害代码如下所示:

private void metaBallVersion2(Canvas canvas) { float x = mCircleTwoX; float y = mCircleTwoY; float startX = mCircleOneX; float startY = mCircleOneY; float controlX = (startX + x) / 2; float controlY = (startY + y) / 2; float distance =  Math.sqrt((controlX - startX) * (controlX - startX) + (controlY - startY) * (controlY - startY)); double a = Math.acos(mRadiusNormal / distance); double b = Math.acos((controlX - startX) / distance); float offsetX1 =  (mRadiusNormal * Math.cos; float offsetY1 =  (mRadiusNormal * Math.sin; float tanX1 = startX + offsetX1; float tanY1 = startY - offsetY1; double c = Math.acos((controlY - startY) / distance); float offsetX2 =  (mRadiusNormal * Math.sin; float offsetY2 =  (mRadiusNormal * Math.cos; float tanX2 = startX - offsetX2; float tanY2 = startY + offsetY2; double d = Math.acos((y - controlY) / distance); float offsetX3 =  (mRadiusNormal * Math.sin; float offsetY3 =  (mRadiusNormal * Math.cos; float tanX3 = x + offsetX3; float tanY3 = y - offsetY3; double e = Math.acos((x - controlX) / distance); float offsetX4 =  (mRadiusNormal * Math.cos; float offsetY4 =  (mRadiusNormal * Math.sin; float tanX4 = x - offsetX4; float tanY4 = y + offsetY4; mPath.reset(); mPath.moveTo(tanX1, tanY1); mPath.quadTo(controlX, controlY, tanX3, tanY3); mPath.lineTo(tanX4, tanY4); mPath.quadTo(controlX, controlY, tanX2, tanY2); canvas.drawPath(mPath, mPaint); // 辅助线 canvas.drawCircle(tanX1, tanY1, 5, mPaint); canvas.drawCircle(tanX2, tanY2, 5, mPaint); canvas.drawCircle(tanX3, tanY3, 5, mPaint); canvas.drawCircle(tanX4, tanY4, 5, mPaint); canvas.drawLine(mCircleOneX, mCircleOneY, mCircleTwoX, mCircleTwoY, mPaint); canvas.drawLine(0, mCircleOneY, mCircleOneX + mRadiusNormal + 400, mCircleOneY, mPaint); canvas.drawLine(mCircleOneX, 0, mCircleOneX, mCircleOneY + mRadiusNormal + 50, mPaint); canvas.drawLine(mCircleTwoX, mCircleTwoY, mCircleTwoX, 0, mPaint); canvas.drawCircle(controlX, controlY, 5, mPaint); canvas.drawLine(startX, startY, tanX1, tanY1, mPaint); canvas.drawLine(tanX1, tanY1, controlX, controlY, mPaint); }

圆的拟合

贝塞尔曲线做动画,超级多时候都亟待选取到圆的特效,而由此二阶、三阶贝塞尔曲线来拟合圆,亦不是一个非常轻便的政工,所以,笔者一贯把结论拿出去了,具体的算法地址如下所示:

图片 3014.png图片 3115.png

有了贝塞尔曲线的调节点,再对其贯彻动画,就极其轻易了,与前面包车型客车动画片未有太大的区分。

此番的教学代码已经全体上传到Github :

接待我们提issue。

相关文章