使用Cupic-Bezier（）高级CSS动画

在处理复杂的CSS动画时，倾向于创建带有许多声明的扩展@KeyFrames。我想谈论的一些技巧可能有助于使事情变得更容易，同时留在香草CSS中：

1. 多个动画
2. 正时功能

第一个是更广泛的使用和熟悉的，但第二个不太常见。可能有充分的理由 - 逗号的链接动画比起我们可用的各种定时功能及其所做的工作要容易得多。有一个特别整洁的时序功能，可以使我们完全控制自定义的计时功能。那将是立方体bezier（），在这篇文章中，我将向您展示它的力量，以及如何使用它来创建精美的动画而无需过多复杂。

让我们从一个基本示例开始，显示我们如何以有趣的方向移动球，例如无穷大（∞）形状：

如您所见，没有复杂的代码 - 只有两个关键帧和一个Cubbezier（）函数。然而，我们得到的是一个相当复杂的最终无限形状动画。

酷，对吧？让我们深入研究！

Cupic-Bezier（）函数

让我们从官方定义开始：

立方贝齐尔宽松函数是一种由四个实数定义的宽松函数，该函数分别指定了一个CubicBézier曲线的两个控制点P1和P2，其端点P0和P3分别固定为（0，0）和（1，1，1）。 P1和P2的X坐标仅限于[0，1]的范围。

上面的曲线定义了输出（y轴）如何基于时间（x轴）的行为。每个轴的范围为[0，1]（或[0％100％]）。如果我们有一个持续两秒钟（2s）的动画，那么：

 0（0％）= 0s 
1（100％）= 2s

如果我们想从5px到20px动画，那么：

 0（0％）= 5px 
1（100％）= 20px

X，时间始终仅限于[0 1]；但是，输出可以超越[0 1]。

我的目标是调整P1和P2，以创建以下曲线：

您可能会认为这是不可能实现的，因为如定义所述，P0和P3在（0,0）和（1,1）固定在（1,1）中，这意味着它们不能在同一轴上。的确如此，我们将使用一些数学技巧来“近似”它们。

抛物线曲线

让我们从以下定义开始：Cubic-Bezier（0,1.5,1,1.5）。这给了我们以下曲线：

我们的目标是移动（1,1），并以（0,1）的形式搬迁，这在技术上是不可能的。因此，我们将尝试伪造它。

我们先前说过，我们的范围是[0 1]（或[0％100％]），因此让我们想象一下，当0％非常接近100％时。例如，如果我们希望将20px（0％）至20.1px（100％）的顶部动画起来，那么我们可以说初始状态和最终状态都是相等的。

嗯，但是我们的元素根本不会移动，对吗？

好吧，它会移动一点，因为y值超过20.1px（100％）。但这还不足以给我们带来明显的运动：

让我们更新曲线，然后使用Cupic-Bezier（0,4,1,4）。注意我们的曲线比以前高：

但是，即使最高值越过3（或300％），但仍然没有运动。让我们尝试立方体bezier（0,20,1,20）：

是的！它开始移动一点。您是否每次提高价值时都注意到曲线的演变？当我们放大以查看完整曲线时，这使我们的观点（1,1）更接近（0,1），这是诀窍。

通过使用Cutic-Bezier（0，V，1，V），其中V具有很大的值，并且初始状态和最终状态都非常近（或几乎相等），我们可以模拟抛物线曲线。

一个例子值得一千个字：

我将“魔术”立方呈现功能应用于顶部动画，以及在左侧应用的线性动画。这为我们提供了想要的曲线。

挖掘数学

对于那些以数学意识的人来说，我们可以进一步打破这一解释。可以使用以下公式来定义立方体bezier：

 p =（1 -t）³p03（1 -t）²TP13（1 -t）t第一p2t³p3

每个点的定义如下：p0 =（0,0），p1 =（0，v），p2 =（1，v）和p3 =（1,1）。

