曲线让动画更优美

原创快手Y-tech团队快手Y-tech

快手Y-tech

最新技术干货分享

摘要

曲线编辑器用于用户调整某一个属性随时间变化的曲线数值，通过添加、删除、移动关键点，改变正切值得到不同的线段函数，让属性随着生命范围有规律地变化。通过设置关键帧，计算关键帧之间的插值来显著减少属性平滑过渡的计算量，而如何巧妙地设计插值函数以及编写一个用户友好的曲线编辑器就值得探讨和思考了。

什么是贝塞尔曲线

生活中会出现各种需要曲线的场景，比如画画时想要画出一个平滑的弧度，字体设计时想要细节过渡自然，甚至连普通的电影镜头也可能需要沿着曲线运动才让人感到舒适。而早在1962年法国工程师Pierre Bézier就广泛应用一种曲线绘制方式，通过很少的控制点生成复杂且平滑的曲线来辅助汽车车体的工业设计，这种曲线也被人们称为贝塞尔(Bézier)曲线。

如今贝塞尔曲线已被各大软件应用于各种功能中，如手机中拖拽窗口产生的回弹效果、绘图软件中的钢笔工具等。大家一定也很好奇，一条曲线是如何产生的呢？下面就简单介绍一下贝塞尔曲线公式。

给定一个参数 $t\in[0,1]$ 就能确定贝塞尔曲线上的一点，通过无数的t即可确定一条曲线。一阶贝塞尔曲线是线性插值，会得到一条直线，公式为： $B_1(t)=(1-t)P_0+tP_1$ ，曲线随着t变化的生成过程如图所示：

图1. 一阶贝塞尔曲线生成过程

二阶贝塞尔曲线是一条抛物线，如图，取 $P_0P_1$ 上一点 $Q_0$ 和 $P_1P_2$ 上一点 $Q_1$ ，使得 $P_0Q_0:P_0P_1=P_1Q_1:P_1P_2$ 。设 $t=P_0Q_0:P_0P_1$ ，可以得到曲线公式为： $B_2(t)=(1-t)^2P_0+2t(1-t)P_1+t^2P_2$ ，曲线随着t变化的生成过程如图所示：

图2. 二阶贝塞尔曲线生成过程

以此类推，取 $Q_0Q_1$ 上一点 $R_0$ 和 $Q_1Q_2$ 上一点 $R_1$ ，得到三阶贝塞尔曲线公式为： $B_3(t)=(1-t)^3P_0+3t(1-t)^2P_1+3t^2(1-t)P_2+t^3P_3$ ，曲线随着t变化的生成过程如图所示：

图3. 三阶贝塞尔曲线生成过程

可以得到n阶贝塞尔曲线的通用公式为：

$B(t)=\sum_{k=0}^{n}B_{n,k}(t)P_k$

$B_{n,k}=\binom{n}{k}t^k(1-t)^{n-k}$

$\binom{n}{k}=\frac{n!}{k!(n-k)!}$

利用贝塞尔曲线的变换，可以得到很多有趣的曲线形态，比如可视化曲线的曲率，已知曲率公式为： $k(t) = \frac{x'y'' - y'x''}{(x'^2+y'^2)^{3/2}}$ ，

通过下述代码即可得到动图中展示的曲率变化效果。

