之前就想做个仿滴滴首页车辆平滑移动的效果,但是一直没有时间。最近翻看旧项目的时候又看到这个需求,想了想还是花点时间做一下吧。先上效果图。 源码在文章结尾

先是滴滴的效果图

再然后是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分==================

仿滴滴首页车辆随机平滑移动,基于高德地图相关推荐

  1. android高德地图点平滑移动,【高德地图SDK】如何实现轨迹平滑移动?

    很多人应该都有类似的经历,叫完车,想看看车离我还有多远距离?但手机屏幕上的车不是一动不动,就是一跳一跳的漂移. 目前市面上大多产品"轨迹平滑移动"做的并不好. 市面上只有快的打车和 ...

  2. 基于高德地图的描点操作,监听地图缩放,展示合理数量的marker

    原文:基于高德地图的描点操作,监听地图缩放,展示合理数量的marker 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/lx583274568/art ...

  3. python交通调查数据处理_GitHub - unlimitbladeworks/traffic-monitor: 基于高德地图的交通数据分析...

    traffic-monitor(基于高德地图的交通数据分析) 设计需求在于每天上班早高峰期,每次都提前出门,虽然有地图可以实时查看路况,但是再过一阵时间 就会异常的堵车如果通过数据监控分析每天指定路段 ...

  4. android 基于高德地图的轨迹回放

    android 基于高德地图的轨迹回放 前段时间公司项目有一个需求,就是需要看到设备上传之后的轨迹路线,并且可以实现回放的整个过程,功能包括路线回放.地图位置插点.回放之后的轨迹标记颜色.回放加速等功 ...

  5. 只用一个marker 替换 高德_Android基于高德地图完全自定义Marker的实现方法

    前言 相信做地图社交类APP开发的大家都知道,一般情况下,为了整体的美观和用户体验度,我们需要定制化Marker的样式.本文中实现的方式都是基于高德地图的,百度地图也类似,大家可以照葫芦画瓢,废话不多 ...

  6. 基于高德地图JsAPI进行浏览器精确定位,实现手机端考勤打卡功能

    前言: 由于项目需求需要在项目中实现手机端(基于网页)考勤打卡功能,最初考虑使用H5自身定位功能,但尝试过后,效果很不稳定.然后尝试使用百度地图JsAPI,百度家的稳定倒是很稳定,没想到的是定位位置和 ...

  7. vue中基于echarts和基于高德地图的两种地图下钻与上浮方式

    ** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...

  8. 基于高德地图实现可编辑的电子围栏功能【多边形围栏】

    上次基于高德地图实现了圆形围栏功能,但限于实地使用场景,故近期重新升级到多边形电子围栏,经过反复测验及优化,目前可正常使用. 1.主要功能: 多边形围栏的CURD: 自定义变数,形状: 自动计算变数及 ...

  9. 视频教程-Web前端开发仿美团/饿了吗移动App之高德地图接口对接案例-JavaScript

    Web前端开发仿美团/饿了吗移动App之高德地图接口对接案例 互联网编程行业10年开发和授课经验 曾任太极集团,外资企业等一线互联网python高级开发工程师 现任聚焦计算机技术有限公司项目组担任架构 ...

最新文章

  1. TMS320C6678中Hyperlink接口的理解
  2. DRF 商城项目 - 用户操作(收藏, 留言, 收货地址)
  3. 一个怎样得到treeView值的小例子
  4. hive的一些调优参数
  5. xStream:Security framework of XStream not initialized, XStream is probably vulnerable.
  6. 使用dd工具对磁盘RAID5和10进行I/O性能测试
  7. CSS样式(五)- CSS高级
  8. 三因子两水平doe_minitab doe 操作说明 范例 全因子实验设计法3 因子2 水平实验设计.pdf...
  9. 自动驾驶操作系统现状与发展趋势
  10. 计算机二级vf查询,计算机二级《VFP》知识点讲解:查询和视图
  11. 关于国内LTE宽带集群通信知识现状介绍
  12. UDID获取的方法(Iphone,Ipad,Mac,Window都可以)
  13. 字节跳动工作总结:工作一年的真心话
  14. 利用python合并csv文件
  15. 2021年茶艺师(中级)考试技巧及茶艺师(中级)作业考试题库
  16. BZOJ4836: [Lydsy1704月赛]二元运算-分治FFT
  17. 盯盯拍CEO 罗勇现身云栖大会 畅谈车联网生态并发布全新产品mini3
  18. 安卓学习笔记—渐变色背景
  19. flac文件转wav_WAV文件真的比FLAC更好吗?
  20. NullPointerException案例

热门文章

  1. 3. Kubernetes资源-概述
  2. Win10安装WSL-Ubuntu18.04
  3. 春运浙江运送旅客量将达1.38亿人次 同比下降3.4%
  4. 小哥凭“量子速读”绝技吸粉59万:看街景图0.1秒,“啪的一下”在世界地图精准找到!...
  5. CSS hover改变背景图片过渡动画生硬
  6. PKUSC 2018 游记
  7. 全球及中国冶金工业市场产量分析及投资战略决策报告2021版
  8. html图片标签 imag
  9. 解决:ipad QQ可以联网,浏览器不能联网
  10. 素描嘴巴注意这几个点,轻松画出头像神韵~