在 Firefox 中，我们在 about:home 页面（许多 Firefox 用户的起始页面）提供各种内容，以使人们了解新功能和可能性。您可能最近已经注意到，我们有一些关于 Android 机器人和 Firefox 的动画，突出显示了 Firefox 可在 Android 上使用。对于您这些开发者，我们想更多地谈谈这些动画是如何制作的。

我们有三种不同的动画

• Android：推送
• Android：播放
• Android：购物

确保通过将鼠标悬停在 Android 机器人身上与它互动！

请注意，这些 about:home 代码片段是专门为 Firefox 产品内使用而创建的，其中一个重要因素是尽可能保持它们的紧凑性。这意味着，例如，存在 -moz 特定的 CSS 前缀，而没有针对其他 Web 浏览器的回退（因为这从未成为目标），因为目标是在封闭和受控的环境中使它们达到最佳状态。

但是，通过添加必要的 CSS 前缀，可以很容易地使它们在其他 Web 浏览器中工作。

介绍 Mozilla Hacks on GitHub

由于我们有很多演示、代码测试和使用 API 示例，因此我们希望对如何与您分享这些内容以及如何尽可能轻松地派生、播放和构建我们共享的代码有一个更统一的方法。

因此，我很高兴地宣布，我们现在为 Mozilla Hacks 演示提供了一个专门的 GitHub 存储库，并且我们将提供 博客文章特定的演示！

作为其中的一部分，这些 about:home 代码片段在 GitHub 上，并附带一些样板代码，您可以在其中看到它们在起作用。

与代码片段创建者 Bruce MacFarlane 的访谈

Bruce MacFarlane 是 Particle 公司负责此 Android/Firefox about:home 代码片段项目的首席程序员，并帮助将创意摘要转化为实际动画。在这次与 Mozilla 的 Barry Munsterteiger 的访谈中，他介绍了创建这些动画过程的各个方面。

感谢您再次帮助我们制作动画，看起来您玩得很开心。您能带我们了解一下这些动画是如何制作的吗？

当然！可能最好的起点是从在 CSS 中创建 Android 角色开始。这是作为一个单独的部分完成的，并且规模足够大，因此我们可以在许多不同的动画场景中使用它，只需调整其比例以适应特定设置中的最佳尺寸。

作为参考，我们获得了一个绿色 Android 角色的图像。在构建过程中，此图像以低不透明度作为叠加层添加到 html 文件中，以便我们可以确保我们尽可能地匹配我们的 css 设计。

在开始之前，我们必须考虑 Android 在动画过程中会（或可能）做出什么样的动作，然后相应地调整我们的布局。分解此任务的最简单方法是列出哪些部分可以独立于 Android 的其他部分移动，然后为每个部分设置一个容器 div，我们知道可以将动画应用于这些 div：!

• Android 在 x/y/z 空间中的整体
• 头部（可能）
• 能够独立移动和旋转的胳膊 - 能够独立移动和旋转的腿 - 能够眨眼的眼睛
• 能够独立摆动的触角

示例代码

#perspective-container { position: absolute; top: 0px; width: 264px; height: 336px; background-color: rgba(0,0,0,.05); -moz-transform-style: preserve-3d; -moz-perspective: 800px;}

#android { position: absolute; top: 0px; width: 264px; height: 336px;}

#android .body { position: absolute; top: 110px; left: 48px; width: 168px; height: 152px; border-radius: 0px 0px 30px 30px; background-color: #96c03c;}

#android .head { position: absolute; top: 30px; left: 48px; width: 168px; height: 68px; border-top-left-radius: 50% 100%; border-top-right-radius: 50% 100%; background-color: #96c03c; }

#android .eyes { position: absolute; top: 25px; width: 168px; height: 20px;}

#android .eye {position: absolute; width: 20px; height: 20px; border-radius: 10px 10px 10px 10px; background-color: white;}

#android .eye.left { left: 38px; } #android .eye.right { right: 38px; }

#android .antenna { position: absolute; top: -22px; width: 6px; height: 32px; border-radius: 15px 15px 0px 0px; -moz-transform-origin: 50% 100%; background-color: #96c03c; }

#android .antenna.left {left: 56px; -moz-transform: rotate(-32deg); }

#android .antenna.right { right: 56px; -moz-transform: rotate(32deg); }

#android .arm { position: absolute; top: 110px; width: 36px; height: 114px; border-radius: 18px 18px 18px 18px; background-color: #96c03c; -moz-transform-origin: 50% 20%;}

#android .arm.left { left: 0px; }

#android .arm.right { left: 228px; }

#android .leg {position: absolute; top: 262px; width: 36px; height: 60px; border-radius: 0px 0px 18px 18px; background-color: #96c03c;}

#android .leg.left { left: 86px; }

#android .leg.right { right: 86px;}

您在这轮中使用了什么新的编码技巧？

在运行具有许多移动部件的较长动画时，我发现有时将所有各个部件的动画持续时间设置为比整个序列长度稍长会有所帮助。这样做的好处是可以避免不同长度的动画延迟，只需使用百分比即可。

因此，假设整个动画持续时间为十秒，那么在序列中两秒内将 Android 移动到屏幕上的距离为一秒，这意味着从 20% 开始移动 #android 元素并在 30% 处完成，然后让 Android 从 30% 到 35% 摆动，依此类推。

这些动画的最大挑战是什么？您是如何克服这些挑战的？

