如何通过命令式API使用GSAP实现一个动态Menu按钮

效果

先看效果：

> 下载演示视频 <

核心代码

算是一种典型的命令式的使用方式。

  function startMenuLineAnimation(_collapsed: boolean) {
    const topClassSelector = '.gsap-top-line';
    const middleClassSelector = '.gsap-middle-line';
    const bottomClassSelector = '.gsap-bottom-line';
    const tl = gsap
      .timeline({ repeat: 0 })
      .to(topClassSelector, {
        rotate: `${_collapsed ? '' : '-'}18reg`,
        duration: 0.2,
      })
      .to(topClassSelector, {
        rotate: '0reg',
        duration: 0.2,
        delay: 0.2,
      });
    tl.play();
    const tl2 = gsap
      .timeline({ repeat: 0 })
      .to(bottomClassSelector, {
        rotate: `${_collapsed ? '-' : ''}18reg`,
        duration: 0.2,
      })
      .to(bottomClassSelector, {
        rotate: '0reg',
        duration: 0.2,
        delay: 0.2,
      });
    tl2.play();
    const tl3 = gsap
      .timeline({ repeat: 0 })
      .to(middleClassSelector, {
        scaleX: 0.5,
        x: _collapsed ? -4 : 4,
        duration: 0.2,
      })
      .to(middleClassSelector, {
        scaleX: 1,
        x: 0,
        duration: 0.2,
        delay: 0.2,
      });
    tl3.play();
  }