国庆7天长假，大家是选择家里蹲呢还是出游呢，还是回老家呢？疫情期间非必要不出门哈哈哈。今天带大家来实现一个国庆期间高速路的情况。

页面内容

上边的是回家的路，下边的是上班的路~

每个svg对应一辆小汽车，我给小汽车分别配色红橙黄绿青蓝紫！皮的很

效果实现

首先我们试着让第一辆车移动：

import { onMounted } from 'vue';
import gsap from 'gsap';
const move = () => {
  const tl = gsap.timeline({defaults: {
    duration: 10,
    x: -1900,
  }});
  tl.to('.car1', {})
}
onMounted(() => {
  move();
})

ok, 我们让上边的车一辆接着一辆运动：

const move = () => {
  const tl = gsap.timeline({defaults: {
    duration: 1,
    x: -1900,
  }});
  for(let i=0;i<7;i++) {
    tl.to(`.car${i+1}`, {});
  }
}

真帅！但是真实情况不是这样的，一般前一辆车开出，后一辆就会跟上了，我们稍微加2个参数:

const move = () => {
  const tl = gsap.timeline({defaults: {
    duration: 3,
    x: -1900,
  }});
  for(let i=0;i<7;i++) {
    tl.to(`.car${i+1}`, { delay: i === 0 ? 0 : 0.5 }, '<');
  }
}

delay: 延时启动，'<': 提前一个进程执行。

汽车加速有点过快了，我们调整缓动参数：

const move = () => {
  const tl = gsap.timeline({defaults: {
    duration: 3,
    x: -1900,
    ease: 'power2.in'
  }});
  for(let i=0;i<7;i++) {
    tl.to(`.car${i+1}`, { delay: i === 0 ? 0 : 0.5 }, '<');
  }
}

帅气，ok，我们最后操控下下边这辆苦逼上班族：

gsap.to('.car8', {
    duration: 3,
    x: 1900,
    ease: 'none'
})

体验地址

大家是否正堵在高速路上呢？在路上的话点个赞证明你堵车了~