我想通过改变方位 Angular 值来旋转 GMap,因此相机围绕中心点旋转(360 度一整圈)。
当我们改变方位时,在相机的起点和终点会有缓和效果。我如何控制/更改它以便在更改时使旋转平滑 Bearing
值(为了 360 度旋转 map ,流畅的动画)?
所有语言都需要这个,因为看起来缓动效果在不同的语言库中是不同的。例如Swift、Android、PHP、JS、Node.js、React。
Swift 示例(在线性动画中运行正常):
请注意,最初动画在 iOS 中也有抖动,但当我们使用 CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear
时沿着它的CATransaction
属性然后 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()
Android示例代码(有问题):
Android 示例/示例代码可在此处找到:https://issuetracker.google.com/issues/71738889
其中还包括 .apk
文件,一个 .mp4
示例应用程序输出的视频。当 Bearing
时,这清楚地显示了生涩的效果。 360 度旋转 map 时值会发生变化。
最佳答案
将此作为评论作为答案将很难阅读;这是取自 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.
祝你好运。
关于javascript - GMap 轴承旋转平稳运动(改变轴承值时避免抖动效果),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48123738/