仿滴滴首页车辆随机平滑移动,基于高德地图
????????之前就想做個仿滴滴首頁車輛平滑移動的效果,但是一直沒有時間。最近翻看舊項目的時候又看到這個需求,想了想還是花點時間做一下吧。先上效果圖。 源碼在文章結尾 ??
先是滴滴的效果圖 ?
??
再然后是demo的效果圖
????????首先當然是用大百度搜搜看,有沒有類似的效果,結果首先發現了這個博主的文章,粗略看了一下,只是簡單的實現了一次車輛的平滑移動,達不到要求。于是就在他的Demo上繼續修改。看網上有些人說車輛的位置信息是滴滴從服務端返回回來的真實坐標,我看了一下滴滴的效果,感覺應該不是,因為有的車輛都已經橫穿建筑物,連跨海的都有,應該是隨機生成的坐標。
1、確定平滑移動的范圍
????????隨機生成的車輛坐標需要在指定的范圍內,肯定不能說讓車輛在地圖上到處跑。那怎么判斷生成的坐標在指定范圍內呢?這時候我們可以考慮用指定坐標為圓心,指定半徑范圍內畫圓,把這個圓范圍內的坐標當成可用坐標,然后調用高德的方法mCircle.contans()來判斷生成的坐標是否在指定范圍內來區分。
/*** 生成以中心點附近指定radius內的坐標數組** @param startLatLng 起點坐標* @return*/private ArrayList<LatLng> randomGenerateLatLngs(LatLng startLatLng) {ArrayList<LatLng> latLngs = new ArrayList<>();latLngs.add(startLatLng);double lat = centerLatLng.latitude;double lng = centerLatLng.longitude;for (int i = 0; i < 50; i++) {double newLat = lat + (10 - (Math.random() * 20)) / Math.pow(10, new Random().nextInt(3) + 1);double newLng = lng + (10 - (Math.random() * 20)) / Math.pow(10, new Random().nextInt(3) + 1);LatLng newLatLng = new LatLng(newLat, newLng);if (mCircle.contains(newLatLng)) {latLngs.add(newLatLng);}}// 如果隨機生成的數組個數為0,則再隨機添加一個距離中心點更近的坐標if (latLngs.size() == 1) {latLngs.add(new LatLng(lat + (Math.random() > 0.5 ? 1 : -1) / Math.pow(10, 3), lng + (Math.random() > 0.5 ? 1 : -1) / Math.pow(10, 3)));}return latLngs;}PS:請忽略生成隨機坐標的完美性,本文主要以實現功能效果為主。
當生成的坐標已經平移完后,我們需要繼續生成坐標
smoothMarker.setMoveListener(new MySmoothMoveMarker.MoveListener() {@Overridepublic void move(double v) {}@Overridepublic void stop(LatLng latLng) {ArrayList<LatLng> result = randomGenerateLatLngs(latLng);startMoveCar(result, index, false);}});????????這里的MySmoothMoveMarker是我自定義的SmoothMoveMarker,大部分代碼都是沿用高德的SmoothMoveMarker,主要是為了增加每次平移動畫軌跡結束的回調和旋轉動畫。具體看源碼就知道。
2、添加旋轉動畫
????????每當車輛移動到下一個點后,還需要先旋轉角度,再執行平移動畫,不過平移動畫原先就有了,這里我們只需要在平移動畫之前添加一個旋轉動畫,在旋轉動畫后再執行平移動畫就好了,當然時間可以按自己喜好來分配。首先我們需要知道上一次車輛平移的角度
// 上一次車輛平移角度 float lastRotate = getRotate(tempPosition,var5);和當前車輛平移的角度
// 當前車輛平移角度 float var7 = MySmoothMoveMarker.this.getRotate(var5, var9);然后就是按順序執行動畫
MySmoothMoveMarker.this.marker.setRotateAngle(360.0F - var7 + MySmoothMoveMarker.this.mAMap.getCameraPosition().bearing); RotateAnimation rotateAnimation = new RotateAnimation(360.0F - lastRotate + MySmoothMoveMarker.this.mAMap.getCameraPosition().bearing,360.0F - var7 + MySmoothMoveMarker.this.mAMap.getCameraPosition().bearing); rotateAnimation.setInterpolator(new LinearInterpolator()); rotateAnimation.setDuration(var3 / 5); if (MySmoothMoveMarker.this.exitFlag || Thread.interrupted()) {MySmoothMoveMarker.this.marker.setAnimation((Animation) null);return;} MySmoothMoveMarker.this.marker.setAnimation(rotateAnimation); MySmoothMoveMarker.this.marker.setAnimationListener(new Animation.AnimationListener() {@Overridepublic void onAnimationStart() {}@Overridepublic void onAnimationEnd() {MySmoothMoveMarker.this.animation = new TranslateAnimation(var9);MySmoothMoveMarker.this.animation.setInterpolator(new LinearInterpolator());MySmoothMoveMarker.this.animation.setDuration(4 *var3 /5);if (MySmoothMoveMarker.this.exitFlag || Thread.interrupted()) {MySmoothMoveMarker.this.marker.setAnimation((Animation) null);return;}MySmoothMoveMarker.this.marker.setAnimation(MySmoothMoveMarker.this.animation);MySmoothMoveMarker.this.marker.startAnimation();} }); MySmoothMoveMarker.this.marker.startAnimation();好吧,我偷懶了,變量名都是沿用SmoothMoveMarker混淆后的名稱。
這里需要注意的就是兩個動畫(旋轉和平移動畫)的時間之和要跟執行每段平移動畫的時間相等。
有需要或者感興趣的小伙伴可以繼續完善。Over!
源碼傳送地址
========下載積分已改為固定1分==================
總結
以上是生活随笔為你收集整理的仿滴滴首页车辆随机平滑移动,基于高德地图的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: coco数据集分割可视化格式转换
- 下一篇: 逃离x86架构-----CPU体系结构C