如果您是 Firefox 用户，今天早上启动浏览器或在地址栏中输入 “about:home”，您会惊喜地发现，Firefox 徽标被一个庆祝全球社区精神的动画所取代。这只是对 mozilla.org 页面和 Mozilla 沟通渠道的众多计划改进之一。

为了让您一窥幕后并了解其制作过程，我们向来自 Particle 的 Bruce MacFarlane 提出了几个关于动画的问题。Particle 自成立以来一直与硅谷顶级公司合作，探索使用 HTML5 和 CSS 的方法。他们拥有独特的才华组合，在创意开发和工程之间游刃有余，使像这样的项目成为可能。

1) 您好，当您被要求制作这样的动画时，您的创意过程是怎样的？您会先画草图、使用 Flash 或 Maya 等工具进行动画制作，还是直接开始编写代码？

我发现列出将要发生的事情的步骤列表并尝试将整个动画可视化很有帮助，从而了解它在幕后最有可能如何运作。如果我对某些部分不太确定如何处理，我会将其分解成一个单独的概念验证沙盒文件，在那里我可以专注于那件事并确保正确完成。之后，就可以轻松地将所有部分组合在一起。

2) 动画背后的主要技术是什么？Canvas？CSS？为什么选择它？

动画完全使用 CSS 完成，以利用其易用性和流畅性。
虽然类似的东西可以使用 Canvas 完成，但这将需要更多设置代码，而且我们无法利用 CSS3 方便的计时函数。

此外，能够像使用基本样式一样使用类名来触发动画序列是一个巨大的优势。

在这个动画中，我们能够定义一个关键帧，它通过缩放和透明度进行播放，然后将其应用于所有五个火焰层，让动画持续时间和延迟的差异产生变化。

3) 我假设 Firefox 的起始页是一个特殊的环境。您在性能和连接性方面遇到了哪些限制？

由于运行动画的代码被加载到一个预先存在的页面上，因此在加载时我们确实需要做一些逻辑处理，以调整一些初始内容并将我们的新内容移动到位置，然后再运行动画。

Snippet 是一个单一代码文件，它被加载到一个预先存在的页面上，因此需要考虑某些因素。为了减少对资源的额外请求，任何图像都必须进行 base64 编码并直接输入代码中。这比听起来容易得多。有许多网站可以上传图像并让它返回 base64 编码。我倾向于使用几个简单的 PHP 命令来完成相同的事情。

$image = file_get_contents('image.png');
$imagedata = base64_encode($image);
echo($imagedata);

此外，如果动画必须与屏幕上已有的内容进行交互（并且可能处于相对位置，这会导致动画问题），则需要进行一定程度的工作来构建之前的内容以与新内容协同工作（将移动部分包裹在一个容器中，该容器仍然可以相对于窗口大小移动，以便您可以在其中绝对定位元素，等等）。

4) 在优化时，您有时会发现自己需要一遍又一遍地执行相同的任务并构建工具来完成它们。您是否使用了现有的工具，还是正在构建一些工具？

在 Mac 上进行开发，我们最终会经常使用 “活动监视器” 实用程序应用程序，它可以帮助监控内存和 CPU 使用情况。About:home 片段是一个独特的动物，只有 Firefox 用户才能看到它们。对于在各种设备和浏览器上观看的网站和 Web 应用程序，我们开发了一些内部工具，这些工具可以帮助简化兼容性问题，并在我们很快将发布的项目中快速构建项目。

5) 基于您的经验，您认为是否有市场需求动画工具来输出像您这样的代码？您知道有什么这样的工具吗？大约一年前有一些这样的工具（Adobe Edge、Animatable…），但我还没有看到任何得到大力推广的工具。

当然，有些动画的关键帧会变得非常复杂，这些工具可以帮助我们节省大量时间。我们还没有最喜欢的工具，但我们一直在关注。

6) 那么遗留支持呢？值得在旧浏览器上进行测试和调整，还是使用静态图像回退更合理？

支持一定数量的遗留浏览器始终很重要，静态图像回退有时是唯一合理的选择。

7) 如果开发人员想要从他们自己的类似动画开始，您认为最大的时间浪费是什么？有哪些好的捷径？

有时很容易陷入包含大量移动部件的动画，而且持续时间很长。在这种情况下，我发现将动画分解成可以由父容器类名触发的场景很有帮助。
有时在这些场景中，我会对每个元素应用相同的动画持续时间，并在关键帧百分比内处理时间。这样，以后就可以轻松地在时间轴中对各个元素进行调整。

感谢 Bruce。

您怎么看？期待看到更多展示新技术的实验。您想看到什么，或者您希望我们发布什么信息？请在下面发表评论。