moving html element across the screen using requestAnimationFrame in javascript class

Question

Please bear with me... I am learning how to use requestAnimationFrame for simple animation (eg:move ball across the screen.) I got example working using javscript functions. Now I want to use javascript class and methods to do the same thing. I am doing this because next I want to instantiate class multiple times, run and control multiple balls moving across the screen. Issues:

1. Not sure if my class syntax is ideal. (It's a bit of a hack)

2. requestAnimationFrame is running animation too fast.

   ...animationRequest = window.requestAnimationFrame(this.moveBall());

It works as javascript functions https://jsfiddle.net/tjqbpv1e/

but goes too fast (or not at all) when I create a class. https://jsfiddle.net/68vys0hL/

Answer 1

You have some undeclared and extra variables as well as missing this, but other than that it looks like a decent class. The reason why there is no animation (aka too fast), is because you are executing this.moveBall() directly instead of sending this.moveBall as callback to requestAnimationFrame. Also you don't have anything what would control the speed at all. With requestAnimationFrame you have to check how long it passed since previous callback, like you have in original code as unused diff variable.

Speaking of callbacks, it's a bit tricky sending callbacks with this scope, very often you might need .bind(this) to the callback function:

class AnimatedCircle {

  output;
  animated_circle;
  number;
  xpos;
  multiplier;
  animationRequest;
  myContainer;
  screen_width;
  prevTime;
  speed;

  constructor(val_1, val_2) {
    this.val_1 = val_1;  // example of passing values
    this.val_2 = val_2;

    this.animated_circle = document.getElementById('animated_circle');
    this.number = 0;
    this.xpos = 1;                 // new horizontal position
    this.multiplier = 1;
    this.animationRequest = null;
    this.myContainer = document.querySelector('#container');
    this.screen_width = this.myContainer.offsetWidth - 50;
    this.prevTime = 0;
    this.speed = Math.random() * 10; //random speed
  }

  // test method
  test_method() {
    return `${this.val_1} says hello.`;
  }

  moveBall(time) {

    this.animationRequest = window.requestAnimationFrame(this.moveBall.bind(this));
    if (time - this.prevTime < this.speed) //speed control
      return;

    this.prevTime = time;

    // if on screen 
    console.log("got here!");
    if (this.xpos < this.screen_width && this.xpos > 0) {
      this.number++;
    }
    else {
      // when we get to end of screen , then exit function
      return;
    }

    this.xpos = this.xpos + (5);    // horizontal position

    // move on X-Axis
    this.animated_circle.style.transform = `translateX(${this.xpos}px)`;
    console.log("loop");

  }

}
// instantiate class
myAnimatedCircle = new AnimatedCircle('Bob', 'Level22');
// call method
console.log(myAnimatedCircle.test_method());
console.log(myAnimatedCircle.moveBall());

#container{
            border: 1px solid gray;
            background-color: rgb(236, 225, 225);            
            height:60px;
            padding:0px;            
        }            
 #animated_circle{
            height: 35px;
            width: 35px;
            margin:10px;
            background-color: rgb(103, 74, 184);
            border-radius: 50%;
            display: inline-block;
        }

<p id="output"></p>
    <div id="container" >
        <p id="animated_circle"></p>
    </div>