前端实现车辆运动效果遇到的问题
场景：如图一辆车经过三个站，需要车辆根据时间信息实时运动。
数据参考：后台可以提供的数据只有发车时间和到站时间，但到站时间由于现实不确定因素只能到站的前一两分钟才能确定。
目的：使车辆尽可能地实时运行，最好的效果是一经过到站时间列车刚好停靠在目标车站。
前端框架是VUE2，想知道有没有相关的组件可以用，或者用原生JS怎么实现呢？
一个很麻烦的思路，不一定对，参考一下就好：
先收集几个参数，比如前面100天的每次实际到站时间，天气情况，红绿灯情况，行人/乘客数量动态，车速，路况。根据这几个参数生成一张曲线图，按照图的最高点，最低点，差距值进行层次划分，比如天气晴朗，一路绿灯，乘客很少，路上车辆也很少，这是第一层级，天气很差，一路红灯，乘客拥挤，疯狂堵车，这是最后一级，中间有多少层级则根据预估时间的跨度进行划分，将层级划分结果封一个函数，将每次发车的需求数据传进去进行推算。数据分析模型量越大时间越准确，比如扩展到1000天（开玩笑的），事实上我感觉这不是前端该干的，因为实在过于麻烦。只能不断朝那个方向靠近（或者说可以根据列车平均时速在相当于播报时间长度的距离放一个信号牌，信号牌传一个数据，通过列车感应系统接收触发播报）
只有发车时间和到站时间，没有实时位置，那你可以改变车辆移动速度嘛（在没得到到站时间之前，设置车辆永远到不了停靠站或是无限接近）。打开手机，看一下高德地图/百度地图的公交路线的车辆到达是怎样的
如果使用Vue.js中的计时器和动画效果来实现车辆的实时运动：
在Vue组件中定义一个数据属性来保存车辆当前所在的站点，例如
currentStation，初始值为0。使用Vue计时器（
setInterval或者requestAnimationFrame）来定时更新车辆位置。可以通过获取当前时间，与发车时间和到站时间进行比较，来确定车辆应该在哪个站点。根据车辆当前所在的站点，使用Vue动画效果来实现平滑的过渡效果。你可以使用Vue的
transition组件或者CSS动画来实现。当车辆到达站点时，更新
currentStation的值，并停止计时器。
如果使用原生JavaScript实现的话：
使用
setTimeout或者requestAnimationFrame来定时更新车辆位置。使用JavaScript操作DOM元素，如改变车辆的位置或添加CSS样式来实现动画效果。
- 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7624333
- 你也可以参考下这篇文章：2.写vue遇到的小问题及解决方法。如：如何延迟两秒执行某行代码；清空子组件数据列表的选中状态；本地样式正确，部署服务器后，样式出错
- 除此之外, 这篇博客: 前端（vue 或者原生js）限制只能输入最多两位小数的正数（支付功能，类似微信支付宝转账的输入金额控制）中的 限制输入最多两位小数的正数 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
直接代码吧
//一定要用原生的input框，反正我用element UI 的input框是不行的，值会保留上一次的结果
<input type=“number” v-model.number=“isMultistageUp.value” @input=“decimalNum2” >//只能输入两位小数
decimalNum2(e) {
var that = this
console.log(‘e’, e)
// 通过正则过滤小数点后两位
// valueAsNumber是输入框值经过过滤的数字形式 如001就是1
let value=’’;
value = (e.target.valueAsNumber).toString();
value = (value.match(/^\d*(.?\d{0,2})/g)[0]) || null
that.$set(this.isMultistageUp,‘value’,value)
}
如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
使用threejs 哈如有帮助给个采纳谢谢