大屏开发相关前端技术_手写大屏前端开发

记录一下关于前端大屏开发的技术点。

框架上vue，react都可以使用。

基础搭建

一些共用的组件库datav支持vue2/3和react，eCharts可以满足大部分的图表需求，antv包括了一大堆可视化组件，包括流程图等，遇到样式十分特别的，那也还是要自己写html和css。

     

3D

eCharts可以满足一些比如3D地球这类的需求，一般会作为背景或者比较占地方的组件来吸引眼球或者显得高大上一些。

但遇到复杂的需求或者定制化的需求就不打能满足。这时候可能需要cesiumjs来实现，比如需要倾斜摄影，模型导入，航线动画，贴地路线，实时地图绘制等需求，需要稍微注意一下性能上的需求。

一般到这里就可以了，再往下就要掉头发了

如果还会有一些更夸张的需求，比如动画，我指的是物理引擎的动画，需要实时渲染场景作为背景的动画，建议看看Threejs，基本满足所有3D需求，再加上Cannonjs基本能实现一般的物理场景。（我是建议直接让出一个video插进去算了，费这老大劲儿，另一个建议是Threejs和Cannonjs不好啃，搜索引擎找不到结果的时候，问gpt是个很好的选择）

特效

一般大屏项目都会有一些特效。除去eCharts等自带特效的组件，也会有一些需要自己手写的组件。框架层面可能会有的需求，比如背景不动，所有组件在点击按钮的时候往一个方向淡入淡出，类似这样做到丝滑的感觉。

一般来说这类大屏都是单页面，路由是不会改变的，页面可以使用relative或者absolute布局定位，可以根据按钮模块化，淡入淡出效果vue可以使用transtion标签或者用css做。

炫光动画，比如某个形状需要光线流动的动画，如果能给到svg路径path，其实是可以使用css做的。

如果给不到，一般的矩形也可以建立一个大小一致的div再做动画，但是如果形状还很复杂，那就没啥办法，设计ui出动画吧。。。

线条的流光动画，antv有自带的组件可以实现，也可以自己写。

闪烁动画，css keyframe可以简单实现，不满意就出图。

如果已经使用了cesiumjs，可以实现一些比较炫酷的，比如摄像机动画，地球模型变换等。

粒子特效

未完待续...