GMap Вращение подшипника в плавном движении (избегайте рывкового эффекта при изменении значений подшипника)
Я хочу вращать GMap, изменяя значение угла наклона подшипника, чтобы камера вращалась вокруг центральной точки (360 градусов на один полный раунд). Когда мы меняем направление, в начальных и конечных точках камеры возникает эффект ослабления. Как я могу контролировать/изменить это, чтобы сделать вращение плавным при изменении значений Bearing
(чтобы вращать карту на 360 градусов, плавная анимация)?
Требуется это для всех языков, так как эффект ослабления в разных языковых библиотеках различен. например, Swift, Android, PHP, JS, Node.js, React.
Пример Swift (работает ОК в линейной анимации):
Обратите внимание, что изначально анимация имела рывки и в iOS, но когда мы использовали CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear
вместе со своими свойствами CATransaction
тогда анимация CATransaction
превратилась в плавную анимацию. Так что теперь, если вы видите код ниже, изменение в Bearing
Значение не создает эффект рывка (из-за эффекта замедления в анимации GMap). Я ищу подходящее решение для Android
и Web
.
//Move the map around current location, first loop
let timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
CATransaction.begin()
CATransaction.setValue(3.0, forKey: kCATransactionAnimationDuration)
CATransaction.setAnimationTimingFunction(timingFunction)
CATransaction.setCompletionBlock({
//Move the map around current location, second loop
let timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
CATransaction.begin()
CATransaction.setValue(3.0, forKey: kCATransactionAnimationDuration)
CATransaction.setAnimationTimingFunction(timingFunction)
CATransaction.setCompletionBlock({
//Move the map around current location, third loop
let timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
CATransaction.begin()
CATransaction.setValue(3.0, forKey: kCATransactionAnimationDuration)
CATransaction.setAnimationTimingFunction(timingFunction)
CATransaction.setCompletionBlock({
UIView.animate(withDuration: 0.5, animations: {
self.findingYourLocation.alpha = 0.0
})
//TODO: Set nearest branch
// Zoom in one zoom level
let zoomCamera = GMSCameraUpdate.zoomIn()
self.mapView.animate(with: zoomCamera)
// Center the camera on UBL Branch when animation finished
//let nearestBranch = CLLocationCoordinate2D(latitude: 24.850751, longitude: 67.016589)
let nearestBranch = CLLocationCoordinate2D.init(latitude: 24.806849, longitude: 67.038734)
let nearestBranchCam = GMSCameraUpdate.setTarget(nearestBranch)
CATransaction.begin()
let timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
CATransaction.setValue(3.0, forKey: kCATransactionAnimationDuration)
CATransaction.setAnimationTimingFunction(timingFunction)
CATransaction.setCompletionBlock({
self.nextButton.alpha = 1.0
})
self.mapView.animate(with: nearestBranchCam)
self.mapView.animate(toZoom: 15)
self.mapView.animate(toBearing: 0)
self.mapView.animate(toViewingAngle: 0)
CATransaction.commit()
})
self.mapView.animate(toBearing: self.mapView.camera.bearing + 120)
CATransaction.commit()
})
self.mapView.animate(toBearing: self.mapView.camera.bearing + 120)
CATransaction.commit()
})
self.mapView.animate(toBearing: self.mapView.camera.bearing + 120)
CATransaction.commit()
Пример кода Android (есть проблема):
Пример Android/пример кода можно найти здесь: https://issuetracker.google.com/issues/71738889
Сюда также входит файл .apk
, видео с образцом .mp4
примера приложения. Который ясно показывает резкие эффекты, когда значение Bearing
изменяется при повороте карты на 360 градусов.
Ответы
Ответ 1
Изучив все возможные случаи, я узнал, что GMap
не построен с необходимой функцией вращения карты на 360 градусов за один раз с пользовательской анимацией. Не знаю, появится ли это в следующей версии GMap
API.
На данный момент возможное решение состоит в том, чтобы изменить логику анимации, и вместо вращения на 360 градусов мы можем повернуться, например, на 180 градусов с уменьшенной скоростью анимации (время продолжительности анимации).
Это позволяет нам предоставить пользователю необходимую карту поиска.
(На данный момент я публикую этот временный ответ и разрешу другим обновлять или публиковать последний ответ в будущем).
Я отправил эту проблему управления анимацией на систему отслеживания проблем GMap, пожалуйста, НАЧИНАЙТЕ эту проблему, чтобы показать свой интерес и отзывы, чтобы команда Google смогла принять эту функцию к окончательному рассмотрению. https://issuetracker.google.com/u/1/issues/71738889
Ответ 2
Дать это как ответ как комментарий было бы довольно трудно прочитать; это взято из документации Google.
Рассмотрим этот код:
CameraPosition cameraPosition = new CameraPosition.Builder()
.target(MOUNTAIN_VIEW) // Sets the center of the map to Mountain View
.zoom(17) // Sets the zoom
.bearing(90) // Sets the orientation of the camera to east
.tilt(30) // Sets the tilt of the camera to 30 degrees
.build(); // Creates a CameraPosition from the builder
map.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));
Этот код создает новую позицию камеры, и это именно то, что вы пытаетесь изменение: направление камеры. Так что, если вы создадите новую позицию камеры, как это:
CameraPosition cameraPosition = new CameraPosition.Builder()
.bearing(50)
.build();
и затем анимируйте камеру в это положение:
map.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));
Это должно делать свое дело. Чтобы дать больше информации о том, что вам нужно использовать в качестве подшипника:
азимут 90 градусов приводит к карте, где направление вверх указывает на восток.
Удачи.
Ответ 3
Я напишу это как другой ответ, так как я хотел бы выделить время, чтобы написать стену текста, в то время как я хотел бы, чтобы другой ответ был как можно более коротким, поскольку он все еще может помочь другим людям с похожим проблема.
Эта проблема
Так что, если я правильно понимаю, то, что вы пытаетесь сделать, это создать приложение с картами Google для разных платформ. Вы столкнулись с проблемой с картами Google (резкое движение) и пытаетесь найти решение для всех платформ.
Мои предложенные решения
Я разделю это на несколько разделов, потому что я вижу разные пути продвижения вперед.
- Найти решение для всех платформ.
Это кажется самым простым, но это может быть похоже на проблему XY. Я попытался познакомить вас с некоторыми способами анимации видов, и вы решили проблему в своем приложении для iOS, но суть в том, что вы имеете дело с недостатком анимации карт Google при смене направления. Я не уверен, есть ли способ решить эту проблему на каждой платформе, поскольку я не пробовал.
Это звучит как большой шаг, и в зависимости от вашего использования что-то, что вы не хотите делать. Тем не менее, я успешно использовал Leaflet (карту JS) с WKWebView на iOS и Android, и все это работало довольно хорошо (это, очевидно, также отлично работает в браузере). Имейте в виду, что некоторые другие карты также могут иметь резкую анимацию.
Завершение
Я надеюсь, что дал некоторое представление. Я добавлю к этому ответу, когда мы узнаем что-то новое о проблеме. Не могли бы вы привести минимальный воспроизводимый пример? Таким образом, я могу попробовать. Удачи!