Подтвердить что ты не робот

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 градусов.

4b9b3361

Ответ 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, и все это работало довольно хорошо (это, очевидно, также отлично работает в браузере). Имейте в виду, что некоторые другие карты также могут иметь резкую анимацию.

Завершение

Я надеюсь, что дал некоторое представление. Я добавлю к этому ответу, когда мы узнаем что-то новое о проблеме. Не могли бы вы привести минимальный воспроизводимый пример? Таким образом, я могу попробовать. Удачи!