二次贝塞尔曲线动画

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

今天我们看看一个曲线动画：

它的源码如下：

<div class='wrapper'>
  <svg class="transition" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path class="path" stroke="#000" stroke-width="2px" dur="10s" vector-effect="non-scaling-stroke" d="M 0 100 V 100 Q 50 100 100 100 V 100 z"/>
      <animateMotion dur="10s" repeatCount="indefinite">
        <mpath xlink:href="#path" />
      </animateMotion>
  </svg>
  <svg class="logo" viewBox="0 0 18.31 18.31">
    <path fill="#ffffff" d="M7.47,17.61l-6.78-6.78c-0.92-0.92-0.92-2.44,0-3.36l6.78-6.78c0.92-0.92,2.44-0.92,3.36,0l6.78,6.78c0.92,0.92,0.92,2.44,0,3.36l-6.78,6.78C9.91,18.54,8.4,18.54,7.47,17.61z M6.94,11.31c2.09,2.09,3.15,2.34,4.5,0.98c0.83-0.83,1.65-1.75,2.23-2.79l-0.56-0.56c-0.64,0.86-1.49,1.69-2.41,2.61c-0.78,0.78-1.33,0.7-2.58-0.55l2.25-2.25c0.96-0.96,0.92-1.83,0.15-2.6C8.75,4.37,7.84,5.04,6.59,6.29C4.94,7.94,4.56,8.93,6.94,11.31z M7.38,10.26C5.75,8.64,6.2,8.16,7.34,7.03c1.09-1.09,1.38-1.2,2.43-0.14c0.33,0.33,0.3,0.68-0.14,1.13L7.38,10.26z"/>
</svg>
</div>

* {
  padding: 0;
  margin: 0;
}
html {
  overflow: hidden;
}
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.wrapper > .transition {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
}

.wrapper > .logo {
  overflow: hidden;
  width: 40%;
  max-width: 180px;
  max-height: 40%;
  position: absolute;
  z-index: 1;
}

let $path = document.querySelector(".path"),
    $logo = document.querySelector(".logo"),
    repeat = false,
    animate = () => {
      const start = "M 0 100 V 50 Q 50 0 100 50 V 100 z";
      const end = "M 0 100 V 0 Q 50 0 100 0 V 100 z";
      new TimelineMax(repeat ? { paused: true } : {repeat: -1, repeatDelay: 1})
        .to($path, 0.8, {attr: { d: start }, ease: Power2.easeIn})
        .to($path, 0.4, {attr: { d: end }, ease: Power2.easeOut})
        .from($logo, .8, {y: 75}, '-=.8')
        .play(0);
    };

animate();