运动APP视频轨迹回放分享实现

喜欢户外运动的朋友一般都应该使用过运动APP(keep, 咕咚，悦跑圈，国外的Strava等)的一项功能，就是运动轨迹视频分享，分享到朋友圈或是运动群的圈子里。笔者本身平常也是喜欢户外跑、骑行、爬山等户外运动，也跑过半马、全马，疫情原因之前报的杭州的全马也延期了好几次了。回归正题，本文笔者基于自己的思想实现运动轨迹回放的一套算法策略，实现本身是基于Mapbox地图的，但是其实可以套用在任何地图都可以实现，基本可以脱离地图SDK的API。Mapbox 10 版本之后的官方给出的Demo里已经有类似轨迹回放的Case了，但是深度地依赖地图SDK本身的API，倘若在高德上实现很难可以迁移的。

这里先看下gif动图的效果，这是我在奥森跑的10KM的一个轨迹：

整个的实现包含了轨迹的回放，视频的录制，然后视频的录制这块不再笔者这篇文章的介绍的范畴内。所以这里主要介绍轨迹的回放，这个回放过程其实也是包含了大概10多种动画在里面的，辅助信息距离的文字跳转动画；距离下面配速、运动时间等的flap in 及 out的动画；播放button，底部button的渐变Visibility; 地图的缩放以及视觉角度的变化等；以上的这些也不做讨论。主要介绍轨迹回放、整公里点的显示(起始、结束)， 回放过程中窗口控制等，作为主要的讲解范畴。

首先介绍笔者最开始的一种实现，假如以上轨迹List 有一百个点，每相邻的两个点做Animation之后，在AnimationEnd的Listener里开起距离下一个点的Animation，直到所有点结束，这里有个问题每次的运动轨迹的点的数量不一样，所以开起Animation的次数也不一样，整个轨迹回放的时间等于所有的Animation执行的时间和，每次动画启动需要损耗20~30ms。倘若要分享到微信朋友圈，视频的时间是限制的，但之前的那种方式时间上显然不可控，每次动画启动的损耗累加导致视频播放不完。

紧接着换成AnimationSet, 将各个线段Animation的动画放入Set里，然后playSequentially执行，同样存在上面的问题。假如只执行一次动画，那么这次动画start的损耗在整个视频播放上时长上的占比就可以忽略不计了，那如何才能将整个List的回放在一个Animation下执行完呢？假如轨迹只是一个普通的 Path，那么我们就可以基于Path的 length一个属性动画了，当转化到地图运动轨迹上去时，又如何去实现呢？

<