Android动画插值器之PathInterpolator浅析

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

  

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.

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

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

 或者看一个gif图: 

Android动画插值器之PathInterpolator浅析

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

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

Android动画插值器之PathInterpolator浅析

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

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

Android动画插值器之PathInterpolator浅析

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

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

Android动画插值器之PathInterpolator浅析

动画演示为:

Android动画插值器之PathInterpolator浅析

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

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

Android动画插值器之PathInterpolator浅析

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

动画:

Android动画插值器之PathInterpolator浅析

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


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

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


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

[java] view plain copy
  1. Path path = new Path();  
  2. path.moveTo(0f,0f);  
  3. path.lineTo(1f,0.5f);  
  4. path.lineTo(1f,1f);  

坐标:

Android动画插值器之PathInterpolator浅析


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

动画展示:

Android动画插值器之PathInterpolator浅析


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