全宽视频背景：非 HTML5，纯 jQuery 解决方案...也许

Question

长期堆栈溢出爬行者。这个社区已经为相当复杂的问题提出了一些非常优雅的解决方案。

在处理动态显示的内容时，我更喜欢 CSS3 或 PHP。理想情况下，具有扎实的 jQuery 和/或 Javascript 知识库的人能够最好地回答这个问题。下面是这个想法，以及它背后的思考过程：

创建全屏（宽度：100%；高度：自动；背景：封面；）视频背景。但是，与其使用 HTML5 的视频标签、flash fallback、iFrame 甚至 .GIF，不如创建一系列图像，就像 Cinema4D 的动画渲染输出一样，如果按顺序放在一起，就可以创建无缝的伪视频经验。

在“那只是一个 .GIF，你是个白痴”之前。

我相信 jQuery/Javascript 可以解决这个问题。是否可以编写一个基本上识别（甚至添加）图像的 div 类的脚本，然后将该图像设置为显示 0.0334 毫秒（29.7 帧速率），然后将该图像设置回 z 空间同时在顺序类顺序中触发下一个图像以显示另一个 0.0336 毫秒；依此类推，直到所有图像（或“帧”）无缝流畅地播放，因此用户会假设他/她实际上正在观看视频。不知道它实际上是一个 .GIF 类固醇。

这是解释预期结果的更详细的方式：

你有一个 1 秒超棒的 1080p 视频剪辑（视频格式对于帮助回答这个问题并不重要，只要假设它是无损且非常漂亮的 k 吗？）。它以每秒 29.97 帧的速度录制。将每一帧分解成它自己的海量图像文件，留下基本上 30 张图像。每秒 24 帧意味着您将拥有 24 张图像，每秒 60 帧意味着您将拥有 60 张图像，等等，等等。

如果您曾经使用过 Cinema4D，那么我希望重新创建的输出与动画渲染的输出是自反的，在这种情况下，您每帧都留下一个 .TIFF，并排放置，以便在上传到 Photoshop 或在其中查看时Quicktime 你会得到一个“幻灯片”，图像显示得如此之快，看起来就像一个视频。

HTML 看起来像这样：

<div id="incredible-video">
     <div class="image-1">
        <img source=url('../movie/scene-one.tiff');/>
     </div>
     <div class="image-2">
        <img source=url('../movie/scene-two.tiff');/>
     </div>
     <div class="image-3">
        <img source=url('../movie/scene-three.tiff');/>
     </div>
     <div class="image-4">
        <img source=url('../movie/scene-four.tiff');/>
     </div>
     <div class="image-5">
        <img source=url('../movie/scene-five.tiff');/>
     </div>
     ....etc.....
     ....etc.....
     ....etc.....
</div>

jQuery/Javascript 可以处理附加顺序图像类，而不是为每个“帧”手动写出来。

CSS 看起来像：

#incredible-video img {
     position:absolute;
     width:100%;
     height:auto;
     background:cover;
}

但是 jQuery/Javascript 需要什么才能完成/可以完成吗？它需要在窗口加载后立即发生，并在无限循环中运行。当然，这个例子中没有发生音频，但是说我们不需要它。假设我们只希望我们的最终用户拥有一个视觉上吸引人的页面，并且在 UI 中实现了最小的设计。

我喜欢视频动画，并且非常喜欢使用全屏背景构建的网站。但是，具有这种视觉设置并保持其响应能力的网站被证明是一项艰巨的挑战。 HTML5 只能让你走这么远，并使移动兼容性无效（数据使用保护）。与调用 .mp4、.Webm 或 .OGG 相比，.GIF 文件非常庞大，因此该选项已失效。

我实际上最近玩过 Adob​​e Edge Animate。使用 Edge Hero .js 库，我能够重现与此类似的项目：http://www.edgehero.com/tutorials/starwars-crawl-tutorial

我发现它适用于所有设备。很酷。让我觉得，或许可以使用这个程序或者直接点击jQuery/Javascript来达到想要的效果。

感谢您看这个家伙。

-干杯， 布兰登·丹恩

Answer 1

我找到了一个可行的解决方案来解决我想做的事情。这实际上是相当有趣的。它的答案引入了许多有趣的想法，关于我们如何在网站、应用程序甚至完整的软件应用程序中动态显示任何类型的内容。

答案是在深入研究 WebGl、画布动画（2d 和 3d）、2D 视频游戏技术和 3D 视频游戏技术时得出的。如果您不是寻找“完美”的工作流程，而是对创建视觉上有效的设计感兴趣并真正了解前沿可以为您的开发想法做些什么，请跳过 GUI。忽略那些承诺在 5 分钟内让事情变得可行的软件的广告。它不是。然而，我们正在到达那里。在短短几个月内，我们也必须期待的 3 大事件是

