web-dev-qa-db-fra.com

GMap Rotation des roulements en douceur (éviter les effets saccadés lors de la modification des valeurs de roulements)

Je souhaite faire pivoter GMap en modifiant la valeur de l'angle de relèvement afin que la caméra pivote autour du point central (360 degrés un tour complet). Lorsque nous changeons de relèvement, un effet d'accélération se produit au début et à la fin de la caméra points. Comment puis-je contrôler/modifier cela afin de rendre la rotation lisse lorsque vous changez les valeurs Bearing (afin de faire pivoter la carte en 360 degrés, une animation fluide)?

Requis pour toutes les langues car il apparaît que l'effet d'accélération est différent dans les différentes bibliothèques de langues. par exemple. Swift, Android, PHP, JS, Node.js, React.

S'il vous plaît ne votez pas, sans spécifier une raison valable (qui nous aide aussi à apprendre et à savoir). Je n'aime pas les critiques qui adoptent un comportement impoli et impudique, caractérisé par une attitude de vote silencieuse.

Exemple rapide (exécution correcte dans l'animation linéaire):

Notez qu'au début, l'animation contenait également des secousses sur iOS, mais lorsque nous utilisons CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear avec ses propriétés CATransaction, l'animation GMap se transforme en animation fluide. Alors maintenant, si vous voyez le code ci-dessous, la modification de la valeur Bearing ne crée pas d’effet saccadé (en raison de l’effet d’atténuation dans l’animation GMap). Je cherche aussi une solution appropriée pour Android et 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()

L'exemple de code Android (a un problème):

L'exemple/exemple de code Android est disponible ici: https://issuetracker.google.com/issues/71738889

Qui comprend également un fichier .apk, une vidéo .mp4 de la sortie de l'application exemple. Ce qui montre clairement les effets saccadés lorsque la valeur Bearing change lors de la rotation de la carte à 360 degrés.

javascriptandroidswiftgoogle-mapsbearing
16
Muhammad Hannan

Après avoir passé en revue tous les cas possibles, j'ai appris que GMap n'est pas construit avec la fonctionnalité requise de Rotation de la carte à 360 degrés en une fois avec une animation personnalisée. Je ne sais pas si cela apparaît dans la prochaine version GMap api.

Pour l'instant, la solution possible est de changer la logique d'animation et, au lieu de faire une rotation de 360 ​​degrés, nous pouvons effectuer une rotation, par exemple. 180 degrés avec une vitesse d'animation réduite (durée de l'animation).

Cela nous permet d’apporter à l’utilisateur la carte requise pour l’expérience de recherche. 

Pour le moment, je poste cette réponse temporaire et permets aux autres de mettre à jour ou de poster la dernière réponse par heure.

J'ai soumis ce problème de contrôle d'animation surgmap issue tracker , COMMENCEZ ce problème afin de montrer votre intérêt et vos commentaires afin que l'équipe de Google puisse en tenir compte pour la dernière fois. https://issuetracker.google.com/u/1/issues/71738889

0
Muhammad Hannan

Donner cela comme une réponse sous forme de commentaire serait plutôt difficile à lire; cela provient de la documentation google .

Considérons ce code: 

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));

Ce code crée une nouvelle position de la caméra et c’est exactement ce que vous essayez de muter: le relèvement de la caméra. Donc, si vous créez une nouvelle position de caméra comme ceci:

CameraPosition cameraPosition = new CameraPosition.Builder()
    .bearing(50)
    .build();

puis animez la caméra à cette position:

map.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));

Cela devrait faire l'affaire. Pour donner plus d’informations sur ce que vous devrez utiliser comme roulement: 

un relèvement de 90 degrés donne une carte où la direction montante pointe vers l’est.

Bonne chance.

6
JillevdW

Je vais écrire ceci comme une autre réponse car j'aimerais prendre le temps d'écrire un mur de texte, alors que j'aimerais garder l'autre réponse aussi courte que possible car cela pourrait toujours aider d'autres personnes avec un message similaire. problème.

Le problème

Donc, si je comprends bien, vous essayez de créer une application avec Google Maps pour différentes plates-formes. Vous rencontrez un problème avec Google Maps (le mouvement saccadé) et vous essayez de trouver une solution pour toutes les plates-formes.

Mes solutions proposées  

Je vais diviser cela en quelques sections, car je vois différentes façons d'aller de l'avant.

  • Trouvez une solution pour toutes les plateformes.

Celui-ci semble être le plus simple, mais il pourrait ressembler au problème XY. J'ai essayé de vous présenter quelques méthodes pour animer des vues et vous avez résolu le problème dans votre application iOS. Toutefois, au fond, vous traitez une faille dans l'animation de Google Maps lors du changement d'orientation. Je ne sais pas s'il existe un moyen de résoudre ce problème sur toutes les plateformes, car je ne l'ai pas encore essayé.

  • Utilisez une autre carte

Cela ressemble à un grand pas et, en fonction de votre utilisation, vous ne voulez pas faire quelque chose. Cependant, j'ai utilisé avec succès Leaflet (une carte JS) avec un WKWebView sur iOS et Android et tout fonctionnait plutôt bien (cela fonctionne évidemment également dans le navigateur). Gardez à l'esprit que d'autres cartes peuvent également comporter une animation saccadée.

Envelopper

J'espère avoir donné un aperçu. J'ajouterai à cette réponse à mesure que nous découvrons de nouvelles choses sur le problème. Pourriez-vous essayer de fournir un exemple reproductible minimal? De cette façon, je peux faire un meilleur essai. Bonne chance!

2
JillevdW