var draw = function() {    this.drawSkeleton(curve);      //画控制点和控制线  this.drawCurve(curve);         //画曲线  for(var s=0; s<256; s+=2) {    this.setColor("rgba(40,130,"+s+",0.6)");    let t = s/255;    let p = curve.get(t);        //曲线上某一点x、y值    let n = curve.normal(t);     //曲线上某一点x、y方向分量    let kr = curve.curvature(t); //计算曲率    this.drawLine(p, {           //画彩色线段      x: p.x + n.x * kr.k * 5000,      y: p.y + n.y * kr.k * 5000,    });  }}

图4. 曲率变化效果

利用贝塞尔曲线构造曲线编辑器

了解贝塞尔曲线的基础公式后，接下来可以通过对贝塞尔曲线进行变形构造曲线编辑器，观察三阶贝塞尔曲线的图形，可以认为 $P_0$ 和 $P_1$ 为关键点， $P_2$ 和 $P_3$ 为控制点，关键点移动控制曲线端点位置，控制点移动改变曲线弧度，通过图形化的形式即可构造曲线编辑器，并在特效开放平台的粒子系统中进行应用。

1. 单曲线编辑器

通过构造关键点、控制点、曲线、多选框、位置信息框、数字、背景网格、设置按钮、模版、下拉列表框等基础绘制组件组成特效开放平台Beyond Effects中的曲线编辑器，在多种状态中进行切换，支持曲线缩放、关键点添加、关键点删除、关键点移动、控制点移动、多选移动、多选删除等操作。通过 $P_0$ 、 $P_1$ 、 $P_2$ 、 $P_3$ 四个点的位置信息，用贝塞尔曲线函数绘制一段曲线， $P_0$ 和 $P_1$ 更新端点位置信息， $P_2$ 和 $P_3$ 更新正切值。每增加或删除一个关键点，就自动增加或删除两个控制点和一段曲线。多个关键点和成对的控制点即可组成多段连续且平滑的曲线。

function drawCurve(curve, offset) {    const ctx = this.ctx;    offset = offset || { x: 0, y: 0 };    var ox = offset.x;    var oy = offset.y;    ctx.beginPath();    var p = curve.points, i;    ctx.moveTo(p[0].x + ox, p[0].y + oy);    ctx.bezierCurveTo(      p[1].x + ox,      p[1].y + oy,      p[2].x + ox,      p[2].y + oy,      p[3].x + ox,      p[3].y + oy    );    ctx.stroke();    ctx.closePath();  }

图5. 单曲线编辑效果展示

2. 前后置区间

对于循环变化的曲线，可以自动计算其前后置区间来减少用户操作，得到多变的曲线形态。现支持三种设置模式：Clamp(常量值)、Loop(循环)、PingPong(先对称再循环)。获取前后置曲线上某一点的x值在曲线上所对应x值的计算方式如下：

function loop(currentX, prevX, nextX) {    let x = currentX - prevX;    let length = nextX - prevX;    x = x - Math.floor(x / length) * length;    return prevX + x;}
function pingPong (currentX, prevX, nextX) {    let x = currentX - prevX;    let length = nextX - prevX;     x = x - Math.floor(x / length / 2) * length * 2    x = length - Math.abs(x - length);    return prevX + x;}

图6. 前后置区间效果展示

3. 双曲线编辑器

绘制两条单曲线，取中间区域即可得到双曲线编辑器。对于每一个x，y取值为两条曲线中的max值减去min值。将双曲线操作可视化后可以得到如图中所示的效果。

图7. 双曲线编辑效果展示

曲线编辑器可以做什么

1. 烟雾效果

烟雾效果往往从开始处慢慢扩散，如果采用线性递增，变化过程则会比较僵硬。利用单曲线编辑，构造一个新的关键点，使烟雾沿着曲线路径呈现先小后大的效果更为自然。

视频1. 烟雾效果调节过程

2. 星星效果

采用一张星星贴图，只能看到星星在四处扩散，而配合曲线编辑器的前后置区间功能，就可以做出闪烁的效果。首先新建一个关键点，将两端关键点向下移动，修改设置前后区间的模式为loop，则星星贴图会在[0,1]区间内以循环的形式变大变小，就可以得到闪烁的效果了。

视频2. 星星效果调节过程

3. 彩带效果

可以通过双曲线编辑让彩带效果的飘落更自然美观。双曲线模式下，彩带沿着两条曲线的包围区域做大小变化，配合不同的彩带飘落速度和方向，可以得到大小不一、形态各异的彩带效果。

视频3. 彩带效果调节过程

你可能还想看

快手特效业务的云端渲染方案

一键还原人物清晰面貌，AI助力人像照片修复

基于人脸视频的生理指标测量技术分享

等你来

Y-tech

Y-tech团队是快手公司在人工智能领域的探索者和先行者。我们致力于通过计算机视觉、计算机图形学、机器学习、AR/VR/HCI等多领域的交叉探索，一方面帮助每个人更好地进行自我表达和内容创作，另一方面也为用户提供更好的内容体验和交互方式。Y-tech在北京、深圳、杭州、Palo Alto均有研发团队。如果你对我们做的事情感兴趣，欢迎联系并加入我们！

Y-tech长期招聘（全职和实习生）：计算机视觉、计算机图形学、多模态技术、机器学习、AI工程架构、美颜技术、特效技术、性能优化、平台开发、工具开发、技术美术、技术产品经理等方向的优秀人才。联系方式：ytechservice@kuaishou.com

Y-tech///

继续滑动看下一个