如何使用三次贝塞尔曲线来改变关键帧动画的速度？

Posted 2023-03-06

【中文标题】如何使用三次贝塞尔曲线来改变关键帧动画的速度？

【英文标题】：How to use cubic-bezier to change the speed of a keyframe animation?

【发布时间】：2017-08-13 21:36:28

【问题描述】：

我正在尝试创建一个@keyframe 动画，以从屏幕底部弹出一个框，然后让它从 html 文档正文的顶部反弹。我用来执行此操作的方法不允许您在动画期间更改速度，实习生不会使它看起来很逼真（参见下面的代码）。

我找到了answer 来回答我的问题，唯一的问题是我真的不明白cubic-bezier 是如何创建动画的。在我继续之前，我想了解代码在做什么，然后将其添加到我的项目中。所以，是的，我猜这个问题的标题不应该是“如何使用立方体贝塞尔曲线来改变关键帧动画的速度？”，而是 “立方体贝塞尔曲线是如何工作的以及它在this 实例中的工作方式”。如果有人能稍微解释一下，甚至给我一个简单的代码示例以供遵循和理解，我将非常感激。

注意：我查看了Mozila Developer Network 的这个属性，但仍然不完全理解它在@keyframe 动画中的工作原理。

document.querySelector('#button').addEventListener('click', function() 
  document.querySelector('#square').className = 'bounce';
  document.querySelector('#square').style.display = 'block';
);
document.querySelector('#square').addEventListener('animationend', function(e) 
  if (e.animationName == 'animate-in') 
    document.querySelector('#square').removeAttribute('class');
  
);

#button 
  display: block;
  position: absolute;
  left: 75px;


#square 
  display: none;
  position: relative;
  width: 50px;
  height: 50px;
  background-color: tomato;
  animation-fill-mode: forwards;


.bounce 
  animation: animate-in 1.5s;


@keyframes animate-in 
  20%,
  50%,
  80%,
  100% 
    transform: translateY(0);
  
  40% 
    transform: translateY(-30px);
  
  60% 
    transform: translateY(-15px);
  
  0% 
    transform: translateY(100vh);
  

<input type="button" id="button" value="Run Animation">
<div id="square"></div>

【问题讨论】：

您可能想使用这个网站，该网站可视化三次贝塞尔曲线的实际工作原理：cubic-bezier.com

【参考方案1】：

您可能会发现，通过玩https://matthewlein.com/ceaser/ 上的方框，您对三次贝塞尔曲线有了不错的了解。

想象一个盒子。如果您在以下位置放置标记： 框的左下角，它的值为 (0) 框的右上角，它的值为 (1)

但是三次贝塞尔曲线有 4 个值，例如.... 三次贝塞尔曲线(0.755, 0.050, 0.855, 0.060);

这是因为实际上有两个标记（或起点）。

前两个值是从框的左下角的起点获取的，其值为(0,0)。当您将标记移到 right 时，第一个值会发生变化，例如 (0.755, 0.000)。当您将标记 向上 移动时，第二个值会发生变化，例如（0.755，0.050）。

后两个值是从一个框右上角的起点得到的，其值为(1,1)。当您将标记移到 left 时，第三个值会发生变化，例如 (0.855, 1.000)。当您将标记 向下 移动时，第四个值会发生变化，例如（0.855，0.060）。

值 1 和 3（左和右）控制时间，值 2 和 4（上和下）控制动画。

将这些值放在一起得到 (0.755, 0.050, 0.855, 0.060);

我已经包含了一个图表（它没有显示与上面示例相同的值）但应该有助于理解上面的信息。

【讨论】：

非常感谢，我开始明白了。如果我错了，请纠正我，但 cubic-bezier 只能与 transition-timing-function 一起使用吗？

查看w3schools.com/cs-s-ref/css3_pr_animation-timing-function.asp 了解更多信息。它指出您可以使用动画计时功能：linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier( n,n,n,n)|初始|继承;