1.) 在 Opera、Chrome 和 Firefox（当然）中原生实现 WebGL 的通用协议，Safari 将转向启用 webGL，因为用户必须手动启用它，甚至 IE 也会尝试试一试（在 IE 12 中）。

2.) Unity 3D 是游戏开发的行业标准，它已宣布下个月将发布第 5 版，其中包含从开始到以 Javascript（不是 JSON 实际 JavaScript）导出的完整、直观的工作流程。 Three.JS 库更具体地说，因为它是当今看似无穷无尽的游戏引擎中最受欢迎的引擎之一。

这如何回答我最初的问题？： 尽管 WebGL 已经出现了大约 3 年，但我们现在才开始看到它大放异彩。它不仅仅是一个简单的视频游戏引擎。使用 ThreeJS 我们有一个完整的工作 JavaScript 库，能够在 WebGL、Canvas 中渲染，甚至使用一些 CSS3 魔法。不能将您的精彩电影用作移动背景？它破坏了整体用户界面？开心点。 ThreeJS 可以同时使用 2D 和 3D javascript 绘图功能，但不能同时使用。悬停其他允许您绕过此规则的库。

和鼓。它是，或者可以很容易地以响应或自适应的方式制作。

我的问题的答案来自于查看自定义预加载器。意识到我可以在 AE 中创建令人难以置信的循环动画，并将它们导出为 GIF，提供我想要的质量，但不是控制，没有优化，现在声音。但是，可以导出 PNG 序列。然后顿悟袭来。在我只说我用什么来解决我的问题之前，我想留下一份材料清单，任何希望超越简单开发和挑战限制的人都可以用作参考指南。这将与我开始到现在的位置一致。我希望它可以帮助某人。花时间找出这一切是非常值得的。

1.) WebGL-Three.JS WebGL 让我看到了一个新世界。这是一项快速发展的技术，并且会一直存在。简而言之，您创建的所有实时应用程序现在不仅可以访问 CPU，还可以访问显卡。随着 GPU 变得越来越强大，而且价格也不那么不合理，可能性是无穷无尽的。我们可以在不需要第 3 方客户端的情况下“在浏览器中”玩孤岛危机 3 的想法并非虚构。这是未来。将其应用于网站。大吃一惊。

2.) 首先是 Cinema4D，然后开始使用 Verold.com 和 PlayCanvas.com C4D 只是我个人的最爱，因为它很容易与 AE 集成。您会发现，将您的 3D 模型、纹理、网格、任何东西导出到 Three.JS（或任何游戏引擎时期），Blender 得到了最广泛的支持。在撰写本文时，它们是 ThreeJS 的 2 个独立的 C4D 工作流。两者都很乏味，并不总是有效，实际上只是不必要的。 PlayCanvas 也有点让人失望。然而，Verold 是一个出色的基于浏览器的 3D 编辑器，您可以在其中导入各种文件（甚至是带有烘焙动画的 FBX！），当您满意时，您可以导出到独立客户端或 iframe。独立客户端很棒。这有点小故障，所以要有耐心。你不应该以任何方式适应它。回到你的根源。

3.) iPhone 应用程序开发、Android 应用程序开发（令人印象深刻）、网站、Web 应用程序等所有功能都只需要使用 JavaScript、HTML/5 和 CSS/3 来制作应用程序.一旦理解了这一点，并且真相告诉你你可能不知道你有多少控制权，那么这一天确实会变得美好。学习代码。有一百万个未经测试和可怕的“GUI”声称可以做你想做的事，避免无用的搜索。学习代码。在那一点上你永远不会出错。

4.) 我需要学习什么代码？ JavaScript 是最重要的。稍后会详细介绍。认真潜入使用 ThreeJS 创建任何类型的应用程序。 Doob 先生（该库的共同创建者）有一个优秀的、文档齐全的网站，其中包含大量示例、tu​​ts 和源代码供您深入研究。 Chrome 实验是您了解人们如何真正将这种开发提升到一个新水平的下一个绝佳选择。在学习 ThreeJS 的过程中，你会更加精通 JavaScript。您还将开始使用您可能从未使用过的东西，例如用于打包数据的 JSON 或 XML 文件。您还将了解将 Three.JS 实现为 WebGL 渲染器是多么简单，如果可能的话，甚至可以回退到 Canvas 甚至 CSS3D。

在继续之前，我会做一个警告。我相信一旦 Unity 3D 从专业用户和免费用户中删除 ThreeJS，我们将在网络上看到更多的 3D。在这种情况下，下载软件并玩一下不会有什么坏处。它还提供出色的可视化编辑器。有从 Unity 3D 到 ThreeJS 的导出器，但同样它们仍处于预 alpha 阶段。

