关于贝塞尔曲线,就我目前所知的应用场景主要还是View的弧线运动上的运用
说道贝塞尔曲线,那么我们得知道贝塞尔曲线的公式
这里的贝塞尔的动图是从http://blog.csdn.net/u014120638/article/details/51027757这里直接拿来用的,在这里声明一下
一次方公式,两点之间的:
动态效果为:
二次方公式,三点之间的
动态效果为:
三次方公式,四个点之间的
动态效果为:
n次方公式,按照上面自己推敲了:
动态效果,我就不真的拿很多个点了,随意拿个示意一下:
在了解了公式之后,我们就要知道如何在我们的项目中使用这个来达到效果了
首先来一个简单的,二次方公式的演示:
代码:
float x = 0f;
float y = 0f;
private void anim(final View view){
x = 0f;
y = 0f;
final RPoint p0 = new RPoint();//原点坐标就是view的所在
p0.mX = view.getX();
p0.mY = view.getY();
final RPoint p1 = new RPoint();//点p1
p1.mX = view.getX() + convertDIP2PX(convertDIP2PX(30));
p1.mY = view.getY() + convertDIP2PX(convertDIP2PX(250));
final RPoint p2 = new RPoint();//点p2
p2.mX = view.getX() + convertDIP2PX(convertDIP2PX(60));
p2.mY = view.getY();
Log.i("tag","anim:" + view.getX() + ",,," + view.getY());
ObjectAnimator goInAnim = new ObjectAnimator();
goInAnim.setFloatValues(0f,1f);
goInAnim.setDuration(1000);
goInAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
float t = (float)valueAnimator.getAnimatedValue();
float oneMinusT = 1.0f - t;
x = oneMinusT * oneMinusT * (p0.mX)
+ 2 * t * oneMinusT * (p1.mX)
+ t * t * (p2.mX);
y = oneMinusT * oneMinusT * (p0.mY)
+ 2 * t * oneMinusT * (p1.mY)
+ t * t * (p2.mY);
view.setX(x);
view.setY(y);
}
});
goInAnim.setTarget(1);
goInAnim.start();
}
可以看到,我是按照公式来计算的x坐标和y坐标
我设置的点大概位置如下:
然后我的动画轨迹为:
这个录屏软件不大行,录出来一顿一顿的,可以看到效果的确不错
那么再加一个点来个S形的轨迹?
继续码:
float x = 0f;
float y = 0f;
private void anim(final View view){
x = 0f;
y = 0f;
final RPoint p0 = new RPoint();//原点坐标就是view的所在
p0.mX = view.getX();
p0.mY = view.getY();
final RPoint p1 = new RPoint();//点p1
p1.mX = view.getX() + convertDIP2PX(convertDIP2PX(30));
p1.mY = view.getY() + convertDIP2PX(convertDIP2PX(250));
final RPoint p2 = new RPoint();//点p2
p2.mX = view.getX() + convertDIP2PX(convertDIP2PX(60));
p2.mY = view.getY() - convertDIP2PX(convertDIP2PX(250));
final RPoint p3 = new RPoint();//点p3
p3.mX = view.getX() + convertDIP2PX(convertDIP2PX(90));
p3.mY = view.getY();
ObjectAnimator goInAnim = new ObjectAnimator();
goInAnim.setFloatValues(0f,1f);
goInAnim.setDuration(1000);
goInAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
float t = (float)valueAnimator.getAnimatedValue();
float oneMinusT = 1.0f - t;
x = oneMinusT * oneMinusT * oneMinusT * (p0.mX)
+ 3 * oneMinusT * oneMinusT * t * (p1.mX)
+ 3 * oneMinusT * t * t * (p2.mX)
+ t * t * t * (p3.mX);
y = oneMinusT * oneMinusT * oneMinusT * (p0.mY)
+ 3 * oneMinusT * oneMinusT * t * (p1.mY)
+ 3 * oneMinusT * t * t * (p2.mY)
+ t * t * t * (p3.mY);
view.setX(x);
view.setY(y);
}
});
goInAnim.setTarget(1);
goInAnim.start();
}
在手机上的坐标:
再来看看运动效果:
我只能说,有意思,这个东西,对于弧形的动画来说,效果的确好很多,就是需要很多效果时需要好好调试一下
不过这部分的知识理解之后,以后有用的时候可以再拿出来了
而在view的绘制的方法中,其实也有贝塞尔曲线的运用,比如:
Path的quadTo(float x1, float y1, float x2, float y2)方法
以当前点为开始点,(x1,y1)为控制点,(x2,y2)为结束点画一条二次贝塞尔曲线
这个方法很有意思