26、为图形添加动画效果

为图形添加动画效果

在图形绘制中添加动画效果可以让界面更加生动和吸引人。本文将详细介绍如何使用 requestAnimationFrame 函数实现线条和海龟旋转的动画效果，包括创建动画线条组件、处理动画帧、取消动画以及处理不同类型的绘制命令等内容。

1. 动画设计

在开始实现动画之前，需要进行一些设计工作。当前的绘图组件显示的是绘图的静态快照，我们将添加一个新的 AnimatedLine 组件来表示正在动画的当前线条。随着线条动画的完成，它们将移动到 StaticLines 集合中。

1.1 组件状态管理

• turtle ：存储海龟的当前位置，初始位置为 (0, 0) ，角度为 0 。
• animatingCommandIndex ：表示当前正在动画的命令的数组索引，初始值为 0 。

1.2 绘制命令类型

有两种类型的绘制命令： drawLine 和 rotate 。示例命令如下：

{
    drawCommand: "drawLine",
    id: 123,
    x1: 100,
    y1: 100,
    x2: 200,
    y2: 10