javascript–GMap轴承旋转运动平稳(更改轴承值时避免抖动效应)

javascript–GMap轴承旋转运动平稳(更改轴承值时避免抖动效应),第1张

概述我想通过改变轴承角度值来旋转GMap,因此相机围绕中心点旋转(360度一整圈).当我们更换轴承时,相机的起点和终点会产生缓和效果.如何更改轴承值(为了360度旋转地图,平滑动画),我如何控制/改变它以使旋转平滑?对于所有语言都需要这样,因为它看起来在不同语言库中的缓动效果是不同的.

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

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

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

请注意,最初动画确实在iOS中也有混蛋,但是当我们使用camediatimingFunction(名称:kcamediatimingFunctionlinear沿着它的CATransaction属性,然后GMap动画变成平滑动画.所以现在如果你看到下面的代码,轴承的变化value不会产生生涩效果(由于GMap动画中的缓动效果).我也在寻找适合AndroID和Web的解决方案.

//Move the map around current location, first looplet 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视频.当360度旋转地图时,当轴承值发生变化时,这清楚地显示出不稳定的效果.

解决方法:

将此作为答案作为评论将难以阅读;这取自google documentation.

考虑以下代码:

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 buildermap.animateCamera(CameraUpdateFactory.newCameraposition(cameraposition));

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

Cameraposition cameraposition = new Cameraposition.Builder()    .bearing(50)    .build();

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

map.animateCamera(CameraUpdateFactory.newCameraposition(cameraposition));

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

a bearing of 90 degrees results in a map where the upwards direction points due east.

祝好运.

总结

以上是内存溢出为你收集整理的javascript – GMap轴承旋转运动平稳(更改轴承值时避免抖动效应)全部内容,希望文章能够帮你解决javascript – GMap轴承旋转运动平稳(更改轴承值时避免抖动效应)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1097757.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-28
下一篇 2022-05-28

发表评论

登录后才能评论

评论列表(0条)

保存