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: 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()
Run Code Online (Sandbox Code Playgroud)
Android示例代码(有问题):
您可以在此处找到Android示例/示例代码:https://issuetracker.google.com/issues/71738889
其中还包括一个.apk
文件,一个.mp4
示例应用输出的视频.当Bearing
360度旋转地图时值变化时,这清楚地显示了不稳定的效果.
将此作为答案作为评论将难以阅读; 这是从谷歌文档中获取的.
考虑以下代码:
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度的方位会产生一个地图,其中向上的方向指向正东方.
祝好运.
在经历了所有可能的情况后,我发现这GMap
并不是用自定义动画一次性 360 度旋转地图所需的功能来构建的。不知道这是否会出现在下一个GMap
api 版本中。
目前,可能的解决方案是更改动画逻辑,我们可以旋转到 180 度,而不是旋转 360 度,同时降低动画速度(动画持续时间)。
这使我们能够为用户带来所需的地图周边搜索体验。
(现在我发布这个临时答案,并允许其他人将来更新或发布最新答案)。
我已在 GMap 问题跟踪器上提交了此动画控制问题,请开始此问题以表达您的兴趣和反馈,以便 Google 团队可以将此功能纳入最终考虑。 https://issuetracker.google.com/u/1/issues/71738889
归档时间: |
|
查看次数: |
1320 次 |
最近记录: |