数据可视化大屏项目开发中，会需要很多小动画进行点缀，以达到让大屏看起来更加酷炫。

今天整理的动画效果是使用gsap三个点依次变大然后恢复原来大小的动画效果。

动画效果

关键代码

<template>
  <div class="titleDot">
    <div class="titleDot1"></div>
    <div class="titleDot1"></div>
    <div class="titleDot1"></div>
  </div>
</template>

<script>
import { gsap } from 'gsap';

export default {
  name: 'AnimatedDots',
  mounted() {
    this.animateDots();
  },
  methods: {
    animateDots() {
  const dots = this.$el.querySelectorAll('.titleDot1');

  const masterTimeline = gsap.timeline({ repeat: -1 });

  dots.forEach((dot, index) => {
    const individualTimeline = gsap.timeline();
    individualTimeline
      .to(dot, {
        scale: 1.5,
        duration: 0.3
      })
      .to(dot, {
        scale: 1,
        duration: 0.3
      });

    // Add this individual timeline to our master timeline, with an offset for each dot
    masterTimeline.add(individualTimeline, index * 0.15);
  });
}
  }
}
</script>

<style scoped>
.titleDot {
  display: flex;
  gap: 10px;
}

.titleDot1 {
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  transform-origin: center;
}
</style>

更多gsap动画效果

gsap 动画效果汇总