javascript - 为什么物体不移动到坐标？

Question

我实现了一个带有属性的 Circle 类:

• x - x坐标的初始值
• y - y坐标的初始值
• 直径 - 宽度和高度的值
• color - 填充颜色

方法:draw() - 在屏幕上绘制由指定属性描述的元素。

方法:move({x = 0, y = 0}) - 沿向量 (x, y) 移动绘制的对象 - 每一个时间段 (100ms) 变化(加\减)坐标由x和y的值按照。

以及内部方法update()，它根据对象的颜色、x、y值相应地改变绘制圆的位置。

告诉我为什么我的圆圈没有以 1 秒的间隔移动到给定的坐标？

class Circle {
    constructor(options) {
        this.x = options.x;
        this.y = options.y;
        this.diameter = options.diameter;
        this.color = options.color;
    }

    draw() {
        let div = document.createElement('div');
        div.style.position = 'absolute';
        div.style.left = `${this.x}px`;
        div.style.top = `${this.y}px`;
        div.style.width = `${this.diameter}px`;
        div.style.height = `${this.diameter}px`;
        div.style.border = "1px solid;";
        div.style.borderRadius = "50%";
        div.style.backgroundColor = `${this.color}`;
        document.body.appendChild(div);
    }

    move({x = 0, y = 0}) {
        let circle = document.getElementsByTagName('div')[0];
        setInterval(function moved() {
            circle.style.left = circle.offsetLeft + x + "px";
            circle.style.top = circle.offsetTop + y + "px";
        }, 1000)
    }
    _update() {
        this.x = x.move;
        this.y = y.move;
    }
}
let options = {
    x: 100,
    y: 100,
    diameter: 100,
    color: 'red'
};
let circle = new Circle(options);
circle.draw();
circle.move({x: 200, y: 200});

Answer 1

这是一个初始示例(如果我得到了您想要的)，您可以使用它来获得您想要的。

快速总结:

• 用户设置所需的圆实例坐标
• 可以通过将 duration 选项传递给 move(...) 方法来更改动画的持续时间，例如移动({x:100，y:100，持续时间:2500})
• 圆圈将使用 setInterval 开始自动收报机以重新定位圆圈
• x 和 y 之间的实际坐标将根据给定 duration 的进度计算
• 当动画结束时，x 和 y 坐标将通过 move(...) 设置为最初给定的坐标> 整个圆的移动就完成了

注意事项:

• 我知道你没有要求动画，但我敢假设，这种演示会更有效帮助您理解和/或获得结果。
• 我提取了您的代码部分，您在其中设置圆圈的位置以遵守 DRY原则。
• 为了代码更易于演示，我将坐标降低到较低的值，但它也适用于较大的值
• 在现代浏览器中使用 setInterval 为任何东西设置动画被许多人认为是不好的做法是有原因的。如果您想要一种更好的动画方法，请阅读 window.requestAnimationFrame()功能。我在这里使用了setInterval，因为动画不是这道题的主题。

class Circle {
  constructor(options) {
    Object.assign(this, 
      // the default options of the Circle constructor
      {      
        x: 10,
        y: 10,
        diameter: 50,
        color: 'red'
      }, 
      // the options, that were passed and will be used to override the default options
      options
    );
  
    // the circle's move/update animation interval in ms (similar to FPS in games)
    this.updateInterval = 100;
  }

  draw() {
    const div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.width = `${this.diameter}px`;
    div.style.height = `${this.diameter}px`;
    div.style.border = "1px solid;";
    div.style.borderRadius = "50%";
    div.style.backgroundColor = `${this.color}`;
    document.body.appendChild(div);
    // store the reference to the div element for later use
    this.circle = div;
    // use the refacterd positioning function
    this._reposition();
  }

  move({x = 0, y = 0, duration = 1000}) {
    // store coordinates to use, when the circle will be moved
    this.initialX = this.x;
    this.initialY = this.y;
    this.destX = x,
    this.destY = y;
    
    // store the current time in ms
    this.startTime = Date.now();
    this.duration = duration
    
    // if a previous setInterval of this circle instance is still running, clear it (stop it)
    clearInterval(this.intervalId);
    // start the update (tick/ticker in games)
    this.intervalId = setInterval(this._update.bind(this), this.updateInterval);
  }
  
  _update() {
    // calculate the elapsed time
    const elapsed = Date.now() - this.startTime;    
    // calculate the progress according to the total given duration in percent
    let progress = elapsed / this.duration;
    // bound to [n..1]
    if (progress > 1) {
      progress = 1;
    }
    
    // set the x and y coordinates according to the progress...
    this.x = this.initialX + (this.destX * progress);
    this.y = this.initialY + (this.destY * progress);
    // ...and reposition the circle    
    this._reposition();
    console.log('update', this.x, this.y, progress);
    
    // stop the update, when the end is reached
    if (elapsed >= this.duration) {
      console.log('stopped', this.x, this.y, progress);
      clearInterval(this.intervalId);
    }
  }
  
  _reposition() {
    // set the position of the circle instance
    this.circle.style.left = `${this.x}px`;
    this.circle.style.top = `${this.y}px`;
  }
}

const options = {
  x: 10,
  y: 10,
  diameter: 50,
  color: 'red'
};

const circle = new Circle(options);
circle.draw();
circle.move({x: 300, y: 50});