WebGPU 万能动画公式

要实现不同形态/形状之间的动态变换，核心算法很简单，就是通过构造同等数量的顶点/控制点来实现。

在进行动态变换时，通常不同形态或形状之间的顶点数量会不相等。为了使两边的顶点能够一一对应起来，我们可以通过随机或插值的方式来补充顶点。这种方式不会破坏顶点数较少一边的造型，相当于某些点有了分身。通过对对应顶点的插值计算，就能够实现形态的变换。

此万能动画公式的优点在于它的简单性和适用性。无论是对于简单的形状变换还是复杂的动态效果，都可以通过构造同等数量的顶点来实现。而且，运用不同的插值算法，还能灵活地控制形态变换的程度和速度。

示例：Hilbert 曲线

在线运行 Hilbert 曲线动画

代码实现

Hilbert 曲线是一种连续、自避免且自相似的空间填充曲线。

每升一个维度，曲线的顶点数就多 4 倍，基于这个规律，我们用上面的万能动画公式来完成升维/降维变换动画：

pub struct HilbertCurveApp {
   
    // 当前曲线与目标曲线的顶点缓冲区
    vertex_buffers: Vec<wgpu::Buffer>,
    // 当前曲线的顶点总数
    curve_vertex_count: usize,
    // 当前动画帧的索引，用于设置缓冲区的动态偏移
    animate_index: u32,
    // 每一个动画阶段的总帧数
    draw_count: u32,
    // 目标曲线维度
    curve_dimention