解决三阶贝塞尔曲线4参数交付方法在Android5.0以下不兼容的问题

设计背景

在进行动效设计时，为了达到符合物理性的效果，经常使用缓动曲线来控制元素的运动速率。

缓动曲线包含四大类，分别是线性（linear）、缓入（ease in）、缓出（ease out）和缓入缓出（ease in and out）。除了线性类，其余三大类又可以细分出二次方缓动曲线（Quadratic）、立方缓动曲线（Cubic）、指数缓动曲线（Exponential）、正弦缓动曲线（Sinusoidal）等子类。

在Origami Studio的Classic Animation Patch中预设了四大类与常用四子类的组合曲线预设即：   

• Linear
• Quadratic In
• Quadratic Out
• Quadratic In-Out
• Cubic In
• Cubic Out
• Cubic In-Out
• Exponential In
• Exponential Out
• Exponential In-Out
• Sinusoidal In
• Sinusoidal Out
• Sinusoidal In-Out

共13条缓动曲线。

设计师在设计动效时会根据不同的场景选用适合的曲线，在交付时常用三阶贝塞尔曲线参数的形式交付，例：Exponential Out：cubic-bezier(0.19, 1, 0.22, 1);

三阶贝塞尔曲线一共有4个控制点，起始点、结束点，以及中间的两个调节点，上述例子中的四个参数即为两个调节点的坐标对应为 ( x1, y1, x2, y2 )，图中粉色为控制点1 P1，湖蓝色为控制点2 P2。

缓动曲线的定义域是[0,1]，而其值域满足前提 f(0)=0,f(1)=1，所以整条曲线出现在0～1的第一象限。

问题背景

在以往的交付流程中，为了多端设备效果统一，一般采用三阶贝塞尔曲线的参数交付，在Android中使用贝塞尔插值器，可以直接使用PathInterpolator类，但是这个类是在API21增加的，低版本将不适用。我们希望用Android提供的原生方法来优雅的解决缓动曲线在Android低版本设备的体验问题！

Android插值器

通过回溯发现PathInterpolator类继承自BaseInterpolator类，BaseInterpolator类实现了Interpolator接口，而Interpolator接口在Android官方文档的介绍中已知的间接子类有AccelerateDecelerateInterpolator, AccelerateInterpolator, DecelerateInterpolator, LinearInterpolator 等诸多子类，看起来是不是和缓动曲线很像？

Linear自不用说，以DecelerateInterpolator为例，官方是这样描述的 “An interpolator where the rate of change starts out quickly and and then decelerates.” 和ease out的概念基本一致，同时该类的带参构造方法参数为：factor：Degree to which the animation should be eased. Setting factor to 1.0f produces an upside-down y=x^2 parabola. Increasing factor above 1.0f makes exaggerates the ease-out effect (i.e., it starts even faster and ends evens slower). 所以通过调节factor参数，我们应该就能得到符合我们要求的缓出曲线。而AccelerateDecelerateInterpolator, AccelerateInterpolator, DecelerateInterpolator, LinearInterpolator这些插值器可以直接原生调用，不存在兼容性问题，需要的只是一个factor参数。

应用到设计

从工程结构找到了解决问题的方式，但是如何将之前通过三阶贝塞尔曲线参数交付的动效设计转化成factor参数是一个问题。得益于Origami Studio开放的Math Expression Patch，让所有可以通过数学公式描述的效果都可以在Origami Studio中实现。通过查看DecelerateInterpolator类的源码，我们得到了DecelerateInterpolator效果的数学公式：

public float getInterpolation(float input) {
    float result;
    if (mFactor == 1.0f) {
        result = (float)(1.0f - (1.0f - input) * (1.0f - input));
    } else {
        result = (float)(1.0f - Math.pow((1.0f - input), 2 * mFactor));
    }

    return result;

}

该公式转化到Origami Studio中如下图：

通过对接口的封装得到了一个易用的Decelerate Interpolator Patch

我们通过实验及对比，得出了一些常用曲线的factor值：

factor = 1.0    Quadratic Out 二次方缓出曲线 factor = 1.5    Cubic Out 立方缓出曲线 factor = 3.0    Exponential Out 指数缓出曲线

* 缓入曲线以此类推

现在，你只需要告诉工程师你的插值器类型和factor参数，优雅高效的实现动效。

* Origami插值器组件下载见附件

引用

 [1] pyericz.缓动曲线[DB/OL].pxrgo，2017-08-28[2018-05-17]. http://www.pxrgo.com/math/2017/08/28/ease-curve/.

 [2] Andrey Sitnik.easing[DB/OL].Andrey Sitnik，2012[2018-05-17]. https://easings.net/.

 [3] Juraj Novák.inloop[DB/OL].Juraj Novák，2016[2018-05-17]. https://inloop.github.io/interpolator/.

 [4] Google.Android Developers[DB/OL].Google，2018[2018-05-17]. https://developer.android.com/.

 [5] Facebook.Origami Design[DB/OL].Facebook，2018[2018-05-17]. https://origami.design/