Вопрос:

GMap Bearing rotation in smooth motion (avoid jerky effect when changing bearing values)

javascript android swift google-maps bearing

1124 просмотра

3 ответа

863 Репутация автора

I want to rotate GMap by changing the bearing angle value, so the camera rotates around the center point (360-Degree one full round ). When we change the bearing, there is a easing effect at camera start and end points. How can I control/change that in order to make the rotation smooth when change Bearing values (in order to rotate map in 360 Degree, smooth animation)?

Required this for all languages as it appears the easing effect is different in different language libraries. e.g. Swift, Android, PHP, JS, Node.js, React.

Swift Example (running OK in Linear Animation):

Обратите внимание, что изначально анимация имела рывки и в iOS, но когда мы использовали CAMediaTimingFunction(name: kCAMediaTimingFunctionLinearее CATransactionсвойства, анимация GMap превратилась в плавную анимацию. так что теперь, если вы видите код ниже, изменение 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 градусов.

Автор: Muhammad Hannan Источник Размещён: 06.01.2018 02:29

Ответы (3)


6 плюса

782 Репутация автора

Дать это как ответ как комментарий было бы довольно трудно прочитать; это взято из документации 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 градусов приводит к карте, где направление вверх указывает на восток.

Удачи.

Автор: JillevdW Размещён: 03.04.2018 12:40

2 плюса

782 Репутация автора

Я напишу это как другой ответ, так как я хотел бы выделить время, чтобы написать стену текста, в то время как я хотел бы, чтобы другой ответ был как можно более коротким, поскольку он все еще может помочь другим людям с похожим проблема.

Эта проблема

Так что, если я правильно понимаю, то, что вы пытаетесь сделать, это создать приложение с картами Google для разных платформ. Вы столкнулись с проблемой с картами Google (резкое движение) и пытаетесь найти решение для всех платформ.

Мои предложенные решения

Я разделю это на несколько разделов, потому что я вижу разные пути продвижения вперед.

  • Найти решение для всех платформ.

Это кажется самым простым, но это может быть похоже на проблему XY. Я попытался познакомить вас с некоторыми способами анимации видов, и вы решили проблему в своем приложении для iOS, но суть в том, что вы имеете дело с недостатком анимации карт Google при смене направления. Я не уверен, есть ли способ решить эту проблему на каждой платформе, поскольку я не пробовал.

  • Используйте другую карту

Это звучит как большой шаг, и в зависимости от вашего использования что-то, что вы не хотите делать. Тем не менее, я успешно использовал Leaflet (карту JS) с WKWebView на iOS и Android, и все это работало довольно хорошо (это, очевидно, также отлично работает в браузере). Имейте в виду, что некоторые другие карты также могут иметь резкую анимацию.

Завершение

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

Автор: JillevdW Размещён: 16.04.2018 06:05

0 плюса

863 Репутация автора

Решение

Изучив все возможные случаи, я узнал, что GMapне встроена необходимая функция вращения карты на 360 градусов за один раз с пользовательской анимацией. Не знаю, появится ли это в следующей GMapверсии API.

На данный момент возможное решение состоит в том, чтобы изменить логику анимации, и вместо вращения на 360 градусов мы можем повернуться, например, на 180 градусов с уменьшенной скоростью анимации (время продолжительности анимации).

Это позволяет нам предоставить пользователю необходимую карту поиска.

(На данный момент я публикую этот временный ответ и разрешу другим обновлять или публиковать последний ответ в будущем).


Я отправил эту проблему управления анимацией на систему отслеживания проблем GMap, пожалуйста, НАЧИНАЙТЕ эту проблему, чтобы показать свой интерес и отзывы, чтобы команда Google смогла принять эту функцию к окончательному рассмотрению. https://issuetracker.google.com/u/1/issues/71738889

Автор: Muhammad Hannan Размещён: 25.04.2018 01:18
Вопросы из категории :
32x32