鸿蒙运动开发实战：打造 Keep 式轨迹播放效果

前言
在运动类应用中，轨迹播放效果是提升用户体验的关键功能之一。它不仅能直观展示用户的运动路线，还能通过动态效果增强运动的趣味性。Keep 作为一款知名的运动健身应用，其轨迹播放效果深受用户喜爱。那么，如何在鸿蒙系统中开发出类似 Keep 的轨迹播放效果呢？本文将通过实际代码案例，深入解析实现这一功能的关键步骤和技术要点。
效果：

一、核心功能拆解
要实现类似 Keep 的轨迹播放效果，我们需要完成以下几个核心功能：
• 动态轨迹播放：通过定时器和动画效果，实现轨迹的动态播放，模拟用户运动过程。
• 地图交互：在地图上绘制轨迹，并根据播放进度更新地图中心点和旋转角度。
二、动态轨迹播放
1.播放逻辑
通过定时器和动画效果实现轨迹的动态播放。以下是播放轨迹的核心代码：

1. private playTrack() {
2.   // 如果已经在播放，则停止
3.   if (this.playTimer) {
4.     this.mapController?.removeOverlay(this.polyline);
5.     clearInterval(this.playTimer);
6.     this.playTimer = undefined;
7.     if (this.animationTimer) {
8.       clearInterval(this.animationTimer);
9.     }
10.     if (this.movingMarker) {
11.       this.mapController?.removeOverlay(this.movingMarker);
12.       this.movingMarker = undefined;
13.     }
14.     this.currentPointIndex = 0;
15.     return;
16.   }
18.   // 创建动态位置标记
19.   this.movingMarker = new Marker({
20.     position: this.trackPoints[0],
21.     icon: new ImageEntity("rawfile://images/ic_run_detail_start.png"),
22.     isJoinCollision: SysEnum.CollisionBehavior.NOT_COLLIDE,
23.     located: SysEnum.Located.CENTER
24.   });
25.   this.mapController?.addOverlay(this.movingMarker);
27.   // 开始播放
28.   this.playTimer = setInterval(() => {
29.     this.currentPointIndex++;
30.     if (this.currentPointIndex >= this.trackPoints.length) {
31.       clearInterval(this.playTimer);
32.       this.playTimer = undefined;
33.       this.currentPointIndex = 0;
34.       if (this.movingMarker) {
35.         this.mapController?.removeOverlay(this.movingMarker);
36.         this.movingMarker = undefined;
37.       }
38.       return;
39.     }
41.     // 更新动态位置标记位置，使用setInterval实现平滑移动
42.     if (this.movingMarker && this.currentPointIndex < this.trackPoints.length - 1) {
43.       const currentPoint = this.trackPoints[this.currentPointIndex];
44.       const nextPoint = this.trackPoints[this.currentPointIndex + 1];
45.       let animationProgress = 0;
47.       // 清除之前的动画定时器
48.       if (this.animationTimer) {
49.         clearInterval(this.animationTimer);
50.       }
52.       // 创建新的动画定时器，每10ms更新一次位置
53.       this.animationTimer = setInterval(() => {
54.         animationProgress += 0.1; // 每次增加0.1的进度
56.         if (animationProgress >= 1) {
57.           clearInterval(this.animationTimer);
58.           this.animationTimer = undefined;
59.           this.movingMarker?.setPosition(new LatLng(nextPoint.lat, nextPoint.lng));
60.         } else {
61.           const interpolatedLat = currentPoint.lat + (nextPoint.lat - currentPoint.lat) * animationProgress;
62.           const interpolatedLng = currentPoint.lng + (nextPoint.lng - currentPoint.lng) * animationProgress;
63.           this.movingMarker?.setPosition(new LatLng(interpolatedLat, interpolatedLng));
64.         }
65.       }, 10); // 每10ms执行一次
66.     }
68.     // 绘制当前轨迹线段
69.     const currentPoints = this.trackPoints.slice(0, this.currentPointIndex + 1);
70.     const currentColors = PathGradientTool.getPathColors(this.record!.points.slice(0, this.currentPointIndex + 1), 100);
72.     if (this.polyline) {
73.       this.mapController?.removeOverlay(this.polyline);
74.       this.polyline.remove();
75.       this.polyline.destroy();
76.     }
78.     this.polyline = new Polyline({
79.       points: currentPoints,
80.       width: 5,
81.       join: SysEnum.LineJoinType.ROUND,
82.       cap: SysEnum.LineCapType.ROUND,
83.       isGradient: true,
84.       colorList: currentColors!
85.     });
86.     this.mapController?.addOverlay(this.polyline);
88.     // 更新地图中心点和旋转角度
89.     let bearing = 0;
90.     if (this.currentPointIndex < this.trackPoints.length - 1) {
91.       const currentPoint = this.trackPoints[this.currentPointIndex];
92.       const nextPoint = this.trackPoints[this.currentPointIndex + 1];
93.       bearing = Math.atan2(
94.         nextPoint.lat - currentPoint.lat,
95.         nextPoint.lng - currentPoint.lng
96.       ) * 180 / Math.PI;
97.       bearing = (bearing + 360) % 360;
98.       bearing = (360 - bearing + 90) % 360;
99.     }
101.     this.mapController?.mapStatus.setRotate(bearing).setOverlooking(90).setCenterPoint(new LatLng(this.trackPoints[this.currentPointIndex].lat, this.trackPoints[this.currentPointIndex].lng)).refresh();
102.   }, 100); // 每100ms移动一次
103. }

