javascript - gsap 旋转 - 如何避免急剧过渡

Question

谁能帮我更流畅地摆动，而不需要从一个方向到另一个方向的急剧过渡？动画应该像风中的秋千。

const 	stepDuration = 0.5, wing = '#wing';
gsap.set(wing, {transformOrigin: "50% 0%", rotation: 15})
const walk = () => {gsap.timeline({repeat: -1, defaults: { ease: "circ.inOut", duration: stepDuration }})
    .add('start')
	.to(wing, { rotation: -15 })
    .to(wing, { rotation: 15 })
}
window.onload = () => {walk()};

svg {
  position: fixed;
  left: 50vw;
  top: 25px;
  width: 70%;
  height: 70%;
  animation: a01 9s;
  background: #0099cc;
}

#wing {
  fill: gold;
  transform-origin: top center;
  animation: awinga 25s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/gsap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathPlugin.min.js?v=15"></script>

   <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 1280 720">
      <path id='wing' d="M100 0 L150 0 L150 300 L100 300 Z" />
    </svg>

<script>

</script>

Answer 1

你想要的基本上是一个在开始和结束时逐渐变细的补间/缓动函数，中间没有明显的渐变。你抽搐的原因是因为对于 circ.inOut 缓动，基本上有一个无限小的时间段，其中梯度是无限的(正好在 50% 标记处)，这导致你急剧抽搐查看它何时处于补间中间(就在您的元素旋转超过垂直中线时):

因此，您应该选择中间没有突然变化的缓动函数，例如power1.inOut 或类似的东西:

[

const 	stepDuration = 0.5, wing = '#wing';
gsap.set(wing, {transformOrigin: "50% 0%", rotation: 15})
const walk = () => {gsap.timeline({repeat: -1, defaults: { ease: "power1.inOut", duration: stepDuration }})
    .add('start')
	.to(wing, { rotation: -15 })
    .to(wing, { rotation: 15 })
}
window.onload = () => {walk()};

svg {
  position: fixed;
  left: 50vw;
  top: 25px;
  width: 70%;
  height: 70%;
  animation: a01 9s;
  background: #0099cc;
}

#wing {
  fill: gold;
  transform-origin: top center;
  animation: awinga 25s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/gsap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathPlugin.min.js?v=15"></script>

   <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 1280 720">
      <path id='wing' d="M100 0 L150 0 L150 300 L100 300 Z" />
    </svg>

<script>

</script>