为什么对象不移动到坐标？

Question

我实现了一个具有以下属性的Circle类：

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

方法：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(...)方法来更改动画的持续时间，例如move({x: 100, y: 100, duration: 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});