美文网首页
强大的PathInterpolator万能插值器及基本使用方法

强大的PathInterpolator万能插值器及基本使用方法

作者: dukecui | 来源:发表于2020-10-18 13:48 被阅读0次

    插值器Interpolator,在Android动画中被广泛应用,可以帮助我们实现各种不同的速率变化,从而模拟出更加真实自然流畅的动画效果。Android系统本身自带了很多常见的插值器,以满足我们最基本的开发需求。例如匀速变化的 LinearInterpolator, 系统很多情况下默认的 AccelerateDecelerateInterpolator 插值器等。某些情况下,当我们需要自定义插值器的时候,系统所提供的 PathInterpolator 就是一件非常强大的利器。

    PathInterpolator

    PathInterpolator 是什么?为什么称之为万能插值器呢?我们首先来看一下Google官方的解释

    An interpolator that can traverse a Path that extends from Point (0, 0) to (1, 1). The x coordinate along the Path is the input value and the output is the y coordinate of the line at that point. This means that the Path must conform to a function y = f(x).
    The Path must not have gaps in the x direction and must not loop back on itself such that there can be two points sharing the same x coordinate. It is alright to have a disjoint line in the vertical direction:

    大致翻译一下,PathInterpolator 是一种描述从(0,0)到(1,1)的路径插值器,x坐标作为输入值,所对应的输出值是该路径上对应的y坐标,也就是说,该路径必须满足y是x的函数,即y=f(x)。
    并且,该路径X方向不能有间隔,也不能有回环,即一个x坐标只能对应一个y坐标。当然也有例外,在y方向上有一条垂直的线也是被允许的。

    我们可以通过 PathInterpolator 的构造器来进一步理解它的功能。它有以下几类构造器

    //创建一个任意Path的插值器
    PathInterpolator(Path path)
    //创建一个二阶贝塞尔曲线的插值器
    PathInterpolator(float controlX, float controlY)
    //创建一个三阶贝塞尔曲线的插值器
    PathInterpolator(float controlX1, float controlY1, float controlX2, float controlY2)
    

    那么什么是贝塞尔曲线呢?一言以蔽之,将任意一条曲线通过精确的数学公式表达出来
    因此贝塞尔曲线为我们提供了一条将真实世界通过数学公式精确模拟出来的有效途径,这使得我们可以在计算机中模拟出各种真实世界的物理规律。贝塞尔曲线有自己的一套算法,用来精确的描绘各种曲线,根据贝塞尔曲线控制点的数量,可以分为从一阶贝塞尔曲线到N阶贝塞尔曲线。各阶贝塞尔曲线的算法可以参见这篇文章。
    Android系统默认提供了最高三阶贝塞尔曲线的实现方法,而更高阶贝塞尔曲线的实现方式,我们可以通过降阶算法来自行实现。具体高阶算法代码实现,可参考该文章。

    由此得知,我们可以通过 PathInterpolator 构造出一个普通Path或者贝塞尔曲线的插值器,也就是说理论上我们可以通过 PathInterpolator 构造出任意曲线的插值器,而不同的曲线插值器,又能为我们带来千变万化的动画效果。

    因此,我们将 PathInterpolator 称之为万能插值器,可以实现千变万化的动效,能阻碍动效实现的瓶颈,估计就是我们的想象力了。

    PathInterpolator 的应用

    在我们实际开发过程中,如何使用 PathInterpolator 呢?举一个简单的例子,比如我们想要实现ImageView的透明度的变化,通常可以采用ObjectAnimator来实现,而通过设置 PathInterpolator 我们可以控制透明度变化的速率,已达到更加“丝滑”的视觉效果。例子如下

    ObjectAnimator animator = ObjectAnimator.ofFloat(mImageView, "alpha", 1, 0);
    PathInterpolator pathInterpolator = new PathInterpolator(.24f, .9f, .24f, 1f);
    animator.setInterpolator(pathInterpolator);
    animator.setDuration(500);
    animator.start();
    

    以上例子采用了三阶贝塞尔曲线,那么如何知道我们想要的曲线的具体参数呢,这里有一个小工具,可以很好的帮助我们绘制出自己想要的贝塞尔曲线,并给出具体的参数,同时可以模拟出曲线所代表的速率效果

    小工具入口

    PathInterpolator 是在API21之后才被添加的。如果需要考虑兼容性问题,也可以使用 PathInterpolatorCompat

    相关文章

      网友评论

          本文标题:强大的PathInterpolator万能插值器及基本使用方法

          本文链接:https://www.haomeiwen.com/subject/whhcmktx.html