声明性编程的不合理有效性

我展示了minAnim.js，这是一个100Loc的小库，但功能齐全，用于声明性地构建动画，以及为什么有人想要这样做。好好享受吧！蓝色圆圈的动画相当复杂。它由多个阶段组成。(1)圆圈变大了。(2)它继续以更快的速度增长，因为它向右发射。(3)暂停。(4)它向中间移动。(5)它再次暂停。(6)缩小为零。所有这些都由单个对象anim_Circle(使用minAnim.js编写)捕获，该对象声明动画正在执行的操作：01：02：//cx=location|cr=Radius 03：let anim_Circle=anim_const("；cx"；，100)04：.seq(anim_const("；cr"；，0))05：//(1)Growth。06：.seq(anim_interpolated(ease_cubic，"；cr"；，/*val=*/10，/*time=*/3))07：//(2)生长时向右转。08：.seq(anim_interpolated(ease_cubic，"；cx"；，/*val=*/300，/*time=*/1)09：.par(anim_interpolated(ease_cubic，"；cr"；，70，1))10：//(3)暂停。11：.seq(anim_delay(/*time=*/3))12：//(4)返回左侧。13：.seq(anim_interpolated(ease_cubic，"；cx"；，100，1))14：//(5)再次暂停。15：.seq(anim_delay(/*time=*/2))16：//(6)缩小为零。17：.seq(anim_interpolated(ease_cubic，"；cr"；，0，1))；18：

整个动画由一个基本体和三个组合器构建而成：anim_interpolated(ease、name、val、time)，以在持续时间中将名称更改为值val的命名值。

anim_Circle是一个函数，可以这样调用：val=anim_Circle(T)，它返回一个对象val。val.cx和val.cr具有动画指定的值。就是这样。它不会修改DOM。它不编辑圆标签。给定时间t0，它在时间t0计算cx和cr。简单点，笨蛋！下面是不同t值的val.cx和val.cr的值的曲线图。该绘图代码在不同的时间调用anim_Circle来绘制结果。函数anim_Circle就是这些曲线图，因为它不计算其他任何内容。奇妙的说法是，anim_Circle不会改变其他任何事情，也就是说它是无副作用的，或者说是折射透明的。

订单：点击此链接，将复制到剪贴板上的内容粘贴到浏览器的控制台中，然后按Enter键。这会立即更新圆的动画和情节，因为剪贴板中的代码会覆盖anim_Circle的定义！回滚到顶部以查看新的动画和图表。因为我们的页面是声明性的，所以动画和情节都是由anim_Circle的定义驱动的。

'；已复制到剪贴板的代码为：01：02：//cx=location|cr=RADIUS 03：ANIM_CIRCLE=ANIM_CONST("；CX"；，100)04：.seq(ANIM_CONST("；cr"；，0))05：//(1)增大大小。06：.seq(anim_interpolated(ease_cubic，"；cr"；，/*val=*/10，/*time=*/3))07：//(2)生长时向右转。08：.seq(anim_interpolated(ease_cubic，"；cx"；，/*val=*/300，/*time=*/1)09：.par(anim_interpolated(ease_cubic，"；cr"；，70，1))10：//(3)收缩为零。11：.seq(anim_interpolated(ease_cubic，"；cr"；，0，1))；PLOT()12：

您可以探索不同的定义anim_Circle。随便玩吧。尝试在控制台中评估anim_Circle(0)、anim_Circle.uration、anim_Circle(anim_Circle.uration/2.0)，以了解anim_Circle返回的内容。要返回到事件的原始状态，请单击此链接将旧代码复制到剪贴板。

。将文本粘贴到您的控制台中，然后按Enter键。一切都会恢复原状。