向下滚动时，在 HTML5 移动应用程序（PhoneGap）（如 Google Plus iPhone 应用程序）中为图像设置动画？答案

【问题标题】：Animate images in HTML5 mobile app (PhoneGap) like Google Plus iPhone app when scrolling down?向下滚动时，在 HTML5 移动应用程序（PhoneGap）（如 Google Plus iPhone 应用程序）中为图像设置动画？
【发布时间】：2012-07-03 21:45:33
【问题描述】：

iPhone 应用程序上的 Google Plus 应用程序在向下滚动应用程序时具有这种动画图像的方式。很难描述。了解动画的最佳方式是下载最新更新，然后滚动浏览您的视频流。

简而言之，它似乎在您滚动时动态加载图像，然后应用一些动画组合（渐变显示 + 比例）使图像慢慢淡入屏幕。动画仅在第一次显示图像时生效。也就是说，上下滚动时，如果图片已经出现在流中，则动画不会发生。

在专门包含在 PhoneGap 中的为 iOS 设备构建的移动 HTML5 应用程序上模拟此动画的最佳方法是什么？有没有人这样做过？动态加载可能是这个动画中最有趣/最具挑战性的元素，因为它非常流畅。

动态加载是否是一种错觉（即，它们实际上是否预加载了所有图像，但在滚动时会对其进行动画处理）？

谢谢！

【问题讨论】：

听起来/看起来像通过 AJAX 进行延迟加载，然后在不透明度上结合宽度、高度和 z-index 使用 ease-in-out
谢谢，@sciritai。延迟加载究竟是如何工作的？我们是否在用户滚动时获取新图像？在 Google Plus 中，图像似乎是立即动画化的，就好像图像已经预先获取一样。
@sciritai，您也可以将其发布为答案吗？如果这解决了问题，我们可以给你积分。
@dda，很好地删除“非常”。

标签： iphone ios animation cordova

【解决方案1】：

其工作原理是：

为图像的延迟加载编写代码 (HTML+JS+CSS)
修改图片加载代码，与jquery fade-in / fade-out或ease-in / ease-out效果结合

您可以从this 链接中找到有关延迟加载图像的有用链接和建议。

希望有帮助！

【讨论】：

【解决方案2】：

我要说的唯一与大多数其他人所说的不同的是它的动画方式。我怀疑在 HTML5 上下文中，尤其是在 iOS 上使用 PhoneGap 时，他们使用的是 jQuery Fade-进出动画。为什么？因为 webkit-transitions 和 transforms 在移动设备的上下文中更好/更流畅 - 而 PhoneGap 只使用 WebUI 视图。

如前所述，他们可能会延迟加载图像（预加载等）。所以我没有在这个小提琴中包括那个部分。但这里有一个如何使用 CSS3 过渡/变换来模拟缩放和淡入效果的示例。它在移动设备上超级流畅，尤其是与 jQuery 淡入淡出计数器部分相比（它也不会冻结 UI 线程）。

http://jsfiddle.net/zXBDd/2/

（这个小提琴适用于 webkit 浏览器）

这是适用于 iOS 设备的滚动版本：

http://ijitsudesign.com/demos/scrollAnim/scrollExample.html

希望这会有所帮助！

【讨论】：

谢谢，@J 科尔。小提琴不适用于 iPhone，但我认为这是正确的方法。重新延迟加载，这是否只是意味着在页面加载后通过 AJAX 加载图像（即，页面加载最初没有图像，但在页面渲染后会启动 AJAX 调用以获取所有图像）？或者这是否意味着图像在用户滚动时一张一张地加载？
嘿Crashalot！首先，延迟加载意味着它在绝对需要之前不会加载。所以当滚动击中它时，它会加载它。至于不能在 iPhone 上工作，iOS 不能很好地处理任何“iframe”，所以这里有一个在 iOS 上工作的带有触摸的滚动事物的直接示例：ijitsudesign.com/demos/scrollAnim/scrollExample.html
谢谢，J 科尔。我们已经阅读了有关是否建议绑定到滚动事件的冲突信息。这是我们应该担心的事情吗？
这是一个 SO 问题，以防您想得到答案：stackoverflow.com/questions/11551379/…

【解决方案3】：

看看这个帖子JQuery fade-in a div when user scrolls to that div。答案和 Marcel 的 jsfiddle 示例应该足以让您入门。

【讨论】：