js实现贝塞尔曲线，div也能如此丝滑？

今天遇到朋友发来的一个ui图，询问我如何实现下图这样的效果【vue项目】，（听说是类似LED灯的展示效果），于是便有了今天的小demo，要实现一个类似下图的动效，上面的灯会一直重复滚动，但是这个并不是什么难点，主要在于如何实现这种平滑的曲线，日常我们的开发的div在我们的脑海中通常就是一个网格状，涉及到平滑曲线的往往是图表，于是我们需要找一个方案来完成这种布局（非真实ui图，是完成之后的效果）

分析

我们需要先简单分析一下这个ui，当我们拿到这个UI图的时候，脑海中的第一反应是，一个大的DIV中间套了很多的小的DIV，并且小的的上下位置出现了偏移，但是偏移多少目前我们不得而知，但是基础的布局方案已经完成。

第二步我们考虑球体的颜色，可以看到，轨道是一种颜色，需要一直移动的球体是另一种颜色，这个非常简单，我们定义两组数据，一组是轨道，一组是高亮的球，通过不段改变高亮的这组数据，即可响应式的完成灯的移动，第二点我们也解决了

第三点，初始的时候考虑的是y的坐标是0, 2, 4, 6, 8, 10 , 8, 6, 4 , 2 … ,但是很显然，这样的坐标出来的形状一定是一个折线图，而不是平滑的曲线，于是我们需要用到数学知识了：需要使用到圆的弧度的概念，在javascript中有两个方法**Math.sin()和Math.cos()**都是关于弧度的公式，关于这两个方法，我们下面再说。

实现

布局

实现这个的布局非常简单，外层一个大的div，内层很多小的span，通过flex一排即可到一排

<template><div class="container"><div class="content"><span class="circle" v-for="(item,index) in list" :key="index"></span></div></div>
</template>