javascript – GMap轴承旋转运动平稳(更改轴承值时避免抖动效应)
作者:互联网
我想通过改变轴承角度值来旋转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 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视频.当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 builder
map.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.
祝好运.
标签:android,javascript,swift,google-maps,bearing 来源: https://codeday.me/bug/20191006/1859499.html