google-maps - 谷歌地图(网络应用程序)如何通过手势/捏合在 iphone/ipad 上如此平滑地缩放？

Question

如果您在 iPhone 或 iPad 上使用过 Google map 网络应用程序，您就会明白我在说什么。在这个屏幕截图中你看不到我的手指，但这是中间捏合(如果你愿意的话)缩小。详细区域是初始 map 查看区域，外面的模糊部分是在中间捏合时进入视野的额外 map 。

使用手势触摸输入的双指缩放功能可以平滑地实时缩放当前 View 中的 map ，看起来就像变魔术一样。我们正在尝试缩放图像并重现这种平滑缩放。有谁知道他们是怎么做到的？

我们不知道是否是单个 img 元素被缩放。或者，它们的相关网格矩阵中的所有 img 元素都以某种方式同时缩放(这似乎不太可能)。可能是很多 canvas 元素……或者一个大的 canvas 元素(经过大量测试后我们也对此表示怀疑)。请提供任何建议、想法或答案(如果您来自 Google)。

Answer 1

您需要使用硬件加速的 CSS3 转换。例如

• translate3d() 而不是 translate()
• scale3d() 而不是 scale()

目前只有移动版safari支持硬件加速。目前尚不清楚 Google 何时会为其 webkit 浏览器的 Android 版本实现此功能。