提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
解决三阶贝塞尔曲线4参数交付方法在Android5.0以下不兼容的问题
设计背景
在进行动效设计时,为了达到符合物理性的效果,经常使用缓动曲线来控制元素的运动速率。
缓动曲线包含四大类,分别是线性(linear)、缓入(ease in)、缓出(ease out)和缓入缓出(ease in and out)。除了线性类,其余三大类又可以细分出二次方缓动曲线(Quadratic)、立方缓动曲线(Cubic)、指数缓动曲线(Exponential)、正弦缓动曲线(Sinusoidal)等子类。
在Origami Studio的Classic Animation Patch中预设了四大类与常用四子类的组合曲线预设即:
共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/
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册