Android动画插值器之PathInterpolator浅析

  PathInterpolator,一种动画插值器,以前从没听过动画插值器的同学可以去这篇android 动画的Interpolator插值器

  好了,详细大家已经了解了插值器的作用和用法,那么我们开始这篇博文吧!

  

Method code
PathInterpolator(Path path) Create an Interpolator for an arbitrary Path.
PathInterpolator(float controlX1, float controlY1, float controlX2, float controlY2) Create an Interpolator for a cubic Bezier curve.
PathInterpolator(float controlX, float controlY) Create an Interpolator for a quadratic Bezier curve.

 先说第三种用法:传入一个控制点坐标,内部代码为:

Path path = new Path();
path.moveTo(0, 0);
path.quadTo(controlX, controlY, 1f, 1f);
也就是起始点为(0,0),结束点为(1,1),控制点为用户传入的一条二阶贝塞尔曲线,不熟悉贝塞尔曲线的可以看这篇Android贝塞尔曲线的魅力

 或者看一个gif图: 

Android动画插值器之PathInterpolator浅析_第1张图片

 gif图的代码地址:http://git.oschina.net/zhengxu.zmit.cn/bezierview

 那么这里插值器为什么要用到贝塞尔曲线呢?请看下图:(以translate位移动画为例)

Android动画插值器之PathInterpolator浅析_第2张图片

  这里要说一下,距离和时间的单位都可以看做百分比,最大值是100%,也就是1,所以这里使用贝塞尔曲线的目的就是控制每时每刻的动画应该走的位移,这样说很抽象,下面举个例子:

  首先画出"正确"的坐标图:

Android动画插值器之PathInterpolator浅析_第3张图片

  上面的代码稍微改了一下。下面,我移到控制点,找到两个算是极端的位置,演示一下效果:

1、控制点坐标大概为(0f,2f)

Android动画插值器之PathInterpolator浅析_第4张图片

动画演示为:

Android动画插值器之PathInterpolator浅析_第5张图片

可以看出,符合坐标,先在很快时间走完所有位移,然后超过最大位移后再回到原来的100%位置

2、控制点坐标大概为(1f,2f):

Android动画插值器之PathInterpolator浅析_第6张图片

预期:缓慢走完全部位移,然后继续缓慢超出,然后瞬间回到原100%位置

动画:

Android动画插值器之PathInterpolator浅析_第7张图片

哈哈,我们可以根据自己制定贝塞尔曲线的控制点,传入PathInterpolator,就可以控制动画啦~


我们接着说第二个构造方法:传入两个控制点坐标,构造一个三阶贝塞尔曲线,功能和二阶一样,具体我就不做赘述,

大家可以去这个网址http://cubic-bezier.com/#.17,.67,.83,.67,查看一下三阶贝塞尔曲线可以变成啥样子~


第一个构造方法:传入一个Path对象,可以用path构造出贝塞尔曲线,也可以是别的曲线,比如:

     Path path = new Path();
     path.moveTo(0f,0f);
     path.lineTo(1f,0.5f);
     path.lineTo(1f,1f);

坐标:

Android动画插值器之PathInterpolator浅析_第8张图片


这样的动画预期就是:缓慢走完一般路程,最后瞬间走完剩下的路程

动画展示:

Android动画插值器之PathInterpolator浅析_第9张图片


好了,就到这里啦~喜欢的或不喜欢的都可以评论给我表扬或者批评,与诸君共勉!

你可能感兴趣的:(android)