iOS开发中如何实现MKMapKit弧形球面插值相机过渡动画
iOS平台实现MKMapView相机弧形过渡动画方案求助
核心需求
我希望为地图相机添加动画效果,让整体动画呈现弧形运动质感,而非线性移动效果。
当前使用iOS提供的开箱即用相机动画,或是直接调用UIView.animate()实现的动画,都呈现相机从起点直接移动到终点的效果,我期望动画能够沿弧形路径从起点过渡到终点。
- 当前效果与期望效果的差异对比:

- 期望实现的效果参考(韩国应用Kakao地图的相机动效):

已尝试的实现方案
两段动画拼接模拟飞远-飞入效果
目前我仅通过两段相机动画拼接,实现先飞远再飞入的效果:当我为MKMapView的camera添加带curveEaseInOut的自定义动画时,仅动画速度曲线遵循curveEaseInOut规则,并未实现路径弧形的预期效果,仍然是生硬线性过渡,相关实现代码如下:
UIView.animate(withDuration: duration*2, delay: 0, options: .curveEaseIn, animations: { self.mapView.camera = preRotationCamera }) { _ in UIView.animate(withDuration: duration*2, delay: 0.1, options: .curveEaseOut, animations: { self.mapView.camera = finalCamera }, completion: completion) }
关键帧动画尝试
我原本认为调用animateKeyframes(withDuration:delay:options:animations:completion:)是可行的实现方案,但始终无法通过animateKeyframes()驱动MKMapView相机沿一系列坐标点完成动画——关键帧设置似乎被忽略,相机直接过渡到最终状态。例如下方代码运行后,相机就会直接跳转至finalCamera:
UIView.animateKeyframes(withDuration: duration*2, delay: 0, options: .calculationModeCubic, animations: { UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.5) { self.mapView.camera = preRotationCamera } UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5) { self.mapView.camera = finalCamera } })
待解决问题
本次开发适配环境为iOS15、Swift 5,请问在iOS平台中应当如何实现这种球面/插值/弧形的相机过渡效果?
内容的提问来源于stack exchange,提问作者Plato
相关产品推荐
相关产品推荐

