Отрывистая проблема с анимацией с помощью requestAnimationFrame () - PullRequest
Новая
       27

Отрывистая проблема с анимацией с помощью requestAnimationFrame ()

0 голосов
/ 24 марта 2020

Я пытаюсь оживить круг, чтобы двигаться медленно, используя requestAnimationFrame (); но уменьшение скорости приводит к резкому движению круга. Как сделать эту анимацию плавной.

HTML: 

<div class="box"></div>

CSS: 

.box {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: red;
  position:absolute;
  top:0;
  left:0;
}

JS: 

const circle = document.querySelector(".box");
var speed = 0 ;
function animate() {
 speed +=0.2; 
 circle.style.left = `${speed}px`

  requestAnimationFrame(animate);
}
animate();


const circle = document.querySelector(".box");
var speed = 0 ;
function animate() {
 speed +=0.1; 
 circle.style.left = `${speed}px`

  requestAnimationFrame(animate);
}
animate();
.box {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: red;
  position:absolute;
  top:0;
  left:0;
}
<div class="box"></div>
...