ABeamer：一个逐帧动画框架

在最近的一篇文章中，Zach Saucier 演示了 DOM благодаря элементу <canvas> 可以实现的惊人功能。拍摄元素的快照并对其进行操作以创建爆炸动画非常流畅，并且完美地例证了过去几年复杂动画取得的进步。

ABeamer 是一个新的动画生态系统，它利用了这些新概念。该生态系统的核心是 Web 浏览器动画库。但是，它不仅仅是另一个动画引擎。ABeamer 旨在在 Web 浏览器中构建逐帧动画，并使用渲染服务器生成 PNG 文件序列，最终可用于创建动画 GIF 或导入到视频编辑器中。

首先，简单了解一下 ABeamer 可以做什么

一个关键特性是它能够连接到远程源。这使我们能够使用 Web 浏览器构建动画，并将其“传送”到云端进行远程渲染，因此得名“ABeamer”。

ABeamer 不仅凭借其将元素渲染为文件序列的能力在其他动画框架中脱颖而出，而且还包含一套丰富且可扩展的 工具集，该工具集仍在不断发展，避免了不断重写常见动画的需要。

其目的不是成为另一个 Velocity 或类似的实时 Web 浏览器动画库，而是使用已成为主流的 Web 技术，使我们能够从浏览器创建纯动画、图像叠加和视频编辑。

我计划为 ABeamer 创建一个充当动画编辑器的界面。这将抽象化编写代码的需求，使广告网络和电子商务公司等地方的人员能够轻松使用这项技术，他们可能希望为客户提供一个简单的工具来构建丰富的动画内容，而不是用于广告位的静态图像。它可以创建标题、滤镜效果、过渡效果，并最终直接从图像幻灯片构建视频，而无需安装任何软件。

换句话说，利用所有这些效果和功能将不需要任何编码技能，从而为新的用例和更广泛的受众打开了大门。

但是如果使用了 JavaScript，安全性如何呢？ABeamer 有两种服务器渲染模式：一种用于公司内网等受信任的环境，通过发送文件以构建的方式渲染 HTML/CSS/JavaScript；另一种用于云渲染服务器等不受信任的环境，通过 AJAX 发送故事和资产来渲染传送的故事。传送在客户端和服务器端都对内容进行清理。插值过程中使用的 JavaScript 不允许使用，任何不在授权列表中的插件也不允许使用。ABeamer 支持表达式，它们是安全的、可传送的，并且在许多情况下，可以替代 JavaScript 代码。

最后一个关键特性是解耦。ABeamer 不直接与文档 DOM 操作，而是使用适配器作为中间人，使我们能够动画化 SVG、canvas、WebGL 或任何其他虚拟元素。

ABeamer 入门

现在我们已经了解了 ABeamer 的许多功能，让我们深入了解一下如何开始使用它。

安装

ABeamer 动画库可以从 GitHub 上下载或克隆，但为了生成动画 GIF、电影或简化入门流程，您需要使用 npm 安装它。

# 1. install nodejs: https://www.nodejs.org

# 2. install abeamer
$ npm install -g abeamer

# 2. learn how to configure puppeteer to use chrome instead of chromium
$ abeamer check

# 3. install a render server (requires chrome web browser) 
$ npm install -g puppeteer

# 4. install imagemagick: https://imagemagick.org.cn

# 5. install ffmpeg: https://www.ffmpeg.org/

Puppeteer 是单独安装的，因为也支持其他服务器渲染，例如 PhantomJS。不过，在 Chrome 上运行 Puppeteer 会产生最佳效果。

启动新项目

开始的最佳方法是使用 ABeamer CLI 创建一个新项目。

abeamer create my-project --width 640 --height 480

这将创建一个包含以下文件的项目。

• abeamer.ini – 更改此文件以修改帧尺寸并重新编译 main.scss。此文件将由服务器渲染和 main.scss 使用。

$abeamer-width: 640;
$abeamer-height: 480;

• css/main.scss – 也可以使用 CSS 而不是 SCSS，但需要在两个地方更改尺寸。

@import "./../abeamer.ini";

body,
html,
.abeamer-story,
.abeamer-scene {
  width: $abeamer-width + px;
  height: $abeamer-height + px;
}

#hello {
  position: absolute;
  color: red;
  left: 50px;
  top: 40px;
}

ABeamer 内容在故事内定义，就像戏剧一样。每个故事可以有多个场景。

• index.html – 这是动画发生的场景内部。

<div class="abeamer-story" id=story>
  <div class="abeamer-scene" id=scene1>
    <div id=hello>Hello
      <span id=world>World</span>
    </div>
  </div>
</div>

• js/main.ts – ABeamer 使用 TypeScript 构建，但您可以使用纯 JavaScript。但是，使用 TypeScript 可以利用 ABeamer 类型定义和 Visual Studio Code IntelliSense

$(window).on("load", () => {
  const story: ABeamer.Story = ABeamer.createStory(/*FPS:*/25);
  const scene1 = story.scenes[0];
  scene1.addAnimations([{
    selector: '#hello',
    duration: '2s',
    props: [{
      // pixel property animation.
      // uses CSS property `left` to determine the start value.
      prop: 'left',
      // this is the end value. it must be numeric.
      value: 100,
    },
    {
      // formatted numerical property animation.
      prop: 'transform',
      valueFormat: 'rotate(%fdeg)',
      // this is the start value,
      // it must be always defined for the property `transform`.
      valueStart: 10,
      // this is the end value. it must be numeric.
      value: 100,
    }],
  }, {
    selector: '#world',
    duration: '2s',
    props: [{
      // textual property animation.
      prop: 'text',
      valueText: ['World', 'Mars', 'Jupiter'],
    }],
  }]);
  story.render(story.bestPlaySpeed());
});

