启东网站制作除了优雅之外,贝塞尔曲线还因其定义和构造而具备较好的数学特性.难怪它们被普遍运用于这么多领域：

　　·作为绘图/制作工具：它们在矢量绘图软件中通常被称为“路径”.

　　·作为表示曲线的格式：它们用于 svg、字体和许多其他矢量图形格式.

　　·作为数学函数：通常用于控制动画时间.

　　现在,如何使用贝塞尔曲线作为 css 的运动路径?

　　快速回顾

　　依据上下文,当提到“贝塞尔曲线”时,大家通常假设是2维1次贝塞尔曲线.

　　这样的曲线由4个点定义：

　　“1次”一词表示曲线的基础函数是1次多项式.还有类似的“2次”贝塞尔曲线,但控制点少了一个.

　　问题

　　假设给定了一条任意的 2d 1次 beizer 曲线,您将如何使用纯 css 动画为元素设定动画,使其沿着曲线精确chinamobile?

　　例如,您将如何重新创建此动画?

　　在本文中,大家将探索1种不同风格的方法.启东网站制作对于每个解决方案,大家将展示一个交互式演示,然后解释它是如何工作的.幕后有越来越多数学信息处理和证明,但请放心,大家不会讲得很深.

　　开始吧!

　　方法一：时间扭曲

　　这是基本的想法：

　　设定@keyframes以将元素从曲线的一个端点chinamobile到另一个端点.

　　分别扭曲每个坐标的时间,使用animation-timing-function.

　　使用cubic-bezier()具备正确参数的函数,大家可以创建任何1次贝塞尔曲线的运动路径：

　　这个演示展示了一个纯 css 动画.然而使用了 canvas 和 javascript,它们有两个目的：

　　可视化底层贝塞尔曲线(红色曲线).

　　允许使用典型的“路径”ui 调整曲线.

　　您可以拖动两个端点(黑点)和两个控制点(黑色方块).javascript 代码将根据更新一些 css 变量相应地更新动画.

　　这个怎么运作

　　假设所需的1次贝塞尔曲线由4个点定义：p0、p1、p2和p3.大家设定 css 规则如下：

　　规则并确定元素的开始和结束位置@keyframes.在大家有两个神奇的函数中,参数的信息处理使得两者在任何时候都始终具备正确的值.move-xmove-yanimation-timing-functioncubic-bezier()topleft

　　我会跳过数学,但我在这里起草了一个简短的证明,供你好奇的数学头脑使用.

　　讨论

　　这种方法应该适用于大多数情况.您甚至可以根据为该值引进另一个动画来制作 3d 1次贝塞尔曲线z.

　　但是,有一些小警告：

　　由于被零除错误,当两个端点位于水平或垂直线上时,它不起功能.

　　它不兼容阶数高于 的贝塞尔曲线3.

　　动画时间选项有限.

　　大家使用1/3和2/3以上来完成线性时序.

　　您可以调整这两个值来调整时间,但与其他方法相比它是有限的.启东网站制作稍后会详细介绍.

　　方法2：标准贝塞尔曲线构造

　　贝塞尔曲线的数学构造已经给了大家很好的提示.

　　一步一步,大家可以确定所有chinamobile点的坐标.p0首先,大家确定在和之间chinamobile的绿点的位置p1：

　　可以用类似的方式组建额外的绿点.

　　接下来,大家可以像这样确定蓝点的位置：

　　冲洗并重复,最终大家会得到想要的曲线.

　　结论

　　在本文中,大家讨论了 2种仅使用 css 动画沿着贝塞尔曲线精确chinamobile元素的不同方法.

　　虽然所有 2种方法都或多或少实用,但它们各有利弊：

　　方法 1对于熟悉计时函数 hack 的人来说可能更直观.但是它在动画时间方面不太灵活.

　　对于熟悉贝塞尔曲线数学构造的人来说,方法 2更有意义.动画时间也很灵活.另一方面,由于使用@property.

　　就这样!我希看你觉得这篇文章很有趣.请让我知道你的想法!