有一次数据大屏开发中，客户要求给背景添加一个星光点点的效果，但是当时没有思路，只有一个已经收藏的星光效果，当时客户对此效果不是很满意，但是自己又不会其他的实现方式就不了了之了，今天我们来通过ae来实现这个星光效果

最终效果

创建ae项目

打开ae-新建项目，项目1920*1080 5秒

将我们大屏项目用的背景图片拖入到项目中

创建星星图层

我们新建一个纯色图层，查找效果CC Star Burst，将效果拖入到图层中，

然后配置CC Star Burst配置，配置如如下：

拖入的星星比较小，不是很明显

我们增强一下，给星星添加光晕，这里我们使用Deep Glow来加强光晕，参数配置如下

星星增加光晕后效果如下

最终结合我们的数据大屏背景后，最终的效果如下：

生硬循环

动画出来了，但是还是有一个问题就是循环，这是一个5秒的小动画，每隔5秒就就重新循环，因为开始和结尾不同所以在衔接上就会很生硬，导致动画看起来不够流畅。

做一个过渡

动画拆分，我们使用ctrl+Shift+D来将我们的动画拆为两部分，然后后半部分拖到前面，前半部分拖到后面，然后前面的动画执行一段后，渐渐透明，后面一段从透明渐渐不透明，这样一个过渡效果，让动画变化的不至于那样生硬。

导出动画

我们做的是一个背景动画，所以不需要做透明处理，导出为视频的话，占用的空间最小，我们导出输出位一个视频，大概配置如下：

视频处理

导出的视频有点大，大概有300多M，我们需要使用压缩工具进行一下压缩，win系统下可以使用格式工厂进行压缩，我使用的系统是mac这里使用的是Shotcut来进行压缩，

最终压缩后，我们的视频有600多k这样的视频大小在当前的网速一下，基本不影响效果的加载。

将视频应用到数据大屏中

我们专门创建一个vue组件，用来渲染视频，然后再引入这个组件就可以了。

<template>
  <video ref="bgVideo" class="bg_video" autoplay loop muted playsinline>
    <source src="./assets/bg.mp4" type="video/mp4">
    您的浏览器不支持 video 标签。
  </video>
</template>

<script>
export default {
  data() {
    return {
      bgVideo: null
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.bgVideo = this.$refs.bgVideo;
      if (this.bgVideo) {
        // 确保视频加载完成后自动播放
        this.bgVideo.addEventListener('loadedmetadata', () => {
          this.bgVideo.play().catch(error => {
            console.error('自动播放失败:', error);
          });
        });
      }
    });
  }
};
</script>

<style scoped>
.bg_video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  object-fit: cover;
  pointer-events: none;
}
</style>

至此一个星光背景的效果就添加好了。