Блог

есть точка a и точка b, вам нужно написать анимационную функцию, которая будет анимировать переход из одной точки в другую за определенное время, как в css — простота перехода-5 секунд

  const start = Date.now();
const seconds = duration / 1000;
const fps = 1000 / 60;
const endpoint = 280   seconds * 360;

let currentPoint = 0;

const loop = () => {
  const p = start   duration - Date.now();

  const angleStep = (endpoint - currentPoint) / (p / fps);

  let delta = currentPoint   angleStep < endpoint ? angleStep : endpoint - currentPoint;

  if (currentPoint < endpoint) {
    currentPoint  = delta;

    wheelInstance.rotate(delta);
    wheelInstance.renderFrame();

    requestAnimationFrame(loop);
  }
};

loop();
 

ВНИМАНИЕ! я не могу использовать css в canvas

Существуют API, которые предлагают функции JS, которые по существу преобразуют свойства CSS, вот один из них: transitionjs

Это пример с их сайта для простого перехода:

 function animate(element) {
    transition.begin(element, [
        ["transform", "translateX(0)", "translateX(200px)", "1s", "ease-in-out"],
        ["background-color", "#ffffff", "#ADB5C7", "500ms", "linear"]
    ]);
}
 

Я проверил файлы API, там нет файлов CSS.