原文链接：
http://blog.csdn.net/sangxiaonian/article/details/51984013
http://blog.csdn.net/sangxiaonian/article/details/51984584
http://blog.csdn.net/sangxiaonian/article/details/51985405
其他参考链接：
https://www.jianshu.com/p/55c721887568
作为一个有只志向的码农,除了知道一些基本的知识够自己努力搬砖以外,还应该get一些更炫酷的技能,用更优雅的姿势进行搬砖;想要实现一些十分炫酷的效果,贝塞尔曲线就必须进行一些研究了;
最近一段时间,我对贝塞尔曲线进行了部分的研究,因此就打算写贝塞尔曲线系列的文章来记录自己的研究;
规矩我都懂 !
我明白,必须先上图,要不然大家都没兴趣看下去
先看比较简单的,贝塞尔曲线的一阶和二阶的应用
看到二阶的贝塞尔曲线有没有感觉很眼熟,没错,360的下火箭弹射时候的小弹弓,还有滑动控件的阴影提示;以前的时候很多小伙伴跟我说这要计算多少数据啊,完全没办法实现啊,现在有了贝塞尔曲线,可以很简单的实现这一个功能;
不过完全不能这样满足啊,接下来还有更复杂一些的曲线
没错,这个就是三阶的使用,有没有感觉路线更加复杂,不过还好,使用贝塞尔去玩完全可以轻松实现;对了,还有一个心在沿着曲线移动,看到这里,小伙伴们肯定会想到满屏幕的心在飞的场景,放心,这个我也实现了,在接下来的文章里,我会一一进行讲解;
图片看完了,现在简单了解贝塞尔曲线
Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。 曲线定义：起始点、终止点（也称锚点）、控制点。通过调整控制点，贝塞尔曲线的形状会发生变化。 1962年，法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法，并给出了详细的计算公式，因此按照这样的公式绘制出来的曲线就用他的姓氏来命名，称为贝塞尔曲线。
以下公式中：B(t)为t时间下 点的坐标；
P0为起点,Pn为终点,Pi为控制点
一阶贝塞尔曲线(线段)：
意义：由 P0 至 P1 的连续点， 描述的一条线段
二阶贝塞尔曲线(抛物线)：
原理：由 P0 至 P1 的连续点 Q0，描述一条线段。
由 P1 至 P2 的连续点 Q1，描述一条线段。
由 Q0 至 Q1 的连续点 B(t)，描述一条二次贝塞尔曲线。
经验：P1-P0为曲线在P0处的切线。
三阶贝塞尔曲线：
通用公式：
利用贝塞尔曲线的这些特性,我们可以画出很多炫酷的曲线,所以贝塞尔曲线还是值得我们去研究学习的;
但是这些完全记不住啊!!!
没关系,可以很负责的说,我也是!!!!!
上面的曲线完全是来自http://blog.csdn.net/tianhai110/article/details/2203572
所以,如果你的数学和我一样是体育老师教的,就忘记这些吧,跟我一起看看android中是实现一条贝塞尔曲线的,android已经帮我们实现好了,剩下的就需要我们进行简单使用,具体的使用,就看下一篇中讲解
最后附上源码:https://github.com/sangxiaonian/BezierIntroduce.git
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
上一篇中我简单的介(粘)绍(贴)了一下贝塞尔曲线(Bezier)曲线的原理和公式,但是作为数学界排的上名号的渣渣,我只能默默的溜过;
不过还好,android帮我们实现好了这个贝塞尔曲线的使用;
Path
这个类中封装了要使用贝塞尔曲线(Bezier)的简单方法;使用起来也很简单,总的来说也只有三步
- 初始化Path
mPath = new Path();
- path移动到起点
mPath.moveTo(startX, startY / 3);
- 确定直线的终点
mPath.lineTo(endX, endY / 3);
- 调用canvas绘制贝塞尔曲线
canvas.drawPath(mPath, mPaint);
好了,到这里一阶的一条直线就完成了;
但是这个完全没任何卵用啊,就一条直线有木有!!
但是,我们可以一直画下去,就像这样:
path.moveTo(touchX + getWidth() / 20, touchY - getHeight() / 10);
path.lineTo(touchX + getWidth() / 20, touchY);
path.lineTo(touchX - getWidth() / 20, touchY);
path.lineTo(touchX - getWidth() / 20, touchY - getHeight() / 10);
path.lineTo(touchX, touchY - getHeight() / 7);
path.lineTo(touchX + getWidth() / 20, touchY - getHeight() / 10 + 2);
这段代码绘制完成之后就是一个随着手指一动的小火箭了
丑爆了有木有,不过还好,如果是大神的话应该可以绘制成一个比较好一些的了吧,主要还是原理,相对于自己直接画直线,已经大大简化了;
二阶曲线
二阶曲线在安卓中的定义也是很简单的,就是调用quadTo方法,
mPath.moveTo(startX, startY);
mPath.quadTo(touchX, touchY, endX, endY);
canvas.drawPath(mPath, mPaint);
不管是几阶的,都是要先moveTo到起点;
三阶曲线 ##
mPath.moveTo(pointFStart.x, pointFStart.y);
mPath.cubicTo(pointFFirst.x, pointFFirst.y, pointFSecond.x, pointFSecond.y, pointFEnd.x, pointFEnd.y);
canvas.drawPath(mPath, mPaint);
途中从下倒上,四个点依次是pointFStart,pointFFirst,pointFSecond,pointFSecond;根本没什么难度,非常简单,可以直接使用,上篇提到的”心”的移动就是按照这个轨迹进行移动,所以看起来十分顺滑,效果也不错;
贝塞尔曲线的绘制本身并没有什么难度,这些都是很基础的一些东西,但是却能实现一些很炫酷的效果,比如qq上的粘性控件的效果等,这些都可以实现;
好了,简单的使用就介绍到这里了,下一篇我会利用贝塞尔曲线实现一些炫酷的效果
最后附上源码:https://github.com/sangxiaonian/BezierIntroduce.git
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
这一篇文章会完整的介绍如何通过贝塞尔曲线实现爱心点赞的效果,如果实在看不懂,可以看第一篇贝塞尔曲线的简介,还有第二篇安卓中的简单使用;
好了,终于到了放大招的时候了,真实憋了很久了
先做一些准备工作,绘制各种颜色的红心:
private Bitmap creatHeart(int color) {
int width = bitmap.getWidth();
int height = bitmap.getHeight();
Bitmap newBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(newBitmap);
canvas.drawBitmap(bitmap, 0, 0, criPaint);
canvas.drawColor(color, PorterDuff.Mode.SRC_ATOP);
canvas.setBitmap(null);
return newBitmap;
}
这里面比较关键的代码只有是 canvas.drawColor(color, PorterDuff.Mode.SRC_ATOP),关于PorterDuff,还是可以去学习了解一下的,很多时候还是很有用的,在这里简单的介绍一下;
这样就比较清晰明了了吧,这里使用的就是SRC_ATOP,去心的图形和颜色重叠部分,就是心了;
这样只要准备一个心形图片,就能实现格式各样的心了;
接下来就是进行根据轨迹进行绘制了,看过第一篇文章的,就应该根据几个点,就能绘制出来一条轨迹;这里使用属性动画,来获取相对应的轨迹;
首先
/**
* 绘制一个增值器
*/
class TypeE implements TypeEvaluator<PointF> {
private PointF pointFFirst,pointFSecond;
public TypeE(PointF start,PointF end){
this.pointFFirst =start;
this.pointFSecond = end;
}
@Override
public PointF evaluate(float fraction, PointF startValue, PointF endValue) {
PointF result = new PointF();
float left = 1 - fraction;
result.x = (float) (startValue.x*Math.pow(left,3)+3*pointFFirst.x*Math.pow(left,2)*fraction+3*pointFSecond.x*Math.pow(fraction, 2)*left+endValue.x*Math.pow(fraction,3));
result.y= (float) (startValue.y*Math.pow(left,3)+3*pointFFirst.y*Math.pow(left,2)*fraction+3*pointFSecond.y*Math.pow(fraction, 2)*left+endValue.y*Math.pow(fraction,3));
return result;
}
}
这个很简单,就是单纯的使用公式了,所以说想要绘制复杂的轨迹,我还是要重新拾起来被扔进粪坑的小学数学课本重新看看,当真是熏得泪流满面啊!!
接下来就很简单了,只要不停使用属性动画,不断变换位置就好了;
private void moveHeart(final ImageView view){
PointF pointFFirst = this.pointFFirst;
PointF pointFSecond = this.pointFSecond;
PointF pointFStart = this.pointFStart;
PointF pointFEnd = this.pointFEnd;
ValueAnimator animator = ValueAnimator.ofObject(new TypeE(pointFFirst, pointFSecond), pointFStart, pointFEnd);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
PointF value = (PointF) animation.getAnimatedValue();
view.setX(value.x);
view.setY(value.y);
}
});
animator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
AdvancePathView.this.removeView(view);
}
});
ObjectAnimator af = ObjectAnimator.ofFloat(view, "alpha", 1f, 0);
af.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
AdvancePathView.this.removeView(view);
}
});
AnimatorSet set = new AnimatorSet();
set.setDuration(3000);
set.play(animator).with(af);
set.start();
}
就是这么简单,完全没有难度啊有木有!!!
总的来说还是三步:
第一
- :绘制各种颜色的心
- 绘制一个增值器,获取轨迹
- 使用属性动画,根据轨迹移动位置
好了,到这里我这一系列的文章就结束了,两天水时间搞的,感觉稍微有点水,但是就这样啦,毕竟本身不是很难的东西,有什么问题可以问我,有时间一定会耐心解答的;