Как карты google (веб-приложение) так плавно масштабируются на iphone / ipad с помощью жеста / сжатия?

Если вы использовали веб-приложение Google Maps на своем iphone или ipad, вы знаете, о чем я говорю. Вы не можете видеть мои пальцы на этом снимке экрана, но это уменьшение масштаба в середине (если хотите). Детализированная область была начальной областью просмотра карты, а размытый фрагмент снаружи — это дополнительная карта, которая появилась в поле зрения в середине щипка.

уменьшение жестом

Функция масштабирования, использующая сенсорный ввод с помощью жестов, масштабирует карту, просматриваемую в данный момент в режиме реального времени, настолько плавно, что это выглядит как волшебство. Мы пытаемся масштабировать изображения и воспроизвести это плавное масштабирование. Кто-нибудь знает, как они это делают?

Мы не знаем, масштабируется ли один элемент img. Или, может быть, все img элементы в их относительной матрице сетки каким-то образом масштабируются одновременно (это кажется немного маловероятным). Может быть, это множество элементов canvas... или один большой элемент canvas (в чем мы также сомневаемся после разумного количества тестов). Пожалуйста, любые предложения, идеи или ответы (если вы из Google) были бы замечательны.


person Matt Kocaj    schedule 08.09.2010    source источник
comment
Текущая теория просто масштабирует множество (256x256) img элементов с неблокирующей оптимизацией таймера. Пока не могу этого доказать. Есть идеи?   -  person Matt Kocaj    schedule 09.09.2010
comment
Работа над CSS3 с аппаратным ускорением 3D-переходы для webkit   -  person Matt Kocaj    schedule 23.09.2010


Ответы (2)


Вам нужно использовать преобразование CSS3 с аппаратным ускорением. например

  • translate3d() вместо translate()
  • scale3d() вместо масштаба()

Только мобильное сафари в настоящее время поддерживает аппаратное ускорение. Неизвестно, когда Google реализует это для Android-версий своего браузера webkit.

person Alex    schedule 03.11.2010