В JavaScript существует несколько методов создания циклического движения на основе функции косинуса. Вот несколько подходов:

1. Использование функции Math.cos(). Вы можете использовать функцию Math.cos()в JavaScript для генерации циклического движения на основе косинуса. Применяя функцию косинуса к входному значению (например, времени или углу), вы можете получить циклический выходной сигнал. Вот простой пример, который анимирует положение элемента по оси X на основе косинуса:

let time = 0;
function animate() {
  time += 0.01;
  const x = Math.cos(time) * amplitude; // Adjust amplitude as needed
  // Update element's position using x
  requestAnimationFrame(animate);
}
animate();

2. Использование CSS-анимации. Еще один способ добиться циклического движения на основе косинуса — использовать CSS-анимацию. Вы можете определить анимацию ключевого кадра, которая использует функцию transformи значение на основе косинуса. Вот пример:

@keyframes cyclicMotion {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px * cos(var(--time)));
  }
}
.element {
  animation: cyclicMotion 2s infinite;
}

3. Реализация собственного алгоритма. Если вам нужен больший контроль над движением, вы можете реализовать собственный алгоритм. Это включает в себя вычисление значений косинуса через определенные промежутки времени и их использование для соответствующего обновления движения. Вот простой пример:

let time = 0;
const interval = 0.1;
const amplitude = 100; // Adjust as needed
setInterval(() => {
  const x = Math.cos(time) * amplitude;
  // Update element's position using x
  time += interval;
}, 16); // 16ms corresponds to approximately 60 FPS