javascript 和 CSS 曲线上的 sin 和 cos 动画

Question

我正在尝试使用 sin 和 cos 为 CSS 图像设置动画以继续 this shape。无法使 CSS 图像在那条弯曲的贝塞尔线上移动。

有人可以协助如何使用 sin 或 cos 这样，如果添加一个 CSS 对象，它会沿着 such a line 顺利移动吗？

这是我在 javascript.

中尝试使用 sin 和 cos 数学使黄色圆圈在该线上移动的代码

谢谢

var field = document.getElementById("field");
 var ball = document.getElementById("ball");
 var ball2 = document.getElementById("ball2");

 var maxX = field.clientWidth - ball.offsetWidth;
 var maxY = field.clientHeight - ball.offsetHeight;

 var duration = 5; // seconds
 var gridSize = 50; // pixels

 var start = null;

 function step(timestamp) {
  var progress, x, y, y2;
  if (start === null)
   start = timestamp;

  progress = (timestamp - start) / duration / 1000; // percent

  x = progress * maxX / gridSize; // x = ƒ(t)
  y = 2 * Math.sin(x); // y = ƒ(x)
  y2 = 2 * Math.cos(x);

  ball.style.left = ball2.style.left = Math.min(maxX, gridSize * x)
    + "px";
  ball.style.bottom = maxY / 2 + (gridSize * y) + "px";
  ball2.style.bottom = maxY / 2 + (gridSize * y2) + "px";

  if (progress >= 1)
   start = null; // reset to start position
      requestAnimationFrame(step);
 }
  requestAnimationFrame(step);

#field {
 position: absolute;
 height: 300px;
 width: 300px;
 z-index: 50;
 top: 20px;
 left: 20px;
}

#ball {
 position: absolute;
 left: 0;
 bottom: 50%;
 width: 40px;
 background: yellow;
  z-index: 5;
 height: 40px;
 border-radius: 200px;
}

#ball2 {
 position: absolute;
 left: 0;
 bottom: 50%;
 width: 20px;
 height: 20px;
  /*background: silver;*/
  border-radius: 100px;
}

<div id="field">
 <div id="ball"></div>
 <div id="ball2"></div>
</div>

Answer 1

requestAnimationFrame 一次调用给定的函数

要制作动画，您需要在给定函数中调用 requestAnimationFrame，通常调用函数本身（虽然更复杂的动画可能会调用其他东西，但这并不重要）

要点是，您需要为每个要设置动画的帧调用 requestAnimationFrame

var field = document.getElementById("field");
var ball = document.getElementById("ball");
var ball2 = document.getElementById("ball2");

var maxX = field.clientWidth - ball.offsetWidth;
var maxY = field.clientHeight - ball.offsetHeight;

var duration = 5; // seconds
var gridSize = 40; // pixels

var start = null;

function step(timestamp) {
  var progress, x, y, y2;
  if (start === null)
    start = timestamp;

  progress = (timestamp - start) / duration / 1000; // percent

  x = progress * maxX / gridSize; // x = ƒ(t)
  y = -2 * Math.cos(x); // y = ƒ(x)
  y2 = 2 * Math.cos(x);

  ball.style.left = ball2.style.left = Math.min(maxX, gridSize * x) +
    "px";
  ball.style.bottom = maxY / 2 + (gridSize * y) + "px";
  ball2.style.bottom = maxY / 2 + (gridSize * y2) + "px";

  if (progress >= 1)
    start = null; // reset to start position
  requestAnimationFrame(step);
}
requestAnimationFrame(step);

#field {
  position: absolute;
  height: 300px;
  width: 300px;
  z-index: 50;
  top: 20px;
  left: 20px;
}

#ball {
  position: absolute;
  left: 0;
  bottom: 50%;
  width: 40px;
  background: yellow;
  height: 40px;
  border-radius: 200px;
}

#ball2 {
  position: absolute;
  left: 0;
  bottom: 50%;
  width: 20px;
  height: 20px;
  background: silver;
  border-radius: 100px;
}

<div id="field">
  <div id="ball"></div>
  <div id="ball2"></div>
</div>

javascript 和 CSS 曲线上的 sin 和 cos 动画

sin and cos animations on a curved line with javascript and CSS

html

javascript

css

animation

trigonometry