GMap以平稳运动方式旋转（避免改变轴承值时的干扰效应） [英] GMap Bearing rotation in smooth motion (avoid jerky effect when changing bearing values)

问题描述

我想通过改变方位角值来旋转GMap，所以相机围绕中心点旋转（360度一整圈）。
当我们改变方位时，相机开始和结束点会产生缓解效果。如何更改方位值（以便360度旋转地图，平滑动画），以便旋转平滑？

对所有语言都要求这样做，因为在不同的语言库中，缓动效果不同。例如Swift，Android，PHP，JS，Node.js，React。

请不要投票，没有指定正确的理由我们也要学习和了解）。

Swift示例（在Linear Animation中运行确定 ）：请注意，最初动画在iOS中也确实存在混乱，但是当我们使用 CAMediaTimingFunction（名称： kCAMediaTimingFunctionLinear 沿着它的 CATransaction 属性，那么GMap动画变成流畅的动画，所以现在如果你看到下面的代码，轴承值不会产生生涩效果（由于GMap动画中的缓动效应）我正在为 Android 和 Web 。

  //在当前位置周围移动地图
 CATransaction.setValue（3.0，forKey：kCATransactionAnimationDuration）
 CATransaction.setAnimati（$） onTimingFunction（timingFunction）
 CATransaction.setCompletionBlock（{
 //围绕当前位置移动地图，第二个循环
 let timingFunction = CAMediaTimingFunction（名称：kCAMediaTimingFunctionLinear）
 CATransaction.begin（） 
 CATransaction.setValue（3.0，forKey：kCATransactionAnimationDuration）
 CATransaction.setAnimationTimingFunction（timingFunction）
 CATransaction.setCompletionBlock（{
 //围绕当前位置移动地图，第三个循环
 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：设置最近的分支
 //放大一个缩放级别
 let zoomCamera = GMSCameraUpdate.zoomIn（）
 self.mapView.animate（with：zoomCamera）
 
 // 
 // let nearestBranch = CLLocationCoordinate2D（纬度：24.850751，经度：67.016589）
 let nearestBranch = CLLocationCoordinate2D.init（纬度：24.806849，经度：67.038734）
让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（）
 $ b $））
 self.mapView.animate（toBearing：self.mapView.camera.bearing + 120 ）
 CATransaction.commit（）
 $ b $）} 
 self.mapView.animate（toBearing：self.mapView.camera.bearing + 120）
 CATransaction.commit ）
 $ b $）
 self.mapView.animate（toBearing：self.mapView.camera.bearing + 120）
 CATransaction.commit（）
  
 
 
  Android示例代码（有问题）： 
 
 
 Android示例/示例代码可以在这里找到： https://issuetracker.google.com/issues/ 71738889  
 
 
 
其中还包含一个 .apk 文件，一个 .mp4 示例应用输出的视频。当以360度旋转地图时，方位值发生了变化，这清楚地显示了生涩的效果。  
 
解决方案
在经历了所有可能的情况之后，我开始知道 GMap 不是以360度自定义旋转地图的必要特性构建的动画。不知道这是否出现在下一个 GMap  api版本中。
 
 
 
目前，可能的解决方案是更改动画逻辑，而不是旋转360度，我们可以旋转到例如180度，减少动画速度（动画持续时间）。
 
 
这使我们能够为用户带来所需的地图周边搜索体验。 
 
 
现在我发布这个临时答案，并允许其他人更新或按时间发布最新答案。
 
 
 
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.

  
Please do not vote down, without specifying a valid reason (which assist us to learn and know as well). I don't like critics rude and uneducated behavior of silient down voting attitude.
Swift Example (running OK in Linear Animation):

Note that initially the animation did had jerks in iOS as well, but when we make use of CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear along its CATransaction properties then the GMap animation turned into smooth animation. so now if you see the code below, the change in Bearing value does not create jerky effect (due to the easing effect in GMap animation). I am looking for appropriate solution for Android and Web as well.
//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()
The Android example code (has problem):

The Android example/sample code can be found here: https://issuetracker.google.com/issues/71738889

Which also includes an .apk file, an .mp4 video of sample app output. Which clearly shows jerky effects when Bearing value changes while rotating the map in 360-Degree.
解决方案
After going through all possible cases, I came to know that GMap is not built with required feature of Rotating map in 360-Degree in one go with custom animation. Don't know if this appears in next GMap api version.

For now, the possible solution is to change the animation logic, and instead of rotating 360-Degree we can rotate to e.g. 180-Degree with reduced animation speed (animation duration time).

This allows us to bring required map surrounding search experience to the user. 

  
For now I am posting this temporary answer, and allow others to updated or post latest answer by time.


                        
这篇关于GMap以平稳运动方式旋转（避免改变轴承值时的干扰效应）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！