这为我们提供了X和Y坐标的两个功能：

• x（t）= 3（1 -t）t²T³=3t² -2t³
• y（t）= 3（1 -t）²TV3（1 -t）t²vt³=t³ -3vt²3vt

V是我们的最大价值，T在[0 1]范围内。如果我们考虑上一个示例，y（t）将为我们提供顶部的价值，而x（t）是时间进度。点（x（t），y（t））然后将定义我们的曲线。

让我们找到y（t）的最大值。为此，我们需要找到将为我们提供y'（t）= 0的t值（当导数等于0时）：

 y'（t）=3T² -6VT 3V

y'（t）= 0是二次方程。我将跳过无聊的部分，并为您提供结果，即t = v -sqrt（v² -v）。

当V为较大的值时，t将等于0.5。因此，y（0.5）= max和x（0.5）等于0.5。这意味着我们在动画中的中途达到最大值，这符合我们想要的抛物线曲线。

另外，y（0.5）将为我们提供（1 6V）/8，这将使我们能够基于V。我们始终使用V的最大值，因此我们可以简化为6V/8 = 0.75V。

我们在上一个示例中使用了v = 500，因此那里的最大值将达到375（或37500％），我们得到以下内容：

• 初始状态（0）：顶部：200px
• 最终状态（1）：顶部：199.5px

在0到1之间的差异为-0.5px。让我们称其为增量。对于375（或37500％），我们的方程为375*-0.5px = -187.5px。我们的动画元素达到顶部：12.5px（200px -187.5px），并为我们提供以下动画：

顶部：200px（时间为0％）→顶部：12.5px（时间为50％）→顶部：199.5px（在100％的时间为100％） 

或者，以另一种方式表示：

顶部：200px（0％）→顶部：12.5px（50％）→顶部：200px（100％）

让我们做相反的逻辑。我们应该使用什么值来使元素达到顶部：0px？动画将为200px→0px→199.5px，因此我们需要-200px才能达到0px。我们的增量始终等于-0.5px。最大值将等于200/0.5 = 400，因此0.75V = 400，表示V = 533.33。

我们的元素正在触及顶部！

这是一个总结我们刚刚完成的数学的数字：

正弦曲线

我们将使用几乎完全相同的技巧来创建正弦曲线，但具有不同的公式。这次，我们将使用立方体bezier（0.5，V，0.5，-v）

像以前一样，让我们​​看看曲线在增加价值时会如何发展：

我认为您现在可能已经明白了。使用v的大价值使我们接近正弦曲线。

这是另一个具有连续动画的动画 - 真正的正弦动画！

数学

让我们来数学吧！与以前相同的公式填充，我们将获得以下功能：

• x（t）= 3/2（1 -t）²T3/2（1 -t）t²T³=（3/2）t - （3/2）t²T³
• y（t）= 3（1 -t）²TV -3（1 -t）t²vt³=（6v 1）t³ -9vt²3vt

这次我们需要找到y（t）的最小值和最大值。 y'（t）= 0将为我们提供两个解决方案。解决此问题之后：

 y'（t）= 3（6v 1）t² -18vt 3v = 0

…我们得到：

• t'=（3v sqrt（3v² -v））/（6v 1）
• t''=（3v -sqrt（3v² -v））/（6v 1）

对于V的很大价值，我们具有t'= 0.211和t“ = 0.789。这意味着y（0.211）= max and y（0.789）= min。这也意味着x（0.211）= 0.26和x（0.789）= 0.74。

Y（0.211）等于0.289V和Y（0.789）至-0.289V。考虑到V非常大，我们得到了一些舍入的价值。

我们的正弦曲线还应在一半时间（或x（t）= 0.5）的x轴（或y（t）= 0）穿越x轴（或y（t）= 0）。为了证明这一点，我们使用y（t）的第二个衍生物 - 应等于0-因此，y''（t）= 0。

 y''（t）= 6（6v 1）t -18v = 0

