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

灰太狼 2023-09-23 22:10 140阅读 0赞

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

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

![format_png][]

整个的实现包含了轨迹的回放，视频的录制，然后视频的录制这块不再笔者这篇文章的介绍的范畴内。所以这里主要介绍轨迹的回放，这个回放过程其实也是包含了大概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一个属性动画了，当转化到地图运动轨迹上去时，又如何去实现呢？

基于Path Length的属性动画

1.  计算List对应的Path
2.  通过PathMeasure获取 Path 的 Length
3.  对Path做 Length的属性动画

这里有两套Point体系，一个是View的Path对应的Points, 然后就是Map上的List对应的Points，运动轨迹原始数据是Map上的List 点，上面的第一步就是将Map上的Points 转成屏幕Pixel对应的点并生成Path; 第二部通过PathMeasure 计算Path的Length; 最后在Path Length上做属性动画，然而这里并非将属性动画中每次渐变的值(这里对应的是View的Point点)绘制成View对应的Path，而是将渐变中的点又通过Map的SDK转成地图Location点，绘制地图轨迹。这里一共做了两道转换，中间只是借助View的Path做了一个依仗Length属性做的一个动画。因为基本上每种地图SDK都有Pixel 跟Location Point点互相transform的API，所以这个可以直接迁移到其它地图上，例如高德地图等。

下面具体看下代码，先将Location 转成View的Point体系，这里保存了总的一个Path，以及List 中两两相邻点对应的分段Path的一个list.

*  生成Path：

![format_png 1][]

其中用到 Mapbox地图API Location 点转View的PointF 接口API toScreenLocation(LatLng latlng), 这里生成List, 然后计算得到Path.

![format_png 2][]

*  基于Length做属性动画：

![format_png 3][]

首先创建属性动画的 Instance：

ValueAnimator.ofObject(new DstPathEvaluator(), 0, mPathMeasure.getLength());
    复制代码

将每次渐变的值经过 calculateAnimPathData(value) 计算后存入到 以下的四个变量中，这里除了Length的渐变值，还附带有角度的一个二元组值。

dstPathEndPoint[0] = 0;//x坐标
    dstPathEndPoint[1] = 0;//y坐标
    dstPathTan[0] = 0;//角度值
    dstPathTan[1] = 0;//角度值
    复制代码

然后将dstPathEndPoint 的值转成Mapbox的 Location的 Latlng 经纬度点，

PointF lastPoint = new PointF(dstPathEndPoint[0], dstPathEndPoint[1]);
    LatLng lastLatLng = mapboxMap.getProjection().fromScreenLocation(lastPoint);
    Point point = Point.fromLngLat(lastLatLng.getLongitude(), lastLatLng.getLatitude());
    复制代码

过滤掉一些动画过程中可能产生的异常点，最后加入到Mapbox的轨迹绘制的Layer中形成轨迹的一个渐变：

Location curLocation = mLocationList.get(animIndex);
    float degrees = MapBoxPathUtil.getRotate(curLocation, point);
    if (animIndex < 5 || Math.abs(degrees - curRotate) < 5) {//排除异常点
        setMarkerRecord(point);
    }
    复制代码

setMarkerRecord(point) 方法调用加入到 Map 轨迹的绘制Layer中

![format_png 4][]

动画过程中，当加入到Path中的点超过一定占比时，做了一个窗口显示的动画，窗口List跟整个List的一个计算：

//这里可以取后半段的数据，滑动窗口，保持 moveCamera 的窗口值不变。
    int moveSize = passedPointList.size();
    List<LatLng> windowPassList = passedPointList.subList(moveSize - windowLength, moveSize);
    复制代码

接下来看整公里点的绘制，看之前先看下上面的calculateAnimPathData()方法的逻辑

![format_png 5][]

如上，length为当前Path走过的距离，假设轨迹一共100点，当前走到 49 ~ 50 点之间，那么calculateLength就是0到50这个点的Path的长度，它是大于length的，offsetLength = calculateLength - length; 记录的是 当前点到50号点的一个长度offsetLength，animIndex值当前值对应50，recordPathList为一开始提到的跟计算总Path时一个分段Path的List, 获取到49 ~ 50 这个Path对应的一个model.

RecordPathBean recordPathBean = recordPathList.get(animIndex);
    复制代码

获得Path(49 ~ 50) 的长度减去 当前点到 50的Path(cur ~ 50)的到 Path(49 ~ cur) 的长度

float stopD = (float) (pathMeasure.getLength() - offsetLengthCur);
    复制代码

然后最终通过PathMeasure的 getPosTan 获得dstPathEndPoint以及dstPathTan数据。

pathMeasure.getSegment(0, stopD, dstPath, false);
    mDstPathMeasure = new PathMeasure(dstPath, false);
    //这里有个参数 tan
    mDstPathMeasure.getPosTan(mDstPathMeasure.getLength(), dstPathEndPoint, dstPathTan);
    复制代码

*  整公里点的绘制

原始数据中的List的Location中存储了一个字段kilometer, 当某个Location是整公里点时该字段就有对应的值，每次Path属性渐变时，上面的逻辑里记录了lastAnimIndex, animIndex。当 animIndex > lastAnimIndex时， 上面的calculateAnimPathData() 方法里分析animIndex有可能还没走到，所以在animIndex > lastAnimIndex时lastAnimIndex肯定走到了。

![format_png 6][]

当lastAnimIndex对应的点是 整公里时，做一个响应的属性动画。

至此，运动轨迹回放的一个动画执行逻辑分析完了，如文章开始所说，整个过程中其实还包含了好多种其它的动画，处理它们播放的一个时序问题，如何编排实现等等也是一个难点。另外还就是轨迹播放时的一个Camera的一个视觉跟踪的效果没有实现，这个用地图本身的Camera 的API是一种实现，但是如何跟上面的这些结合到一块；然后就是自行通过计算角度偏移，累计到一定的旋转角度时，转移地图的指南针；以上是笔者想到的方案，以上有计算角度的，但需要找准那个累计的角度值，然后大量实际数据适配。

最后，有需要了解轨迹回放功能其它实现的，可留言或私信笔者进行一起探讨。

[format_png]: https://img-blog.csdnimg.cn/img_convert/d244a7eabe6c8aa192673ad9d4f38835.webp?x-oss-process=image/format,png
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/509869f94019e0c5ed406c042c25df8e.webp?x-oss-process=image/format,png
[format_png 2]: https://img-blog.csdnimg.cn/img_convert/127b59dace3e1c1d297e6af49cbd471e.webp?x-oss-process=image/format,png
[format_png 3]: https://img-blog.csdnimg.cn/img_convert/33659f3a75eadbfc4ea90c3de65c257c.webp?x-oss-process=image/format,png
[format_png 4]: https://img-blog.csdnimg.cn/img_convert/ff4f52a14839d0ae7b255fcd9542423d.webp?x-oss-process=image/format,png
[format_png 5]: https://img-blog.csdnimg.cn/img_convert/f792a42240839d731e6e3c2b01255ab8.webp?x-oss-process=image/format,png
[format_png 6]: https://img-blog.csdnimg.cn/img_convert/145c67c4b9fd924d692de9e82643191b.webp?x-oss-process=image/format,png