javascript - 如何使用图形方程在 CSS 和 JavaScript 中创建动画？

Question

使用纯 CSS 创建复杂的动画需要我花费时间和可能 100 行代码。所以我的问题是如何使用图形方程在 CSS 和 JavaScript 中创建动画？正如我们所知，您可以在图形中创建任何形状、大小或图形方程，例如，这是一个 y=-|sin(x)| 的图形:

如果我想要类似于此图的动画(其中 0 < x < pi):

我只是采用不同的 x 和 y 值并将这些值放入我的 CSS 动画代码中:

div {
  width: 10px;
  height: 10px;
  background-color: red;
  position: relative;
  border-radius: 50%;
  animation-name: example;
  animation-duration: 1s;
}

@keyframes example {
  5%  {left:15.7079632679px; top:15.643446504px;}
  10% {left:31.4159265359px; top:30.9016994375px;}
  15% {left:47.1238898038px; top:45.399049974px;}
  20% {left:62.8318530718px; top:58.7785252292px;}
  25% {left:78.5398163397px; top:70.7106781187px;}
  30% {left:94.2477796077px; top:80.9016994375px;}
  35% {left:109.955742876px; top:89.1006524188px;}
  40% {left:125.663706144px; top:95.1056516295px;}
  45% {left:141.371669412px; top:98.7688340595px;}
  50% {left:157.079632679px; top:100px;}
  55% {left:172.787595947px; top:98.7688340595px;}
  60% {left:188.495559215px; top:95.1056516295px;}
  65% {left:204.203522483px; top:89.1006524188px;}
  70% {left:219.911485751px; top:80.9016994375px;}
  75% {left:235.619449019px; top:70.7106781187px;}
  80% {left:251.327412287px; top:58.7785252292px;}
  85% {left:267.035375555px; top:45.399049974px;}
  90% {left:282.743338823px; top:30.9016994375px;}
  95% {left:298.451302091px; top:15.643446504px;}
  100% {left:314.159265359px; top:0px;}
}

<div></div>

但是当动画很复杂时，写入所有这些值会花费太多时间，如您在此图中所见:

创建一个 JavaScript 是否有效，我只在其中输入方程和方程的范围，以便它自动采用不同的 x 和 y 值并相应地执行动画？

这样做的最大优势在于，您只需将动画的方程式放入该脚本中，即可轻松创建任何类型的复杂动画。

Answer 1

希望我能回答，

但是，是的，我猜它在 javascript 中会更有效，而不是为动画绘制 x 和 y 的单个值，您可以只使用 for 循环并按您想要的程度递增(为了平滑)。就像这样:

for(var i  = 0; i < (Whatever range you want); i + your increment){
animation code
}

第二个问题的答案:是的，这样会更有效率。