在查看动画规范时，我们很早就发现的另一个问题是试图找出如何最好地处理如何让 Android 旋转到侧面。问题在于我们无法将元素弯曲回 Z 空间，因此如果我们只是在 Android 的 Y 轴（Android 的轮廓）上旋转它，我们将只会看到一个扁平的 2D 渲染，当向我们旋转 90 度时，它将完全消失。解决方案结果有点复杂。

由于主体应该呈圆柱形，因此我们不必担心它将如何动画化，因为无论从正面还是侧面看，它的轮廓都将相同。对于身体的其余部分（触角、手臂和腿），我们将这些元素移动到一个与主体分开的容器中，该容器能够在 Y 轴上移动。当此容器元素旋转时，我们必须对其中的所有项目进行反向旋转，从而欺骗眼睛相信这些元素在每个方向上都有深度。为了处理眼睛，在旋转过程中，它们在溢出设置为隐藏的容器内侧向动画化。

一旦完成了设置 Android 的繁重工作，其余部分就相对容易了。

示例代码

body {margin: 0; padding: 0; }

#perspective-container { position: absolute; top: 0px; width: 264px; height: 336px; -moz-transform-style: preserve-3d; -moz-transform: translate3d(0,0,0); -moz-perspective: 800px; background-color: rgba(0,0,0,.05);}

#android {position: absolute; top: 0px; width: 264px; height: 336px; -moz-transform-style: preserve-3d;}

#android .rotating-container { position: absolute; width: 264px; height: 336px; -moz-transform-style: preserve-3d; -moz-transform: translate3d(0,0,0); }

#android.spin .rotating-container { -moz-animation: spin 400ms ease-in 500ms forwards; }

#android .body { position: absolute; top: 110px; left: 48px; width: 168px; height: 152px; border-radius: 0px 0px 30px 30px; background-color: #96c03c; }

#android .head { position: absolute; top: 30px; left: 48px; width: 168px; height: 68px; border-top-left-radius: 50% 100%; border-top-right-radius: 50% 100%; background-color: #96c03c; }

#android .eyes-overflow-wrapper { position: absolute; top: 25px; left: 8px; width: 152px; height: 20px; overflow: hidden;}

#android .eyes { position: absolute; width: 152px; height: 20px; -moz-transform: translate3d(0,0,0); }

#android.spin .eyes { -moz-animation: slide-eyes 400ms ease-in 500ms forwards; }

#android .eye { position: absolute; width: 20px; height: 20px; border-radius: 10px 10px 10px 10px; background-color: white;}

#android .eye.left { left: 30px; } #android .eye.right { right: 30px; }

#android .antenna { position: absolute; top: 8px; width: 6px; height: 32px; border-radius: 15px 15px 0px 0px; -moz-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; background-color: #96c03c;}

#android .antenna.left { left: 104px; -moz-transform: translate3d(0,0,0) rotateZ(-32deg); -webkit-transform: translate3d(0,0,0) rotateZ(-32deg);}

#android.spin .antenna.left { -moz-animation: reverse-spin-left-antenna 400ms ease-in 500ms forwards; }

#android .antenna.right { right: 104px; -moz-transform: translate3d(0,0,0) rotateZ(32deg); -webkit-transform: translate3d(0,0,0) rotateZ(32deg);}

#android.spin .antenna.right { -moz-animation: reverse-spin-right-antenna 400ms ease-in 500ms forwards; }

#android .arm { position: absolute; top: 110px; width: 36px; height: 114px; border-radius: 18px 18px 18px 18px; background-color: #96c03c; -moz-transform-origin: 50% 20%; -webkit-transform-origin: 50% 20%; -moz-transform: translate3d(0,0,0) rotateY(0deg); }

#android .arm.left {left: 0px; }

#android .arm.right { left: 228px;}

#android.spin .arm { -moz-animation: reverse-spin 400ms ease-in 500ms forwards; }

#android .leg { position: absolute; top: 250px; width: 36px; height: 72px; border-radius: 0px 0px 18px 18px; background-color: #96c03c; -moz-transform: translate3d(0,0,0) rotateY(0deg);}

#android .leg.left {left: 86px; }

#android .leg.right { right: 86px; }

#android.spin .leg { -moz-animation: reverse-spin 400ms ease-in 500ms forwards; }

@-moz-keyframes spin {0%{ -moz-transform: translate3d(0,0,0) rotateY(0deg); } 100%{ -moz-transform: translate3d(0,0,0) rotateY(-180deg); }}

@-moz-keyframes reverse-spin {0%{ -moz-transform: translate3d(0,0,0) rotateY(0deg); } 100%{ -moz-transform: translate3d(0,0,0) rotateY(180deg); }}

@-moz-keyframes reverse-spin-left-antenna {0%{ -moz-transform: translate3d(0,0,0) rotateZ(-32deg) rotateY(0deg); } 100%{ -moz-transform: translate3d(0,0,0) rotateZ(-32deg) rotateY(180deg); }}

@-moz-keyframes reverse-spin-right-antenna {0%{ -moz-transform: translate3d(0,0,0) rotateZ(32deg) rotateY(0deg); } 100%{ -moz-transform: translate3d(0,0,0) rotateZ(32deg) rotateY(180deg); }}

@-moz-keyframes slide-eyes {0%{ -moz-transform: translate3d(0,0,0); }100%{ -moz-transform: translate3d(-280px,0,0); }}

随着越来越多的开发者掌握这些技术，您如何看待动画的发展？

真正有趣的事情将是 WebGL 和 CSS 之间界限的模糊。

构建具有原生应用感觉的 Web 应用变得越来越普遍，这得益于过渡和视图的使用，而几年前典型的 Web 体验并不具备这些功能。

太棒了，再次感谢您完成如此出色的工作。