请求协助实现拟真蝴蝶翅膀SVG扇动动画效果

现有代码问题分析 #

当前动画采用linear匀速过渡，固定20度旋转角度，无法还原真实蝴蝶翅膀快速扇动、缓慢复位的自然节奏，同时旋转原点位置也未完全贴合蝴蝶身体结构。

优化后的完整代码 #

CSS 样式

.butterfly {
  width: 150px;
  height: auto;
}

.left-wing {
  animation: leftWingFlap 0.6s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;  
  transform-origin: calc(100% - 10px) center; /* 调整原点更贴近蝴蝶身体 */
}

.right-wing {
  animation: rightWingFlap 0.6s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;  
  transform-origin: 10px center; /* 调整原点更贴近蝴蝶身体 */
}

@keyframes leftWingFlap {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(35deg); /* 增大旋转幅度，更贴近真实扇动效果 */
  }
}

@keyframes rightWingFlap {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-35deg);
  }
}

SVG 结构

<svg id="Layer_2" class="butterfly" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 442.32 429.5">
  <defs>
    <style>
      .cls-1 {
        stroke-width: 0px;
      }
    </style>
  </defs>
  <g id="Layer_1-2" data-name="Layer 1">
    <g>
      <g class="left-wing">
        <path class="cls-1" d="M42.56,2.5c-8.1,6.9-11.3,21.2-16.1,71-3.9,41.1-6.6,57.7-13.6,83-2.9,10.5-3.5,14.1-3.1,18.9,1.6,17.6,20.9,37.3,52.2,53.3,13.2,6.7,39.3,17,58,22.8,15.2,4.7,45.5,12.5,48.6,12.5,2.4,0,2.9-3.9,2.9-24.9,0-39.9-7-88.3-16.9-118.2-11.4-33.9-28.4-59-64.1-94.8C71.96,7.7,60.36,0,50.96,0c-4.3,0-6,.5-8.4,2.5Z"/>
        <path class="cls-1" d="M32.76,237.1c-8.9,2.6-22.4,26.1-28.7,49.9-6.4,24.2-5.2,44.6,3.4,56.3,15.6,21.2,52,13.3,107-23.2,12.3-8.1,27.6-20.9,37.6-31.2,8.2-8.5,16.5-19,15.8-20.1-.3-.4-2.1-.8-4.1-.8-5.3,0-23.5-4.8-56-14.9-46.7-14.5-66.1-18.6-75-16Z"/>
      </g>
      <g class="right-wing">
        <path class="cls-1" d="M405.16,119c-20.1,2.3-56.1,10.1-72.2,15.7-29.1,10.1-53,25.5-79.6,51.1-14.6,14-31.7,32.8-43.9,48.2-9.9,12.5-24.2,33.8-23.7,35.4.4,1.3,26.4,12,41.3,17,15.7,5.3,56,15.2,69.2,17,6.2.9,17.7,1.6,25.5,1.6,27.2,0,42.9-6.5,50.5-20.8,1.8-3.3,3.2-6.6,3.2-7.3,0-2.4,11.2-29.4,17.2-41.4,3.3-6.6,13.7-25.5,23.1-42,23.1-40.7,28.1-52.3,26.2-62.1-.9-4.8-5.9-9.9-11.1-11.3-6.1-1.5-17.1-2-25.7-1.1Z"/>
        <path class="cls-1" d="M184.86,285.1c1.7,29,12.1,63.5,29.2,96.9,7.8,15.3,14.8,25.5,23.3,34.1,10,9.9,16.8,13.4,26.6,13.4s15-2.8,24-11.9c16.2-16.5,28.5-49.1,28.5-75.6,0-9.6-1.4-14-5.2-17.2-4-3.4-19-11.2-31.8-16.6-18.3-7.8-84-31.7-92.9-33.9l-2.4-.6.7,11.4Z"/>
      </g>
      <path class="cls-1" d="M189.66,216.6c-1.2.8-2.2,2.5-2.2,3.8,0,1.2-1.2,3.8-2.6,5.7-4.6,6.2-6.3,10.5-7.4,19.5-2,15.2-3.7,20.9-10.8,35.1-10.1,20.3-11.2,23.9-11.1,38.1.1,17,.3,17.2,7.7,7.8,3.4-4.2,7.3-9.6,8.6-11.9,3.2-5.4,6.1-16.6,8.1-31.2,1.8-13.4,3.7-18.9,11.2-33.2,5-9.8,5.3-10.7,5.3-17.7,0-4.1.5-7.8,1-8.1,1.7-1,1.1-6.1-.8-7.8-2.3-2.1-4.1-2.1-7-.1Z"/>
    </g>
  </g>
</svg>

核心优化说明 #

• 动画节奏：用cubic-bezier(0.4, 0, 0.6, 1)替代linear，模拟蝴蝶翅膀快速向下扇动、缓慢向上复位的自然运动规律
• 旋转幅度：将旋转角度从20度调整至35度，更贴近真实蝴蝶的扇动幅度
• 旋转原点：微调transform-origin位置，让翅膀围绕靠近身体的节点转动，符合生物结构逻辑
• 时长调整：将动画时长缩短至0.6秒，匹配蝴蝶高频扇动的飞行状态

内容的提问来源于stack exchange，提问作者virat