如何为js海龟分形制作动画？答案

【问题标题】：How to animate js turtle fractals?如何为js海龟分形制作动画？
【发布时间】：2019-04-12 09:19:40
【问题描述】：

我需要使用 js turtle library 绘制分形，所以，分形是动画的，直到它完全像 python 乌龟示例 here 那样绘制

我已经尝试了命令here。文档中有一个名为animate 的函数，但我无法使用它，它只会等待一段时间然后在没有任何动画的情况下绘制分形。

我输入命令输入animate(demo, 1000)

有什么建议吗？

如果我不能在 js turtle 中使用动画还有另一个快速简单的库可以完成绘制分形的工作吗？！

【问题讨论】：

向我们展示您尝试过的代码。您可能需要等待绘图过程的每个步骤。看来您只等待一次（或同时等待）。
@JensV，我输入的内容具有误导性，但现在已更新。我刚刚下载了带有启动代码的库并尝试了。你可以在这里试试rawgit.com/wrschneider99/js-turtle/master/turtle.html
库中的animate只使用setInterval。这意味着动作的移动实际上并不是动画。它只是等待并执行操作。在等待期间，执行仍在继续。要获得与您的 python 示例相同的行为，您可能可以查看 JS async await 以使工作更轻松

标签： javascript turtle-graphics

【解决方案1】：

您没有正确使用animate()。您不能只将其应用于已完成的程序并期望其行为发生变化。相反，您需要将其合并到程序中。应该有一个函数可以在每次调用时绘制动画的一部分。然后让animate() 一遍又一遍地调用它。重写你的例子：

function square(side) {
    repeat(4, function () {
        forward(side);
        right(90);
    });
}

var s = 100

function draw() {
    square(s);
    right(36)

    s -= 10

    if (s < 0) {
        s = 100
        clear()
    }
}

function demo() {
    hideTurtle();
    colour(0, 0, 255, 1);
    animate(draw, 500);
}

通过demo() 调用它，不要在它上面调用animate()。它的基本动画单位是square。如果您想看到正在绘制的正方形，那么您需要重新设计代码以使基本动画单元成为正方形的边（即 line。）

【讨论】：