如何用视频创建网络动画——比如apple.com/ipad-air

How to create web animations with video — like apple.com/ipad-air

本文关键字：比如 apple ipad-air com 动画 何用 视频 创建 网络      更新时间：2024-05-07

我正在做一个项目，我想制作一个视频动画，有点像苹果在iPad Air页面上做的那样。

访问apple.com/ipad-air，你就会明白我的意思。iPad在网页上的每个"幻灯片"中移动。

我的问题是：如何让这些动画发挥作用？我查看了他们的代码，发现iPad只是一个很大的.mp4文件。它似乎在某些关键帧处停止。有什么jquery库可以帮助我做到这一点吗？

此外，我希望能够支持较旧的浏览器。我该如何检测浏览器并能够支持较旧的浏览器？

提前感谢！

使用单页滚动并通过回调函数设置CSS3效果。

附加信息：

演示
OnePageScroll.js：创建苹果iPhone 5S网站

好吧，我这里可能错了，但看起来动画最初是一个mp4，但其余的都是通过每一步的图像上的CSS3动画完成的。如果你使用类似Chrome Dev的工具查看他们的代码，你会发现他们每个"子页面"都有标签（如设计、性能、无线等）。例如，看看他们的HTML：

<section class="scene active" id="design" data-track-visitor-engagement="design">
            <div class="scene-content">
                <img class="hero-img centered" src="http://images.apple.com/ipad-air/overview/images/desktop/design_hero_2x.jpg" width="498" height="640" alt="">
                <div class="container centered fade-slide">
                    <h1><img src="http://images.apple.com/ipad-air/overview/images/desktop/design_title_2x.png" width="325" height="220" alt="All-new design. A ton of advanced technology. In just one pound."></h1>
                    <p class="intro">You have to hold iPad&nbsp;Air to believe it. It’s just 7.5 millimeters thin and weighs just one pound. The stunning Retina display sits inside thinner bezels, so all you see is your content. And an incredible amount of power lies inside the sleek enclosure. So you can do so much more. With so much&nbsp;less.</p>
                    <p class="intro"><a class="more" href="/ipad-air/design/" onclick="s_objectID=&quot;http://www.apple.com/ipad-air/design/_2&quot;;return this.s_oc?this.s_oc(e):true">Learn more about design</a></p>
                </div>
                <ul class="tiles centered fade-slide">
                    <li><img src="http://images.apple.com/ipad-air/overview/images/desktop/design_details_weight_2x.png" width="100" height="100" alt="1 pound"></li>
                    <li><img src="http://images.apple.com/ipad-air/overview/images/desktop/design_details_lighter_2x.png" width="100" height="100" alt="28% lighter"></li>
                    <li><img src="http://images.apple.com/ipad-air/overview/images/desktop/design_details_thinner_2x.png" width="100" height="100" alt="20% thinner"></li>
                </ul>
            </div>
        </section>

然后，您将在.fade幻灯片中看到，他们的CSS中有-webkit-transition:。这就是在mp4文件之后为这些图像设置动画的内容。看看这里的CSS转换

此外，我确信他们有某种针对旧浏览器的javascript/jQuery故障保护功能（或者针对旧浏览器有一个更简单的版本，尽管众所周知苹果是最先进的，所以如果他们没有，我也不会感到惊讶）。

无论如何，这只是对他们如何做到这一点的高级解释：）。

根据网络上的各种文章，为了实现您提到的效果，苹果使用了HTML5画布、松散图像和javascript的组合。

他们还使用了一种非常特殊的技术来制作一排JPG图像的动画。

苹果公司的一些优秀员工没有使用视频，而是想出了一个主意，通过显示起始帧和结束帧，将动画压缩成少数JPEG图像，然后使用特殊的JPEG，比如本帖顶部的JPEG，只包含图像的更新和动画部分。JSON文件用于指定如何定位更新的位，在一个微小的Javascript中可以找到在元素中显示"视频"的实际逻辑。

（来源）

工具

有一些应用程序试图模仿类似的结果，但据我所见，没有一个能提供苹果网站上显示的质量。以防万一，这里有两个选项：

  • 序列JS
  • 磷光体

总体思路

请记住，苹果是一家顶级企业，其销售额惊人。他们有预算安排一支高端的超级合格程序员和设计师团队，以保持他们的创新地位，即使在网络上也是如此。

如果你想达到类似的效果，你应该从小步骤开始。

对于<video>元素的操作，我推荐popcorn.js。它应该允许您双向绑定到视频中的位置。然后，您可以使用javascript或css3动画来控制页面上<video>和其他周围元素的位置。

对于考虑滚动的周围元素的动画，我推荐（我最喜欢的lib的无耻插件）greenstock。Greenstock将允许您将演示文稿中所有元素的动画设置为时间线，然后可以暂停、反转或查找。

组合

  • popcorn.js
  • 绿泥石

是我所知道的制作此类演示文稿的最好、最灵活的方式。

下面是一个基于greenstock 的滚动演示库示例

http://johnpolacek.github.io/superscrollorama/

这是一个使用爆米花双向视频控制的例子

http://client.heliozilla.com/aer/demo_06.html

相关文章：