复制代码

2.动画效果
通过定时器和线性插值实现动态轨迹的平滑移动效果。以下是动画效果的核心代码：

1. if (this.movingMarker && this.currentPointIndex < this.trackPoints.length - 1) {
2.   const currentPoint = this.trackPoints[this.currentPointIndex];
3.   const nextPoint = this.trackPoints[this.currentPointIndex + 1];
4.   let animationProgress = 0;
6.   // 清除之前的动画定时器
7.   if (this.animationTimer) {
8.     clearInterval(this.animationTimer);
9.   }
11.   // 创建新的动画定时器，每10ms更新一次位置
12.   this.animationTimer = setInterval(() => {
13.     animationProgress += 0.1; // 每次增加0.1的进度
15.     if (animationProgress >= 1) {
16.       clearInterval(this.animationTimer);
17.       this.animationTimer = undefined;
18.       this.movingMarker?.setPosition(new LatLng(nextPoint.lat, nextPoint.lng));
19.     } else {
20.       const interpolatedLat = currentPoint.lat + (nextPoint.lat - currentPoint.lat) * animationProgress;
21.       const interpolatedLng = currentPoint.lng + (nextPoint.lng - currentPoint.lng) * animationProgress;
22.       this.movingMarker?.setPosition(new LatLng(interpolatedLat, interpolatedLng));
23.     }
24.   }, 10); // 每10ms执行一次
25. }

复制代码

三、地图交互
1.地图中心点和旋转角度更新
在播放轨迹的过程中，动态更新地图的中心点和旋转角度，以确保用户始终能看到当前播放的位置。以下是更新地图中心点和旋转角度的代码：

1. let bearing = 0;
2. if (this.currentPointIndex < this.trackPoints.length - 1) {
3.   const currentPoint = this.trackPoints[this.currentPointIndex];
4.   const nextPoint = this.trackPoints[this.currentPointIndex + 1];
5.   bearing = Math.atan2(
6.     nextPoint.lat - currentPoint.lat,
7.     nextPoint.lng - currentPoint.lng
8.   ) * 180 / Math.PI;
9.   bearing = (bearing + 360) % 360;
10.   bearing = (360 - bearing + 90) % 360;
11. }
13. this.mapController?.mapStatus.setRotate(bearing).setOverlooking(90).setCenterPoint(new LatLng(this.trackPoints[this.currentPointIndex].lat, this.trackPoints[this.currentPointIndex].lng)).refresh();

复制代码

四、总结
通过上述步骤，我们成功实现了类似 Keep 的轨迹播放效果。不仅提升了用户体验，还为运动数据的可视化提供了有力支持。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！