UI分享你需要了解的函数式动效

Posted 2021-04-09 网易雷火UX用户体验中心

0

1

什么是动效

无论是游戏当中，还是我们平时所使用的互联网产品，比如界面的打开，关闭，刷新，都伴随着诸多的动效，我们可以从四个角度去构建一个动效，起始状态，结束状态，变化时间，以及过渡方式。如果做过动画的同学可能会很好理解，一个动效无非就是从起始态经过一段时间的过渡到达结束状态。

0

2

函数式动效

有了上述关于动效的解释，我们可以发现，起始状态，结束状态都是一个静态的值，设计动效时往往比较好确定，但是时间和过渡方式往往是要反复调整的，这里的过渡方式，指的是起始状态到结束状态之间值的变化，如果按照帧来描述时间，每帧的值可以自己手动去赋值，也可以用插值的方式去计算，而这种计算的过程，我们可以用一个函数来表示，设时间为x,y是要变化的值（往往是形变，位移，旋转，颜色，透明度等），y随时间的变化可以用y = f(x)描述，如图所示，y = sin(x),y随x发生正弦变化。可以直观的看出，相对于开发者手动的去给中间帧赋值，函数处理的优势很明显，所有的值都可以通过函数计算，减少了很多离散的值。

图1 y = sin(x)函数图像

0

3

为什么要使用函数式动效

动效能很好的增强交互表现，很多同学都会通过自己制作帧动画的形式制作动效，如果程序可以直接使用，无论怎样的帧动画都是可以的，但是如果程序无法直接使用，需要复现这些动画的时候，凭借经验的帧动画在实现起来就会造成很多的时间成本（如图2所示），所以函数式动效可以很好的解决上述的问题。函数式动效也可以表现得更加标准化，并且更加的方便复用。

图2 依靠经验直觉制作的帧动画，很难复现

0

4

缓动函数

缓动函数（如图3所示）是在动效制作中最为常见的类型，缓动函数指定动画效果在执行时的速度，使其看起来更加真实，速度变化的过程往往要比线性的变化看起来更加的真实，生活中的运动变化往往也不是线性的，下图4是两种不同函数下的运动变化，蓝色方块的缓动函数为y = a * t,即线性变化，红色方块的缓动函数为y = a * t^3,在起点与终点，运动时间都一致的前提下，两者的运动速度变化呈现出不同感受。

图3 常用缓动函数曲线图

图4 红蓝运动对比图

0

5

贝塞尔曲线

当上述缓动函数不能满足需求时，贝塞尔曲线是更加灵活的使用方案，贝塞尔曲线是计算机图形学中相当重要的参数曲线，很多软件都有贝塞尔曲线工具，如PhotoShop。

我们以二阶贝塞尔曲线举例（如图5），二阶贝塞尔曲线由定点P0,P1,P2的函数确定，B（t） = (1-t)² P0 + 2t(1-t)P1 + t²P2，我们把P0与P2看作起点与终点的情况下，调整P1就可以生成不同样式的曲线，曲线的斜率代表了速率的变化。从图6我们可以看出，在给点参数下的贝塞尔曲线与线性运动的区别。

贝塞尔曲线还有三阶甚至N阶，调整的运动点也更多，曲线也更加的复杂多变。（如图7所示）

图5 二阶贝塞尔曲线

图6 贝塞尔曲线与线性运动对比

图7 三阶贝塞尔曲线调整P1P2得到不同曲线

0

6

总结

首先缓动函数与贝塞尔曲线很多软件都有相应的集成，制作动效的同学只需要调整参数，无需考虑数学实现，使用函数动效的好处，是标准化，与程序同学对接，程序同学制作统一模块，都方便很多，相比手动制作帧动画，是将离散的动画帧变成了连续的参数函数。不过，函数式动效也不是应用于任何场景，有一些相当复杂的动效，无法很好的用函数描述时，还是需要同学们手动制作动画帧。

往期推荐：