记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航
查看: 33871|回复: 0
收起左侧

[设计经验] 动效交付:三阶贝塞尔曲线兼容Android低版本的原生方案[含4P]

[复制链接]
发表于 2018-6-12 11:31:25 | 显示全部楼层 |阅读模式
解决三阶贝塞尔曲线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/

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x



上一篇:如何吸引更多来自本地客户的工作?资深设计师告诉你答案
下一篇:自学UI设计难不难?零基础可以学吗?
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
快速回复 返回顶部 返回列表