Javascript gsap旋转-如何避免急剧转换

有人能帮我更流畅地挥杆，而不需要从一个方向到另一个方向的剧烈转换吗？动画应该像风中的秋千

const stepDuration=0.5，wing='#wing'；
集合（机翼，{transformOrigin:“50%0%”，旋转：15}）
const walk=（）=>{gsap.timeline（{repeat:-1，默认值：{ease:“circ.inOut”，持续时间：stepDuration}）
.add（'开始'）
.to（机翼，{旋转：-15}）
.to（机翼，{旋转：15}）
}
window.onload=（）=>{walk（）}
svg{
位置：固定；
左：50vw；
顶部：25px；
宽度：70%；
身高：70%；
动画：a019s；
背景#0099cc；
}
#翼{
填充物：黄金；
变换原点：顶部中心；
动画：awinga25s；
}
您需要的基本上是一个在开始和结束时逐渐变细的tweening/easing功能，中间没有明显的渐变。产生抖动的原因是，对于
圈内松弛，基本上存在一个无穷小的时间段，其中梯度是无穷大的（正好在50%标记处），这会导致在中间位置出现剧烈抖动（当元素旋转超过垂直中线时）：


因此，您应该选择一个在中间没有突然变化的宽松函数，例如<代码> POWI1. IOUT 或类似的：
[


const stepDuration=0.5，wing='#wing'；
集合（机翼，{transformOrigin:“50%0%”，旋转：15}）
const walk=（）=>{gsap.timeline（{repeat:-1，默认值：{ease:“power1.inOut”，持续时间：stepDuration}）
.add（'开始'）
.to（机翼，{旋转：-15}）
.to（机翼，{旋转：15}）
}
window.onload=（）=>{walk（）}；
svg{
位置：固定；
左：50vw；
顶部：25px；
宽度：70%；
身高：70%；
动画：a019s；
背景#0099cc；
}
#翼{
填充物：黄金；
变换原点：顶部中心；
动画：awinga25s；
}

感谢您的解决方案，特别是感谢您的解释。您救了我的命。有关于此参数的参考页吗？@qadenza很高兴提供帮助：）@qadenza您可以使用GSAP来查看类似的图。