0

请原谅问题标题，但我真的不知道如何总结问题。

我正在开发一个 Electron 项目，我们使用 Animejs 创建动画演示。它主要是通过淡入淡出、translateY、translateX 等方式将文本带到屏幕上。然后几秒钟后，文本被动画化，新文本被动画化。

该应用程序的主要目的是用户可以将演示文稿保存为视频。所以我们在绘画事件上使用电子来捕获每个渲染的帧。这工作正常。但我认为这不是正确的方法，因为浏览器的帧速率不是恒定的，而且它只会在有运动时触发“绘画”事件，所以我们必须想办法使用最后写入的帧来填充缺少帧的间隙。这也可以，但它并不完美，而且有一点问题。

我认为最佳解决方案是拥有一个对象数组，其中包含每个帧的每个元素的预定坐标。然后我可以遍历数组/帧并使用 js 正确定位每个元素，然后将该帧作为位图写入磁盘。所以不再缺少帧。

例如，从左到右为两行文本设置动画可能看起来像这样（为简洁起见，只有两帧）：

 const frames = [
{
  coordinates: [
    {
      elId: "text-1",
      left: 50, // px
      top: 150, // px
    },
    {
      elId: "text-2",
      left: 50, // px
      top: 180, // px
    },
  ],
},
{
  coordinates: [
    {
      elId: "text-1",
      left: 51, // px
      top: 150, // px
    },
    {
      elId: "text-2",
      left: 51, // px
      top: 180, // px
    },
  ],
},

];

所以我的问题是，有没有人知道一个动画库，它可以让我们像 Animejs 或 Greensock 那样在 js 中编写动画，但库不是实时运行动画，而是吐出类似于上述示例的对象数组？

4

0 回答 0