vue+animejs循环走马灯实现平滑动态折线图

前言：不是最优解，仅仅提供一种实现思路。

目标：需要实现一个平滑流畅的动态折线图

最开始尝试使用ECharts动态更新实现，实际数据由于波动较大，在动态更新数据重新绘制的过程中，人眼捕捉到的变化效果并不理性。

所以尝试了其他的方式。长连接获取的数据渲染后延迟显示。

这里用到了animejs循环走马灯

1、npm install animejs

2、import anime from "animejs/lib/anime.js";

<div class="cell">
    <div class="roll">
        <div id="channel11" class="box"></div>
        <div id="channel12" class="box"></div>
        <div id="channel13" class="box"></div>
     </div>
</div>

mounted() {
    var xTrans = [];
    anime.set(".box", {
      translateX: function (el, i, l) {
        xTrans[i] = { x: i * 1600 };
        return i * 1600;//一屏的宽度
      },
    });
    anime({
      targets: xTrans,
      duration: 60000, //走一周持续时间
      easing: "linear",
      direction: "reverse",
      x: "+=4800", //1600*3 一共三个屏
      loop: true,
      update: function (anim) {
        anime.set(".box", {
          translateX: function (el, i, l) {
            return xTrans[i].x % 4800;
          },
        });
      },
    });
}

<style scoped>
    .cell{
      width: 1600px;
      height: 300px;
      overflow: hidden;
      position: absolute;
    }
    .rolling {
      height: 300px;
      position: relative;
      left: -1600px;/*left距离设置一屏主要是隐藏循环过程中一屏内容突然消失*/
    }
    
</style>

然后在三个box内绘制折线图，循环过程中重绘内容实现平滑的动态折线图 

最终效果

Video_2022-05-07_172138