1. 二维或非二维。就是那个问题 在对 3D 有点脏之后，我开始使用画布在 2D 领域进行绘图。 Flash 似乎仍然是一个可行的工具，但同样，这一切都与代码有关。了解如何做到这一点，您可能会发现 Flash 实际上是在浪费您的时间。我发现 2D 比 3D 更难，因为 2D 的本质还没有彻底改变，至少在我有生之年是这样。您需要开始学习 Spritesheet 创建教程。如果你知道在哪里看，没有什么难的。使用 Photoshop 或等效应用程序。创建尽可能多的“运动”帧，如果将它们放在一个 GIF 中就足以无缝循环精灵。或者渲染一个主图像并围绕元素切割自然不同的拍子。例如：你想让你站在你创造的街角的那个人留下来。根据您的需要，将该字符剪切到尽可能多的单独 PNG 文件中。第二种方法是使用我们在第一次尝试中引入的相同精灵表。第一种情况意味着编写 CSS 选择器并为普通用户编写 javascript 将变得越来越困难。

第一个解决方案：使用 CSS 和 Javascript 绘制“框架”，精心组合在精灵表中。如果一直没有正确完成，这真的会变得很痛苦。

第二种解决方案：如果需要，我们会丢失逐帧效果，但我们的整体 2D 动画看起来会令人难以置信。此外，在实现物理引擎和设置碰撞检测器时，以这种方式构建可以创建更高效​​的游戏。我们仍将使用相同的精灵表，但是我们只需要选择我们真正需要的帧。这个想法是在通过 Javascript 一起调用的帧之间使用动态补间。最后，您有一个完全动画的 Sprite，但只需一帧就可以完成。例如：你有一个火柴人，你想展示它直线行走。解决方案是逐帧跳跃，创建一个温和的印章，以说明动画行走。在解决方案 2 中，我们使用 Stick man 并将他的动态部分切开，以便我们可以通过 JavaScript 调用它们，然后直接从 JavaScript 构建我们的 sprite。为了创建行走效果，我们将火柴人的腿切开，并在精灵表中将它们与他身体的其他部分分开（除非您还需要为另一个身体部位设置动画）。我们绘制出每个火柴人的坐标位置。像 DarkFunctionEditor 这样的免费软件是众多程序之一，它们会立即为您生成可靠的精灵表，并在烘焙后打印出精灵表的坐标。有了这些知识，进入 JavaScript 并调用您希望与 Stick Man 片段及其相应坐标相关联的变量。然后使用 Javascript 将所有部分“构建”在一起。行走动画是由我们之前讲的 Tween 完成的。每条腿基本上都在您在 JavaScript 中设置的优美流畅的路径上运行。没有砍。非常容易定制和控制。如果您想让自己更轻松，请尝试使用 Sprite 动画的众多库之一。目前我最喜欢的是 CreateJS。

如果您希望包含碰撞检测或创建粒子系统，那么您将需要一个物理引擎。对于 2D，我目前在 2 之间徘徊。现在我会把 PhysicsJS 放在 KineticJS 之上。两者都很棒。我相信 PhysicsJS 更容易与 CaccoonJS 和其他移动脚本集成。

我最后的忠告是=，在阅读完这篇文章后，了解您将使用 JavaScript。你会有一点 jQuery 让它变得简单，但你会遇到一些困难的事情。我的巨大建议是开始学习如何使用 NodeJS 进行构建。这是一个异步 Javascript 服务器端和客户端开发空间。文档很棒。你的第一站应该是学习 npm 和 bower。然后了解如何有效地将 Grunt 实施到工作流程中。尝试像 Yeoman 这样的 NodeJS 资产，为您提供“样板”节点设置，从中开始。在您开始了解 NodeJS 机制并熟悉设置初始 package.json 后，您会发现所有这些 JavaScript 几乎感觉就像是在某个时间点后自己编写的一样。

这就是您进入 2D 和 3D 设计和开发所需了解的全部内容。我最初的问题可以使用 3D 渲染全屏来回答。然而，我的最终结论完全是用不同的方法得出的。

在学习了 2D sprites 和 frame 之后，然后注意到 gif 的编码过程。我有尝试创建 PNG Sprite 动画的想法。不是PNG Gifs，每个人说。而是创建一个 2D 场景并使用 PNG 序列，然后我将通过 JavaScript 对其进行动画处理。我在 Github 上找到了一些很棒的库，既有我的想法，也有关于 GIF 操作的酷想法。 我的最终选择是使用 Github 存储库“jquery.animateSprite”，而不是仔细研究 sprite 表，您可以使用您的个人 PNG，这个库为您提供了难以置信的控制量，您可以存储变量以供以后使用，还可以控制您的动画一般可以拉下来。对于适用于任何设备的全屏响应式背景（甚至可以动画声音......）我会推荐这种技术。它的工作原理很像翻书动画作品，除了更有效。

我希望这有助于一路走来。如果您对我在这里提到的任何内容有疑问，或者知道需要进一步详细信息的领域，请务必告诉我。

-干杯

---