恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
动效交付:三阶贝塞尔曲线兼容Android低版本的原生方案
0.0°
2018-05-25 原创文章 经验/观点 举报 3544 12 6 1

解决三阶贝塞尔曲线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。

Image title



缓动曲线的定义域是[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中如下图:

Image title


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

Image title



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

factor = 1.0    Quadratic Out 二次方缓出曲线 factor = 1.5    Cubic Out 立方缓出曲线 factor = 3.0    Exponential Out 指数缓出曲线
* 缓入曲线以此类推



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

Image title



* 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/


更新:2018-05-25

下载
收藏

12人已收藏

Zeno

MDD丨学然后知不足

  • 4

    作品

  • 193

    粉丝

  • 71

    关注

  • Origami Studio 可视化贝塞尔编辑器
  • 丙申年 | 界面设计合集
  • 转载-Ai 3D 色彩图形效果制作 Colouration

    猜你喜欢

      2018-05-25 原创文章 经验/观点 举报 3544 12 6 1

      动效交付:三阶贝塞尔曲线兼容Android低版本的原生方案

      0.0°

      你确定要举报动效交付:三阶贝塞尔曲线兼容Android低版本的原生方案

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年05月25日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      6
      12
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录