GMap轴承旋转运动平稳(更改轴承值时避免生涩效应)

Muh*_*nan 15 javascript android google-maps bearing swift

我想通过改变轴承角度值来旋转GMap,因此相机围绕中心点旋转(360度一整圈).当我们更换轴承时,相机的起点和终点会产生缓和效果.我如何控制/改变它以便在改变Bearing值时使旋转平滑(为了在360度旋转地图,平滑动画)?

对于所有语言都需要这样,因为它看起来在不同语言库中的缓动效果是不同的.例如Swift,Android,PHP,JS,Node.js,React.

如果没有说明有效理由(这有助于我们学习和了解),请不要拒绝投票.我不喜欢评论家粗鲁和未受过教育的行为,这是一种愚蠢的投票态度.

Swift示例(在线性动画中运行OK):

请注意,最初动画确实在iOS中也有混蛋,但是当我们使用CAMediaTimingFunction(name: kCAMediaTimingFunctionLinearCATransaction属性时,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()
Run Code Online (Sandbox Code Playgroud)

Android示例代码(有问题):

您可以在此处找到Android示例/示例代码:https://issuetracker.google.com/issues/71738889

其中还包括一个.apk文件,一个.mp4示例应用输出的视频.当Bearing360度旋转地图时值变化时,这清楚地显示了不稳定的效果.

Jil*_*vdW 6

将此作为答案作为评论将难以阅读; 这是从谷歌文档中获取的.

考虑以下代码:

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));
Run Code Online (Sandbox Code Playgroud)

这段代码创建了一个新的摄像机位置,这正是你想要改变的东西:摄像机的方位.因此,如果您创建一个新的相机位置,如下所示:

CameraPosition cameraPosition = new CameraPosition.Builder()
    .bearing(50)
    .build();
Run Code Online (Sandbox Code Playgroud)

然后将相机设置为该位置的动画:

map.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));
Run Code Online (Sandbox Code Playgroud)

这应该够了吧.提供有关您需要用作轴承的更多信息:

90度的方位会产生一个地图,其中向上的方向指向正东方.

祝好运.


Muh*_*nan 0

在经历了所有可能的情况后,我发现这GMap并不是用自定义动画一次性 360 度旋转地图所需的功能来构建的。不知道这是否会出现在下一个GMapapi 版本中。

目前,可能的解决方案是更改动画逻辑,我们可以旋转到 180 度,而不是旋转 360 度,同时降低动画速度(动画持续时间)。

这使我们能够为用户带来所需的地图周边搜索体验。

(现在我发布这个临时答案,并允许其他人将来更新或发布最新答案)。


我已在 GMap 问题跟踪器上提交了此动画控制问题,请开始此问题以表达您的兴趣和反馈,以便 Google 团队可以将此功能纳入最终考虑。 https://issuetracker.google.com/u/1/issues/71738889