如何用CSS制作高级动画，这个功能一定要掌握
时间：2023-03-16 18:12:00
科技观察
我们每天都在网上钓鱼。作为前端开发人员，我们比其他人更关注网站变化的细微细节。我一直注意到的一件事是网站上动画的流动性。动画对用户体验有很大的帮助，有时候我们可以通过一些有趣的动画来留住用户。创建高级动画听起来像是一个困难的话题，但好消息是在CSS中，您可以将多个简单动画叠加在一起以创建更复杂的动画。在本课中，我们将学习以下几点：什么是贝塞尔曲线以及如何使用单行CSS创建“复杂”动画如何将动画叠加在一起以创建高级动画如何创建滚轮通过应用上面学到的两点来制作过山车动画什么是贝塞尔曲线CurveCSS中的cubic-bezier函数是一个缓动函数，它使我们可以完全控制动画随时间的行为方式。以下为官方定义：贝塞尔缓动函数是由四个实数定义的松弛函数，指定贝塞尔曲线的两个控制点P1和P2，其端点P0和P3固定在(0,0)和(1,1).P1和P2的x坐标被限制在[0,1]范围内。什么是缓动函数？一条线性曲线设想了两个点P0和P1，其中P0是动画的起点，P1是终点。现在想象另一个点在两点之间线性移动，如下所示。这称为线性曲线，是最简单的动画。二次贝塞尔曲线如下图所示，带有三个点。P0、P1和P2。我们想将动画从P0移动到P2。在这种情况下，P1是控制动画曲线的控制点。二次贝塞尔概念：P0和P1之间，P1和P2之间（用灰线表示）连接虚线点Q0沿P0和P1之间的直线移动。同时，Q1点沿P1和P2之间的直线移动。在Q0和Q1之间连接一条虚线（用绿线表示）。在Q0和Q1开始移动的同时，B点开始沿绿线移动。采取的路径是动画路径。请注意，Q0、Q1和B的移动速度不同。他们都必须同时开始并同时完成他们的路径。因此，每个点都根据其移动的线的长度以适当的速度移动。三次贝塞尔曲线三次贝塞尔曲线由4个点组成。P0、P1、P2和P3。动画从P0开始，到P3结束。P1和P2是我们的控制点。三次贝塞尔曲线的工作原理如下：连接（P0，P1），（P1，P2）和（P2，P3）之间的虚线，分别沿线（P0，P1），（P1）用灰线点Q0，Q1和Q2表示,P2)和(P2,P3)移动连接(Q0,Q1)和(Q1,Q2)之间的虚线，用绿线表示。点R0和R1分别沿线(Q0,Q1)和(Q1,Q2)移动，连接R0和R1之间的线（用蓝线表示）。最后，B点沿着R0和R1之间的连线移动，B点所走的路径就是动画路径如果你想更好地理解cubicbezier是如何工作的我建议你看看这个desmos链接。玩转控制点，看看动画是如何随时间变化的。（请注意，链接中的动画用黑线表示）。堆叠动画具有许多步骤的大型动画可以分解为多个较小的动画。在css中，这是通过添加animation-delay属性来实现的。计算延迟很简单，把你要计算动画延迟的动画之前的所有动画的时间加起来。例如：动画：movePointLeft4s线性向前，movePointDown3s线性向前；在这里，我们有两个动画，movePointLeft和movePointDown。movePointLeft的动画延迟为零，因为它是我们要首先运行的动画。movePointDown的动画延迟为4秒，因为movePointLeft将在这段时间后完成。因此，animation-delay属性：animation-delay:0s,4s;请注意，如果两个或多个动画同时启动，它们的动画延迟将相同。此外，当您计算即将开始的动画的延迟时，将它们视为一个动作。例如：动画：x4s线性向前，y4s线性向前，跳跃2s线性向前；假设x和y同时开始。在这种情况下，x和y的动画延迟将为零，跳跃动画的延迟将为4秒（而不是8秒！）。动画延迟：0s，0s，4s；创建过山车现在您已经了解了以上内容，是时候应用它了。了解动画过山车路径由三部分组成：滑动部分、循环部分和一些动画，用于在上面的两个动画之间创建水平空间我们将从创建一个简单的球开始，它将充当我们的滚轮的“汽车”杯垫。hmtl部分：
css部分：.cart{background-color:rgb(100,210,128);高度：50px；宽度：50px；边框：1px纯黑色；边界半径：50px；位置：绝对；左：10vw；top:30vh;}滑动部分球的滑动部分可以用cubic-bezier函数创建！该动画由2个动画组成，一个沿x轴动画，另一个沿y轴动画。X轴动画是沿X轴的普通线性动画。它的关键帧如下：@keyframesx{to{left:40vw;}将其添加到球路径的动画属性中，例如animation:x4slinearforwardsyaxis动画是我们将使用cubic-bezier函数的部分。首先定义动画的关键帧。我们希望起点和终点之间的差异非常小，以使球达到几乎相同的高度。@keyframesy{到{顶部：29.99vh；}}}现在让我们考虑三次贝塞尔函数。我们希望我们的路径首先向右缓慢移动，然后当它滑动时，它应该走得更快。向右缓慢移动意味着$P1$将沿x轴移动。所以，我们知道它在(V,0)。我们需要选择一个合适的V使我们的动画向右缓慢移动，但又不会占据整个空间。在这种情况下，我发现0.55效果最好。为了达到滑动的效果，我们需要将P2沿Y轴向下移动（负值），所以P2=(X,-Y)。Y应该是一个很大的值。在这种情况下，我选择Y=5000。要获得X，我们知道我们的动画速度应该在滑动时更快，而在再次上升时更慢。因此，X越接近零，滑动时动画就越陡峭。在这种情况下，令X=0.8。现在，我们有了一个立方贝塞尔函数：立方贝塞尔(0.55,0,0.2,-800)。为动画属性添加关键帧：animation:x4slinearforwards,y4scubic-bezier(0.55,0,0.2,-5000)forwards;这是我们动画的第一部分，所以动画延迟为零。我们应该加一个animation-delay属性，因为从下面的动画来看，动画的开始时间会和第一个动画不一样。动画延迟：0s，0s；地址：https://codepen.io/smashingmag/pen/VwxXBQb添加水平空间在做循环之前，小球要沿着X轴移动一会儿，所以两个动画之间是有空间的。定义关键帧@keyframesx2{to{left:50vw;}}添加到动画动画中：x4slinearforwards,y4scubic-bezier(0.55,0,0.2,-5000)forwards,x20.5slinearforwards;此动画应在4秒的幻灯片动画之后开始，因此动画延迟将为4秒。动画延迟：0s，0s，4s；地址：https://codepen.io/smashingmag/pen/dyemExY循环部分要在CSS中创建一个圆（循环），我们需要将圆移动到循环的中心，然后从那里开始动画。圆的半径是100px，所以我们把圆的位置改到top：20vh（30是想要的半径（这里是10vh））。然而，这需要在幻灯片动画完成后发生，因此我们将创建另一个持续时间为0秒的动画并添加合适的动画延迟。关键帧：@keyframespointOfCircle{to{top:20vh;}}添加到动画animation:animation:x4slinearforwards,y4scubic-bezier(0.55,0,0.2,-5000)forwards,x20.5slinearforwards,pointOfCircle0slinearforwards;添加动画延迟，4.5s：animation-delay:0s,0s,4s,4.5s；循环本身创建了一个圆形动画：创建一个关键帧，将球移回其原始位置，然后旋转球。@keyframesloop{from{transform:rotate(0deg)translateY(10vh)rotate(0deg);}to{转换：旋转（-360deg）translateY（10vh）旋转（360deg）；}}添加到Inanimation:animation:x4slinearforwards,y4scubic-bezier(0.55,0,0.2,-5000)forwards,x20.5slinearforwards,pointOfCircle0slinearforwards,loop3slinearforwards;添加动画延迟，这里是4.5s：animation-delay:0s,0s,4s,4.5s,4.5s;地址：https://codepen.io/smashingmag/pen/mdLxZdR添加水平空间就差不多完成了，最后只需要跟着动画后x轴移动小球不至于完全停止在上图中的循环之后。关键帧：@keyframesx3{to{left:70vw;}}添加到动画中：动画：x4s线性向前，y4scubic-bezier(0.55,0,0.2,-800)向前，x20.5s线性向前，pointOfCircle0s线性向前，loop3s线性向前，x32s线性前锋；加上适当的延迟，这里是7.5s：animation-delay:0s,0s,4s,4.5s,4.5s,7.5s;地址：https://codepen.io/smashingmag/pen/wvjmLKp总结在本节中，我们展示了如何组合多个关键帧来创建复杂的动画路径。我们还介绍了贝塞尔曲线以及如何使用它们来创建您自己的缓动函数。建议大家自己动手，以便更好的掌握css动画。来源：https://www.smashingmagazine.com/2022/10/advanced-animations-css/
