向下滚动时，动画在HTML5移动应用程序（PhoneGap的），如谷歌加iPhone应用程序的图片？ [英] Animate images in HTML5 mobile app (PhoneGap) like Google Plus iPhone app when scrolling down?
问题描述
在iPhone应用程序的谷歌加程序有向下滚动的应用程序时，动画图像的这种方式。这是很难形容。了解动画的最佳方式是通过你的流下载最新的更新，然后滚动。
The Google Plus app on the iPhone app has this way of animating images when scrolling down the app. It's difficult to describe. The best way to understand the animation is to download the newest update then scroll through your stream.
在简单地说，它似乎为动态滚动加载图像，然后应用动画的某种组合（逐步显示+级），使图像慢慢淡出到屏幕上。动画仅在第一次显示所述图像时生效。换句话说，滚动时上下，如果图像已经出现在流中，在动画不会发生。
In a nutshell, it seems to load the images dynamically as you scroll, then apply some combination of animations (gradual show + scale) to make the image slowly fade into the screen. The animation only takes effect when displaying the image for the first time. In other words, when scrolling up and down, if the image has already appeared in the stream, the animation does not happen.
什么是模拟对iOS设备建有移动HTML5应用这个动画，特别是包含在PhoneGap的最好方法是什么？有没有人这样做呢？动态加载可能是这部动画中最有趣/具有挑战性的元素，因为它是那么顺利。
What's the best way to simulate this animation on a mobile HTML5 app built for iOS devices, specifically contained in PhoneGap? Has anyone done this? The dynamic loading is probably the most interesting/challenging element of this animation because it's so smooth.
时的动态加载的幻觉（即，做他们实际上pre-负载的所有图像但在滚动动画中他们）？
Is the dynamic loading an illusion (i.e., do they actually pre-load all the images but animate them in upon scrolling)?
谢谢！
推荐答案
这是我想说的是大多数人说的是，它的动画的方式不同的唯一的事情。我怀疑，在一个HTML5的背景下，特别是当使用iOS上的PhoneGap，他们正在使用jQuery淡入出动画。为什么？由于WebKit的过渡和转换是如此的在移动设备的情况下更好/更顺畅 - 与PhoneGap的只是使用WebUI可以查看
The only thing that I'd say differs from what most others have said is the way that it's animated in. I doubt that in an HTML5 context, especially if using PhoneGap on iOS, that they're using the jQuery Fade-in-out animations. Why? Because webkit-transitions and transforms are so much better/smoother in context of a mobile device - and PhoneGap just uses the WebUI view.
正如前面提到的，他们可能做延迟加载图像（preloading，等等）。所以，我并没有包括在这个小提琴的那部分。但这里有一个如何使用CSS3过渡的例子/转换，模拟的规模和有效褪色。相较于jQuery的淡入淡出计数器部分尤其是当它的超级骗子平滑移动设备（它也不会冻结UI线程）。
As mentioned, they likely do lazy load the images (preloading, whatever). So I didn't include that part in this fiddle. But here's an example of how to use CSS3 transitions/transforms to simulate the scale and fade in effect. It's super-duper smooth on mobile devices especially when compared to the jQuery fade counter part (it also doesn't freeze up the UI thread).
（这在捣鼓WebKit浏览器的工作原理）
(this fiddle works in webkit browsers)
下面是滚动的事情，对于iOS设备使用的版本：
Here's a version of the scroll thing that works for iOS devices:
http://ijitsudesign.com/demos/scrollAnim/scrollExample.html
希望这有助于！
这篇关于向下滚动时，动画在HTML5移动应用程序（PhoneGap的），如谷歌加iPhone应用程序的图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
