Mozilla Hacks

让恐龙咆哮 – 音频和 CSS 过渡的同步

头像照片 作者 Chris Heilmann

发布于 2012年3月20日 分类于 音频 和 CSS

起初是 Brian King 创建了我们的 Google+ 页面，使用了 John Slater 设计的这个圆形 MDN logo。我觉得它看起来很酷，让我想起了著名的 米高梅开场动画，所以我好奇是否可以将其变成我们视频教程的开场动画（不确定我们是否会这样做）。然后，经过一些 Photoshop 和声音处理，再加一点 HTML5 音频和 CSS 过渡，就成了现在这个样子 (GitHub 上的源代码)

我从声音开始。如果你需要 Creative Commons 许可的声音，Freesound 是一个不错的资源。所以我使用了 Nick-Nack 的《中国进行曲》 和 CGEffex 的《咆哮》，并在 Audacity 中将它们合并在了一起。

将它们保存为 OGG 和 MP3 格式后，我得到了一个可以绑定的音频元素。我只需要监听 timeupdate 事件并将 currentTime 与触发动画的时刻进行比较即可。动画（恐龙旋转和嘴巴张合）是由父元素上的类触发的 CSS 过渡。主要的技巧是将恐龙和嘴巴都放在一个 div 中，并分别对其进行过渡。嘴巴动画还需要更改变换原点，因为我们不是围绕图像中心旋转。

如果你有 7 分钟空闲时间，这里有一个详细的屏幕录制，解释了正在发生的事情

关于 Chris Heilmann

HTML5 和开放 Web 的布道者。让我们一起修复它！

更多 Chris Heilmann 的文章…

7 条评论

  1. Mardeg

    我对此有点难过，在音频标签上使用 SMIL 的希望（我最早在 bugzilla 上的评论之一）之后，将近 7 年了，仍然需要 JavaScript 来实现同步。
    https://bugzilla.mozilla.org/show_bug.cgi?id=216462#c6
    现在希望它实现还有可能吗？

    2012年3月20日 09:13

    1. Jakob

      您不必使用 JavaScript，也可以使用 CSS 动画。

      2012年3月20日 10:42

      1. Jakob

        这是 [1] 证明。

        [1]: https://dl.dropbox.com/u/18835355/html/animation_syncing/anim.html

        2012年3月20日 11:33

        1. Chris Heilmann

          非常酷。但正如您所说，您仍然使用 JS 来确保所有内容加载完成后同步发生，因此从本质上讲，这与之前相同。我使用了过渡，因为它们在浏览器之间的兼容性更好。但没有任何东西阻止您使用动画来实现这一点。

          2012年3月20日 12:06

  2. Josh Matthews

    太棒了。

    2012年3月20日 11:20

  3. Caspy7

    我的第一个想法是使用排版/歌词以创造性的方式实现一首歌曲，就像这首一样
    http://www.youtube.com/watch?v=CJA69C6SlRk
    在 HTML 中做这样的事情似乎是一个不错的概念验证。

    虽然我的梦想是它可以通过工具/程序创建，而无需任何代码知识（就像最初的那样）。

    2012年3月21日 14:43

  4. SayaK

    很棒的教程！我有一个问题。您将如何更改脚本，以便动画和声音在点击时运行，而不是在页面加载时自动运行？我正在尝试做类似的事情，用户点击一个按钮来触发动画和音频。

    2012年11月24日 00:34

本文的评论已关闭。