试图在有丝分裂模拟中动画细胞分裂答案

【问题标题】：Trying to animate division of cell in mitosis sim试图在有丝分裂模拟中动画细胞分裂
【发布时间】：2018-01-23 02:18:21
【问题描述】：

我正在制作一个有丝分裂模拟器，我希望它在细胞足够大并分裂时运行有丝分裂功能。当它拆分时，我希望它动画从初始 x 值（前一个单元格的 x）到新的 x 值（右侧的 x+10）的拆分。我已经尝试过使用循环和 setTimeout() 来查看是否可以延迟添加 x 以尝试对其进行动画处理，但我似乎无法让它工作。我以前从未在 JS 中使用过动画，因此非常感谢任何建议。

    <html>
    <head>
    <title>Mitosis</title>
    </head>
    <body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
        let c = document.getElementById("canvas");
        let ctx = c.getContext("2d");
        let cells = [];
        cells.push(new Cell(100,100,5));
        function Cell(x,y,r) {
            this.x = x;
            this.y = y;
            this.r = r;
        }
        function update() {

            move();

            draw();
            if(cells.length < 50) {
                grow();
            }
        }
        setInterval(update,100);
        function draw() {
            ctx.clearRect(0,0,500,500)
            for(let i = 0, len = cells.length; i < len; i++) {
                ctx.beginPath();
                ctx.arc(cells[i].x,cells[i].y,cells[i].r,0,2*Math.PI);
                ctx.stroke();
            }
        }
        function move() {
            for(let i = 0, len = cells.length; i < len; i++) {

                cells[i].x += Math.random()*3;
                cells[i].x -= Math.random()*2;
                cells[i].y += Math.random()*3;
                cells[i].y -= Math.random()*2;
            }
        }
        function grow() {
            for(let i = 0, len = cells.length; i < len; i++) {
                if(cells[i].r > 10){
                    mitosis();
                }
                else {
                    cells[i].r+=0.25;
                }
            }
        }
        function mitosis() {
            for(let i = cells.length-1; i >= 0; i--) {
                cells.push(new Cell(cells[i].x,cells[i].y,5))
                cells.push(new Cell(cells[i].x,cells[i].y,5))
                cells.splice(i,1);
            }
        }
    </script>
    </body>
</html>

【问题讨论】：

标签： javascript arrays animation simulation

【解决方案1】：

如果我正确理解了这个问题，当你的大细胞即将分裂时，你可以创建并显示一个“快照”列表，显示两个新细胞在它们再次开始生长之前移动到新位置。

在这种情况下，如果你想/被允许使用 ES2017 功能，这是一个可能的解决方案，它使用真正的睡眠 - 暂停执行 - 而不是超时。（我留给您创建快照列表和 displaySnapshot 函数，该函数会擦除和绘制每个快照。这几乎是微不足道的）

  function sleep(ms) {
     return new Promise(resolve => setTimeout(resolve, ms));
  }
  async function displaySnapshots(snapshots, timeLapse) {
     for (let snap of snapshots) {
        displaySnapshot(snap);
        await sleep(timeLapse);
     }
 }

但不确定你是否想做这样的事情（我认为不会）：

     function sleep(ms) {
         return new Promise(resolve => setTimeout(resolve, ms));
      }

      async function evolve(timeLapse, iterations) {
         for (let i = 0; i < iterations; i++) {
            update();
            await sleep(timeLapse);
         }
     }
     evolve(500, 100);

【讨论】：

我以前从未使用过 es2017。你能指点我一个很好的教程吗？将不胜感激。
@Bestlogo56 这只是 javascript 语言的最新规范。 Async 和 await 是其中的功能。它在当今最常用的浏览器中得到了很好的支持。
哦，好的。感谢您的帮助。
@Bestlogo56 没问题，在我看来，像我建议的那样使用真正的“睡眠”的好处是它可以更容易地推理您的代码：每当您需要暂停执行以获得动画效果时这只是插入一行“等待睡眠（ms）”的问题，否则你将拥有一个嵌套超时，一个用于有丝分裂分裂，一个用于细胞运动。它仍然是可行的，但它使逻辑复杂化。如果你成功了，请告诉我...
我还不能完成它，但当我完成时，我会告诉你的。再次感谢您的帮助。