谷歌地图(网络应用程序)如何通过手势/捏合在 iphone/ipad 上如此平滑地缩放?
如果您在 iPhone 或 iPad 上使用过 Google 地图网络应用程序,您就会知道我在说什么。你在这个屏幕抓取中看不到我的手指,但这是中捏(如果你愿意的话)缩小的。详细区域是初始地图查看区域,外面的模糊部分是中间夹点时进入视野的额外地图。
使用手势触摸输入的捏合缩放功能可实时缩放当前视图中的地图。如此流畅,看起来就像魔法一样。我们正在尝试缩放图像并重现这种平滑的缩放。有谁知道他们是怎么做到的?
我们不知道是否缩放了单个 img
元素。或者也许其相对网格矩阵中的所有 img
元素都以某种方式同时缩放(这似乎有点不太可能)。也许它是很多 canvas
元素......或者一个大的 canvas
元素(经过合理数量的测试后我们也对此表示怀疑)。拜托,任何建议、想法或答案(如果您来自 Google)都会很棒。
If you have used the Google Maps web app on your iphone or ipad you know what i am talking about. You can't see my fingers in this screen grab, but this is mid-pinch (if you will) zooming out. The detailed area was the initial map viewing area and the blurry bit outside is the extra map that has come into view mid-pinch.
The pinch-to-zoom function that uses the gesture touch input scales the map currently in view live in a way that is so smooth it looks like magic. We are trying to scale images and reproduce this smooth scaling. Does anyone know how they do it?
We don't know if it's a single img
element being scaled. Or maybe all the img
elements in their relative grid matrix somehow being all scaled at once (this seems a bit unlikely). Maybe it's lots of canvas
elements.. or one big canvas
element (which we also doubt after a reasonable amount of testing). Please, any suggestions, ideas or answers (if you're from Google) would be great.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您需要使用硬件加速的 CSS3 转换。例如,
当前仅mobile safari 支持硬件加速。目前尚不清楚 Google 何时会为其 Android 版本的 webkit 浏览器实现此功能。
You need to use the hardware accelerated CSS3 transforms. e.g.
Only mobile safari currently supports hardware acceleration. It's not known when Google will implement this for Android versions of it's webkit browser.
CSS3 硬件加速 webkit 的 3d 过渡
CSS3 hardware accelerated 3d transitions for webkit