解决方案为3V/（6V 1），对于大V值，解决方案为0.5。这给我们y（0.5）= 0和x（0.5）= 0.5，这证实了我们的曲线交叉（0.5,0）点。

现在，让我们考虑上一个示例，然后尝试找到V的值，该值使我们回到顶部：0％。我们有：

• 初始状态（0）：顶部：50％
• 最终状态（1）：顶部：49.9％
• 增量：-0.1％

我们需要-50％才能达到顶部：0％，因此0.289V*-0.1％= -50％，这使我们v = 1730.10。

如您所见，我们的元素正在触摸顶部并在底部消失，因为我们有以下动画：

顶部：50％→顶部：0％→顶部：50％→顶部：100％→顶部：50％→等等...

总结计算的数字：

以及一个一起说明所有曲线的示例：

是的，您会看到四个曲线！如果仔细观察，您会注意到我使用的是两个不同的动画，一个将达到49.9％（增量为-0.01％），另一个将达到50.1％（增量为0.01％）。通过更改增量的符号，我们控制曲线的方向。我们还可以控制立方bezier的其他参数（不是应保持大价值的V），以从相同的曲线中创建更多变化。

在下面，一个互动演示：

回到我们的例子

让我们回到我们最初以无限符号形状移动的球的最初示例。我只是将两个正弦动画结合起来，使其起作用。

如果我们将以前所做的工作与多个动画的概念结合在一起，我们就会获得惊人的结果。这再次是最初的示例，这次是交互式演示。改变价值并看到魔术：

让我们走得更远，在混合物中加入一点CSS Houdini。多亏了@property，我们可以为复杂的转换声明动画（但目前CSS Houdini仅限于Chrome和Edge支持）。

您可以用什么样的图纸？这是我能够制作的一些：

这是一个动画：

还有一个没有CSS Houdini的版本：

从这些示例中可以看出一些事情：

• 每个密钥帧仅使用一个包含增量的声明来定义。
• 元素和动画的位置是独立的。我们可以轻松地将元素放置在任何地方，而无需调整动画。
• 我们没有进行计算。没有大量的角度或像素值。我们只需要在密钥帧中一个很小的值，并且在Cux-Bezier（）函数中需要一个大价值。
• 整个动画只能通过调整持续时间值来控制。

那过渡呢？

同一技术也可以与CSS过渡属性一起使用，因为它在定时功能时遵循相同的逻辑。这很棒，因为在创建一些复杂的悬停效果时，我们能够避免使用密钥帧。

这是我没有密钥帧的方法：

马里奥（Mario）借助抛物线曲线了。我们根本不需要钥匙帧就可以在悬停的摇动动画上创建动画。正弦曲线完全有能力完成所有工作。

这是Mario的另一个版本，这次是使用CSS Houdini。而且，是的，由于抛物线曲线，他仍在跳跃：

为了良好的衡量，这里是没有密钥帧的更精美的悬停效果（同样，仅镀铬和边缘）：

就是这样！

现在，您有了一些魔术立方体（）曲线曲线以及它们背后的数学。当然，好处是这样的自定义定时功能使我们可以在没有我们通常可以遇到的复杂关键框架的情况下进行精美的动画。

我知道并非每个人都有数学意识，没关系。有一些可以提供帮助的工具，例如Matthew Lein的Ceaser，它使您可以将曲线点拖动以获取所需的东西。而且，如果您还没有书签，Cupic-bezier.com是另一个。如果您想在CSS世界之外与Cupic-Bezier一起玩，我建议您在这里看到一些数学公式。

无论您如何获得立方bezier（）值，希望现在您对它们的力量以及它们如何帮助在此过程中制作更好的代码。

以上是使用Cupic-Bezier（）高级CSS动画的详细内容。更多信息请关注PHP中文网其他相关文章！