贝塞尔曲线和贝塞尔曲面
当您需要高级功能时,GSAP插件非常有用。 我将在本教程中解释的BezierPlugin可以帮助沿定义为点/值数组的弯曲贝塞尔曲线路径上的几乎任何一个或多个属性设置动画。 在跳入之前,我们应该花一点时间来了解贝塞尔曲线是什么以及它来自何处。
贝塞尔曲线
早在原始手绘时,图形设计师就非常熟悉称为“法语曲线”的工具。 这些形状奇特的零件(通常是薄塑料)有助于指导设计师创建优雅的曲线,就像我们今天在Illustrator中使用钢笔工具所看到的那样。
许多图形设计师和印刷商使用的称为法国曲线的原始手工工具(src: Wikipedia )
这些复杂的路径我们称为“贝塞尔曲线”。 在数字世界中,它们被表示为一系列点,这些点是通过数学计算得出的,目的是将线条弯曲成优雅而华丽的形状。 更具体地说,贝塞尔曲线用于使用通过路径连接在一起的一系列绘制点对平滑曲线建模。
数字显示的贝塞尔曲线。 上面的示例取自Illustrator的钢笔工具:综合指南
BézierCurves于1962年由法国工程师PierreBézier广泛宣传,他使用这些华丽的路径在雷诺设计了车身。 但是,贝塞尔曲线的最初研究是1959年由数学家Paul de