paperjs - 如何在 onFrame 中组合动画？

Question

我的目标是让波浪段从屏幕底部移动到顶部，同时为波浪设置动画。我用来制作 wave 的代码来自 paperjs.org：

http://paperjs.org/tutorials/animation/creating-animations/#animating-path-segments

理想情况下，我想用固定在视口左下角和右下角的点来关闭路径。这样我就可以用纯色填充波浪。

Answer 1

只需在生成均匀分布的段的 for 循环之前和之后在路径中添加点：

path.add(new Point(0, 1) * view.size);

// Add 5 segment points to the path spread out
// over the width of the view:
for (var i = 0; i <= amount; i++) {
path.add(new Point(i / amount, 1) * view.size);
}

path.add(new Point(1, 1) * view.size);

这将为您提供锚定到视图底部的点。要考虑新段，请将 onFrame 函数中的 for 循环更改为：

for (var i = 1; i <= amount+1; i++) {