贝塞尔曲线和贝塞尔曲面_TimelineMax：处理贝塞尔（Bézier）补间

最新推荐文章于 2025-12-22 15:57:21 发布

翻译最新推荐文章于 2025-12-22 15:57:21 发布 · 954 阅读

文章标签：

#java #python #人工智能 #js #机器学习 #ViewUI

本文介绍了贝塞尔曲线的历史和类型，并详细展示了如何使用GSAP的BezierPlugin进行贝塞尔补间动画，包括自动旋转和滚动效果。通过示例代码，解释了如何控制SVG元素沿着贝塞尔曲线路径运动，同时提到了其他可动画的属性。

贝塞尔曲线和贝塞尔曲面

当您需要高级功能时，GSAP插件非常有用。我将在本教程中解释的BezierPlugin可以帮助沿定义为点/值数组的弯曲贝塞尔曲线路径上的几乎任何一个或多个属性设置动画。在跳入之前，我们应该花一点时间来了解贝塞尔曲线是什么以及它来自何处。

贝塞尔曲线

早在原始手绘时，图形设计师就非常熟悉称为“法语曲线”的工具。这些形状奇特的零件（通常是薄塑料）有助于指导设计师创建优雅的曲线，就像我们今天在Illustrator中使用钢笔工具所看到的那样。

许多图形设计师和印刷商使用的称为法国曲线的原始手工工具（src： Wikipedia ）

这些复杂的路径我们称为“贝塞尔曲线”。在数字世界中，它们被表示为一系列点，这些点是通过数学计算得出的，目的是将线条弯曲成优雅而华丽的形状。更具体地说，贝塞尔曲线用于使用通过路径连接在一起的一系列绘制点对平滑曲线建模。

数字显示的贝塞尔曲线。 上面的示例取自Illustrator的钢笔工具：综合指南

BézierCurves于1962年由法国工程师PierreBézier广泛宣传，他使用这些华丽的路径在雷诺设计了车身。但是，贝塞尔曲线的最初研究是1959年由数学家Paul de Casteljau使用de Casteljau算法开发的，该算法是一种数值稳定的方法，用于评估雪铁龙的贝塞尔曲线。矢量插图画家应归功于汽车行业！

对于疯狂的好奇，这是对贝塞尔曲线的一个很好的解释，称为立方贝塞尔曲线-引擎盖下更详细地解释了该曲线是如何在数学和视觉原理上诞生的。

贝塞尔类型

与Bézier融为一体可以使您成为绝地绝顶，但是只有真正的BézierJedi才能理解Bézier曲线的各种类型和风格。最常见的曲线通常是Quadratic和Cubic ，在大多数用例中都会看到。

线性贝塞尔曲线：直线，两端各有两个点。
二次贝塞尔曲线：三点曲线。
CubicBézier ：四个点的曲线，但是点的数量与Cubic无关，因此我们可以使用五个点，六个点甚至七个点！

贝塞尔（Bézier）补间与GSAP

在我们再次投入GSAP之前，请务必注意，出于上述原因，我正在使用TweenMax。 BezierPlugin已经为我们打包了！

云形尺

正如我在《 GreenSock旅程》开始时向您展示的那样，我们实例化了一个时间轴，以便可以给此动画一个展示自己的舞台，以及一种控制每个序列的方式。

假设我们已经设置了时间轴并对其进行了排序，我们可以检查如何编写和使用BezierPlugin 。请注意，我们的贝塞尔曲线路径值只是一系列x和y坐标，称为笛卡尔坐标系。创作时，开发人员必须确保数组中的每个对象都具有匹配的属性名称。

var bezier_path = [{x: value, y: value}, {x: value, y: value}];

tl.staggerTo(element, duration, { 
    bezier: {
      type: 'thru',
      values: bezier_path,
      curviness: 1
    },
    ease: Power1.easeInOut
    }, stagger_value);

假设我们已经指向SVG圆，将选择器传递到您看到element ，然后也设置了duration 。给x和y值和curviness的1将导致我们的像这样的圆形轨道上SVG动画圆：

检查源以获取使它起作用的更多详细信息。

由于thru是默认的Bézier type ，因此您根本不需要定义类型。像curvines一样增加和调整值可以为动画传播创造一些非常有趣的路径。使用上面看过的圆，我可以随意添加更多的SVG圆并调整弯曲度值（准确地说是12）。

贝塞尔类型

这是公认的各种贝塞尔风格的摘要。如果计划使用curviness属性（允许您调整贝塞尔curviness的张力），则必须确保使用thru类型。

thru （默认）：插件说明了如何使用专有的GreenSock算法通过提供的值自然绘制贝塞尔曲线。
soft ：数组中提供的值几乎像磁铁一样吸引着朝向它们的曲线，但是贝塞尔曲线通常不会穿过它们。
quadratic ：定义标准二次Bezier数据（二次Bezier在每个锚点之间都有一个控制点）。
cubic ：允许您定义标准三次贝塞尔曲线数据（三次贝塞尔曲线在每个锚点之间都有两个控制点）。
thruBasic ：与thru相同，不同之处在于它通过提供的值对贝塞尔曲线的初始绘制使用了一种不太复杂的算法。

动画其他属性

BezierPlugin还允许开发人员为x和y坐标以外的其他属性设置动画。实际上，您可以为其他属性设置动画，例如变换，不透明度等等！这样做不是很普遍，但完全有可能。旋转，缩放甚至自定义示例之类的属性！

例如，正如我将要演示的那样，我们可以对opacity以及x和y进行动画处理（请注意，数组中的每个对象必须具有opacity属性才能匹配）。

var bezier = [{ x: 0, y: 0, opacity: 0 }, { x: 0, y: 42, opacity: 0 }, { x: 42, y: 42, opacity: 1 }, { x: 42, y: 0, opacity: 1 }, { x: 0, y: 0, opacity: 0 }];

走得更远

让我们看看其他一些功能，以备不时之需。

自动旋转

此功能根据目标在贝塞尔曲线路径上的位置自动旋转目标。

卷动

如果您想要花哨的东西，那么就可以像Jan Paepke为其ScrollMagic项目演示的那样，花哨并在Bézier路径上为对象设置动画。定义曲线点并在补间定义中提供它们，以便沿定义的曲线进行动画处理。

下次

请继续关注我在这个TimelineMax系列中的下一个冒险，在其中我将您带入另一个名为Draggable的 GSAP插件中。使用可拖动的动力时间表，我们将进行实验以创建一个滑出菜单，可在其中拖动菜单以将其打开以打开并拖动以将其关闭。动画专家见！

翻译自: https://webdesign.tutsplus.com/tutorials/timelinemax-getting-a-handle-on-bezier-tweening--cms-23981

贝塞尔曲线和贝塞尔曲面