实时演示

您可能会注意到 ABeamer 和其他 Web 动画库之间的一些差异。

• ABeamer 使用 load 而不是 ready 事件。这是因为该应用程序旨在生成帧文件，并且与实时动画不同，它需要在进程开始之前加载所有资产。
• 它设置了 FPS。CSS 或 DOM 中的每个状态更改都将落入特定帧。可以将其想象为电影编辑逐帧操作的方式。这样，当它渲染到文件序列时，它可以保证每个文件都代表一帧，并且独立于渲染所需的时间。
• addAnimations 不会像其他 Web 动画库那样触发动画。相反，它为每一帧构建动画管道。此方法比其他库更详细，但它可以使相同的基础结构能够动画化 CSS/DOM 元素、SVG、canvas 和 WebGL。
• addAnimations 还可以动画化文本、颜色和图像——不仅是位置，还有旋转和缩放。
• render 将启动渲染过程。如果存在客户端渲染，它将模拟运行时。但如果它是服务器渲染，ABeamer 将以全速渲染。

要测试此动画，请在您的 Web 浏览器中打开 index.html。

服务器渲染

现在我们已经创建了一个动画项目，我们希望生成 PNG 文件序列、动画 GIF 和电影，而不会丢失帧。这个过程再简单不过了。

# 1. generate PNG file sequence
# assuming that you are in the parent directory
$ abeamer render my-project

# 2. generate animated gif (requires the PNG file sequence)
$ abeamer gif my-project

# 3. generate movie (requires the PNG file sequence)
$ abeamer movie my-project

前面的命令会将生成的文件放置在 project/story-frames 中。

处理 CORS

在前面的示例中，项目不需要加载任何 JSON，因此可以作为本地文件执行。但是由于 CORS，如果需要加载 JSON，则需要一个实时服务器。

为了解决这个问题，ABeamer 包含了一个实时服务器。使用以下命令启动它。

# 1. runs a live server on port 9000
$ abeamer serve

这会将您的项目分配给：http://localhost:9000/my-project/

然后渲染命令变为

$ abeamer render my-project --url http://localhost:9000/my-project/

云渲染

目前还没有第三方云渲染。但随着项目获得关注，我希望云计算公司能够看到其中的潜力，并以与 Google 提供大数据计算相同的方式提供这项服务，服务器场可以将云渲染服务器用于此。

云渲染的好处将是巨大的。

• 它不需要在客户端机器上安装任何软件。相反，所有操作都可以在网页浏览器中完成。虽然目前没有 ABeamer UI，但可以使用在线代码编辑器，例如 CodePen。
• 可以在客户端机器上设计繁重的渲染过程，然后发送到云端进行渲染。
• 混合应用程序可以使用 ABeamer 构建动画，然后将其发送到云端，根据需要生成电影或动画 GIF。

也就是说，云渲染比服务器渲染更受限制，因为它不发送文件，而是发送故事的经过清理的版本。

• 不允许使用交互式 JavaScript 代码，因此需要使用 case 表达式。
• 所有动画都经过清理。
• 动画只能使用云服务器提供商允许的插件。

设置云渲染服务器

如果您在不允许在本地安装软件的环境中工作，或者有多个用户构建动画，那么可能值得设置您自己的云渲染服务器。

由于 CORS，动画必须位于远程 URL 中或具有活动服务器才能发送到云服务器。

在远程服务器端准备、发送和重建的过程称为传送。动画需要将更改传送。

$(window).on("load", () => {
  const story: ABeamer.Story = ABeamer.createStory(/*FPS:*/25, { toTeleport: true });
  // the rest of the animation code
  // ....

  const storyToTeleport = story.getStoryToTeleportAsConfig();
  
  // render is no longer needed
  // story.render(story.bestPlaySpeed());
});

通过设置 toTeleport=true，ABeamer 开始以可以发送到服务器的方式记录每个动画。storyToTeleport 方法将保存一个包含动画、CSS、HTML 和元数据的对象。您需要通过 AJAX 将此对象与所需的资源一起发送到云端。

在服务器端，Web 服务器将接收数据和资源，并执行 ABeamer 以生成结果文件。

准备服务器

• 使用命令 abeamer create remote-server 创建一个名为 remote-server 的简单项目。
• 下载最新的 远程服务器代码，解压缩文件，并用 remote-server 中存在的覆盖它们。
• 将从 AJAX 接收到的对象保存为 remote-server/story.json，并将所有资源保存到项目中。
• 像往常一样使用 abeamer serve 命令启动活动服务器。
• 渲染传送的故事

abeamer render \
--url http://localhost:9000/remote-server/ \
--allowed-plugins remote-server/.allowed-plugins.json \
--inject-page remote-server/index.html \
--config remote-server/story.json

这将生成传送的故事的 PNG 文件序列。对于 GIF 和电影，您可以运行与之前相同的命令。

$ abeamer gif remote-server
$ abeamer movie remote-server

有关更多详细信息，以下是 ABeamer 传送器 的完整文档。

动画愉快！

希望这篇帖子能让你很好地了解 ABeamer，它能做什么以及如何使用它。能够使用新的动画技术并将结果渲染为图像开辟了许多可能性，从商业用途到制作自己的 GIF 生成器以及介于两者之间的许多事物。

如果您有任何疑问或在设置过程中遇到问题，请留言。在此期间，尽情探索吧！我非常乐意看到您如何使用 ABeamer。