是否可以为画布图像序列加载图像，图像按顺序加相反顺序？[关闭]

问：

我正在尝试使用 ScrollTrigger 和 canvas 来播放图像序列及其在滚动时的反转。我使用每个文件名升序排列的 75 张图像很好地播放了序列。我还没有找到解决方案，是如何按文件名的升序加载这 75 张图像的画布，然后以相反的顺序加载它们，因此它们会加载 0->75 75-> 0。这将使帧数增加一倍，达到 150 帧，以便序列在同一滚动期间播放和反转。（基本上是一个在同一滚动期间打开和关闭的盒子，而不是在向下滚动页面时打开的盒子，然后只有在用户向上滚动页面时才关闭）

这是我按升序加载 75 张图像的代码：

const frameCount = 75; var currentFrame = index => ( '/pathtoimage_${index.toString().padStart(4, '0')}.png' );

我正在尝试通过 js 完成 150 帧，以免我的图像文件数量增加一倍/使网站负载膨胀。

我喜欢将 scrub 与 ScrollTrigger 一起使用的效果，因为否则序列在图像中移动得太快，这就是为什么切换动作解决方案不理想的原因。

下面是一个代码笔，它显示了当 div 在容器中途滚动时启动序列的 ScrollTrigger，并且画布图像将同步到滚动，类似于著名的 apple airpod 示例。但现在，该序列仅在滚动时按升序播放 75 个加载的图像（如当前代码中预期的那样）;我怎样才能将相同的 75 张图像加载到画布上，但按降序排列，这样我就有 150 张图像在滚动时播放？在 codepen 示例中，这意味着 airpods 显示从黑色开始，滚动时变亮到白色，然后回到黑色，因为画布图像在所有 150 张图像中排序。

https://codepen.io/Morgan-Brown-the-builder/pen/eYxEpWJ

谢谢！