纯CSS曲线运动路径

纯CSS Bezsier曲线运动路径：比较三种方法

>

您是一个更狂热的曲线爱好者吗？ 它们的优雅和数学特性使它们非常适合各种应用，包括向量图形（SVG，字体），动画时机，以及我们探索的CSS运动路径。

本文详细介绍了三种仅CSS的方法，用于沿2 Cutbeier曲线精确地对元素进行动画元素，从而避免使用JavaScript。 我们将检查每种方法，其优势和缺点。

快速回顾：立方bezier曲线> 立方体曲线由四个点定义：两个端点（P0，P3）和两个控制点（P1，P2）。 曲线的形状由相对于端点的控制点的位置确定。

>

挑战：沿Bezier曲线的精确CSS动画

目标是使元素仅使用CSS遵循给定的立方体曲线进行动画。

>让我们探索三个解决方案：

方法1：时间扭曲（使用

）

> 此方法利用animation-timing-function>在>中。 单独的动画控制x和y坐标，每个轴

扭曲时间与曲线匹配。

cubic-bezier() 对于那些熟悉时序功能hack的人，animation-timing-functioncubic-bezier() pros：

相对简单 当端点在水平或垂直线上时（轻松减少偏移量），仅限于立方bezier曲线时，

• cons：不起作用，并提供有限的控制动画时机。 cubic-bezier()
方法2：竞争动画（使用多个
• ）> cubic-bezier()此方法使用巧妙地交互的多个
>规则。 动画修改了

属性，后来的动画构建了早期属性的转换。 即使对于立方曲线，这也允许出人意料的优雅解决方案。

>@keyframespros：简单的CSS，支持任何CSS动画 - 定时功能，并且可以轻松地扩展到3D曲线。>

cons：@keyframes用于计算密钥帧的公式可能不太直观。transform>

>
• 方法3：标准bezier曲线构造（使用CSS变量和） 这种方法直接模仿了bezier曲线的数学结构。它使用CSS变量和
来定义和动画中间点，最终创建完整的曲线。
• pros：
直观的人了解bezier曲线构造，很容易扩展到高阶曲线和3D，以及灵活的动画正时
• cons：依赖于@property，这并不是所有浏览器都普遍支持的。
>

动画定时考虑

所有方法都支持各种动画正时功能（animation-timing-function）。 方法2和3直接应用这些功能，而方法1则需要仔细调整cubic-bezier()>参数才能达到所需的效果。

结论

>每种方法都提供了一种独特的方法，可以用纯CSS沿Bezzier曲线进行动画动画。 最佳选择取决于您熟悉技术，浏览器兼容性要求以及动画定时所需的控制水平。 方法2在大多数情况下提供了良好的简单性和灵活性的平衡。

>

以上是纯CSS曲线运动路径的详细内容。更多信息请关注PHP中文网其他相关文章！