带有 SVG.js 的蜜蜂 SVG 动画

Posted

技术标签:

【中文标题】带有 SVG.js 的蜜蜂 SVG 动画【英文标题】：Bee SVG animation with SVG.js 【发布时间】：2021-05-23 15:28:48 【问题描述】：

正如您在codepen 中看到的，在 SVG 画布中有一个简单的 Bee SVG。理想情况下，我想实现一个蜜蜂在画布周围嗡嗡作响的动画，但现在我很简单地尝试从左到右移动它。我使用的库是snap.svg

我的基础是 codepen，但不知何故我无法让它发挥作用。

html：

<div class="wrapper">
      <svg id='snappy' class='img-responsive' viewBox="0 0 1200 700">
             <svg id="bee" x="100" y="100" xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 51.56 56.763"  xmlns:v="https://vecta.io/nano"><g transform="matrix(.26458 0 0 .26458 -10.137 -3.944)"><path fill="#fff" d="M108.859 137.318c0-.324 1.515-2.606 5.195-3.131 15.73-2.247 29.851 28.808 28.898 30.272s-8.497 8.627-12.098 9.47-7.162 3.217-8.822 3.153-7.139.542-7.277-.674-2.669-15.399-2.669-20.033-.242-13.202-.894-14.606-2.333-4.451-2.333-4.451z"/><path d="M115.581 138.635c-3.242-3.606-9.84-6.911-18.839-4.642-8.959 2.259-24.573 13.377-24.026 31.944s10.65 29.76 13.653 32.217c1.802 1.475 3.643-1.105 6.233-3.991 0 0 .012-.012.016-.014.656-.73 3.949-4.837 5.688-6.711 3.894-4.197 8.938-15.764 8.938-15.764s.121 6.998-4.97 16.378c7.493-4.812 19.774-15.761 21.227-24.845 2.177-13.618-4.84-21.147-7.92-24.572z"/><path fill="#fc0" d="M142.953 137.434s15.938-.781 19.384-.001 17.452 2.778 26.807 17.822c6.952 11.178 5.257 29.734 3.236 35.164s-12.588 20.325-12.588 20.325l-18.78-11.803c-1.198-.405-9.44-6.392-10.494-8.12s-2.08-1.278-3.834-4.566-2.604-4.525-3.73-6.645c-3.598-6.759-5.988-3.201-7.124-3.201h-4.647s7.174-22.721 5.91-28.527-4.292-12.923-4.292-12.923z"/><path d="M85.567 157.957s-9.254-.959-19.146 4.846c-12.967 7.611-19.118 14.352-18.914 17.524s3.506 4.138 6.089.675 1.656-5.792 1.656-5.792 10.388-11.165 19.302-13.371c8.325-2.058 12.872-1.2 12.872-1.2l3.535-2.447z"/><path fill="#fff" d="M91.283 149.83c-4.109.951-7.615 5.01-8.191 14.743-.663 11.188-.379 15.107 5.461 11.739 7.098-4.094 11.098-12.776 10.375-20.203-.482-4.96-3.166-7.316-7.645-6.279z"/><path d="M82.887 142.196s-7.062-6.058-18.5-6.918c-14.993-1.129-23.886.911-25.525 3.636s.526 5.396 4.621 4.021 4.66-3.816 4.66-3.816 14.896-3.265 23.48 0c8.015 3.049 11.264 6.343 11.264 6.343h4.298zm28.306-6.894s12.977.547 17.062 10.158c9.112 21.432-13.789 31.615-13.789 31.615s18.582 4.889 26.41-2.433 14.39-20.897 5.05-34.432-24.13-13.539-34.733-4.908zm32.594 2.132s8.118-1.225 15.521 4.325c7.321 5.491 9.132 22.7 2.84 31.809-6.929 10.029-16.283 10.982-16.283 10.982l-4.166-7.069s12.689-5.993 14.452-16.489c1.766-10.514-2.513-20.688-12.364-23.558zm13.201-.342s15.168 2.447 17.655 16.897c2.5 14.514-3.343 24.952-8.627 28.904-10.062 7.525-18.28 5.037-18.28 5.037s7.009 7.176 9.488 8.738c.802.504 28.466-6.25 27.96-33.058-.198-10.489-3.961-26.677-28.196-26.518z"/><path d="M186.951 152.173s9.127 21.085 2.271 33.324c-7.053 12.591-15.904 15.479-21.584 15.115-4.598-.294-4.355-.536-4.355-.536s13.573 14.39 14.36 19.881.03 1.704 2.112-2.271 15.938-11.729 17.538-29.422c1.541-17.03-1.632-24.541-10.342-36.091zm-61.158 25.308s-.189 4.229-1.136 7.069 0 3.787 1.136 8.331 1.692 7.763-.764 9.467-2.076 2.65-2.455 1.704.343-1.391 1.118-3.441 1.497-3.754 0-6.973-4.242-6.059-3.58-10.448c.311-2.061.947-4.895.947-4.895l1.515-1.888zm8.9-1.072c.739 1.332 3.407 5.302 3.786 8.142s-1.515 4.542-1.894 5.868-2.225 4.735.024 7.765 3.194 6.248 3.194 9.845.947 5.491 1.894 3.408 2.272-1.521 0-7.008-2.343-5.346-2.875-7.689 4.059-6.222 4.13-9.3-2.58-9.137-3.148-11.031-2.271-4.733-2.271-4.733zm14.771 12.684c.567.566 5.518 9.09 3.987 16.474s-4.44 12.875-1.849 16.283 6.189 7.385 6.946 7.574 1.894-1.137 1.325-2.083-2.777-2.648-4.023-5.018c-1.343-2.557-2.811-5.207-1.106-8.236s3.048-7.012 3.048-9.66-.113-4.288-.303-7.696-2.745-7.639-2.745-7.639h-5.28zm-47.853-23.281c-1.666 4.811-5.958 7.689-9.585 6.43s-5.219-6.174-3.551-10.983 5.959-7.689 9.586-6.43 5.219 6.173 3.55 10.983z"/><circle fill="#fff" cx="90.466" cy="161.179" r="3.281"/></g><path d="M35.427 10.733c-7.454 5.988-11.371 20.431-11.371 20.945a106.44 106.44 0 0 1 1.077.619c1.077.621 2.482 2.378 2.482 2.378l1.029-.323-.001-.001c1.971-.633 5.014-1.7 8.184-3.161 5.113-2.358 14.732-10.106 14.733-18.447.001-7.975-8.706-7.975-16.133-2.009zm.449 18.393c-2.914 1.344-5.754 2.353-7.623 2.963-.067.021-.588.257-1.047.456-1.009-1.178-2.056-1.651-2.407-1.786 1.551-3.614 6.695-13.953 12.05-18.254 2.923-2.348 6.19-3.75 8.74-3.75 1.19 0 2.099.297 2.701.883.661.644.997 1.689.997 3.105-.001 7.12-8.882 14.295-13.412 16.384z"/><path opacity=".5" fill="#fff" d="M35.876 29.126c-2.914 1.344-5.754 2.353-7.623 2.963-.067.021-.588.257-1.047.456-1.009-1.178-2.056-1.651-2.407-1.786 1.551-3.614 6.695-13.953 12.05-18.254 2.923-2.348 6.19-3.75 8.74-3.75 1.19 0 2.099.297 2.701.883.661.644.997 1.689.997 3.105-.001 7.12-8.882 14.295-13.412 16.384z"/><path d="M27.319 1.349c-6.476 4.63-8.276 16.778-7.868 22.259.304 4.054.967 7.67 1.332 9.451.509-.064 1.032-.05 1.559.072.132.055.27.093.411.113 1.403.187 1.584.793 1.607.946l-.01.012c0 .012.007.017.013.023.262-.176.538-.393.769-.655 0 0 9.431-10.768 10.814-20.173 1.379-9.372-2.437-16.475-8.628-12.049zm6.629 11.871c-.817 5.557-4.868 13.264-7.464 17.647l-4.162-.82a73.88 73.88 0 0 1-.852-6.807c-.362-4.856 1.317-16.084 6.844-20.036 1.1-.786 2.058-1.093 2.848-.91.718.167 1.346.744 1.869 1.715 1.116 2.08 1.46 5.524.917 9.212z"/><path opacity=".5" fill="#fff" d="M33.949 13.22c-.817 5.557-4.868 13.264-7.464 17.647l-4.162-.82a73.88 73.88 0 0 1-.852-6.807c-.362-4.856 1.317-16.084 6.844-20.036 1.1-.786 2.058-1.093 2.848-.91.718.167 1.346.744 1.869 1.715 1.116 2.08 1.46 5.524.917 9.212z"/></svg>
      </svg>
</div>

CSS：

/* apply a natural box layout model to all elements, but allowing components to change */
html 
  box-sizing: border-box;

*, *:before, *:after 
  box-sizing: inherit;


svg#bee_svg 
  width: 100%;
  padding: 40px 75px 40px 10px;
  overflow: visible;


#snappy 
  background-color: wheat;
    position: relative;
  display: block;
  border: solid 1px #000;

JS：

// Html Viewbox Reference :viewBox="0 0 1200 700" 
var s = Snap("#snappy");
var bee = $("#bee");
console.log(bee);
var vBW = 1200; // viewBoxWidth
var vBH = 700; // viewBoxHeight

function animate1()
  bee.animate(x: vBW-110, 4000, animate2);  


function animate2()
  bee.animate(x: 10, 2000, animate1);  


animate1();

我是 SVG 和动画的初学者，非常感谢任何帮助。

【问题讨论】：

这能回答你的问题吗？ jQuery animate SVG element 【参考方案1】：

理想情况下，我希望制作蜜蜂嗡嗡作响的动画 在那幅画布周围，但现在我很简单，试图将它向左移动 对。

Live Demo

前半部分任务不仅可以借助 JS 库解决，还可以使用 smil SVG。

#1。蜜蜂水平和垂直运动的动画

通过在 translate (X, Y) 命令中添加和更改坐标，可以获得对象的水平和垂直移动组合。

如果在动画命令 animateTransform的values属性中添加几对坐标，就可以得到任意形状的运动动画

 <animateTransform attributeName="transform" type="translate" dur="30s" values="900,0;800,140;800,150;700,100; 610,160;610,150;610,150;610,160;610,150;600,160;610,330;610,300;610,330;685,470;685,470;560,520;570,530;570,530;480,340;480,330;480,340;400,400;400,400;330,220;330,220;280,180;250,80;225,365;
            225,365;225,365;200,180;150,150;150,150;0,0;-100,-100"
            fill="freeze"
            repeatCount="indefinite" />

请看全屏

<style>

#wing1  opacity:0.6;
 
#wing2 opacity:0.75;

</style> 
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="img-responsive"   viewBox="0 0 1200 700" version="1.1" >
  <defs>
    <linearGradient id="grad1" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0.5" stop-color="dodgerblue"/>
      <stop offset="1" stop-color="gold"/>
    </linearGradient>
</defs> 
  <rect   fill="url(#grad1)" />
    <g  id="bee" transform="translate(100,100)">
  <g transform="matrix(0.26458,0,0,0.26458,-10.137,-3.944)">
    <path d="m108.9 137.3c0-0.3 1.5-2.6 5.2-3.1 15.7-2.2 29.9 28.8 28.9 30.3-1 1.5-8.5 8.6-12.1 9.5-3.6 0.8-7.2 3.2-8.8 3.2-1.7-0.1-7.1 0.5-7.3-0.7-0.1-1.2-2.7-15.4-2.7-20 0-4.6-0.2-13.2-0.9-14.6-0.7-1.4-2.3-4.5-2.3-4.5z" fill="#fff"/>
    <path d="m115.6 138.6c-3.2-3.6-9.8-6.9-18.8-4.6-9 2.3-24.6 13.4-24 31.9 0.5 18.6 10.7 29.8 13.7 32.2 1.8 1.5 3.6-1.1 6.2-4 0 0 0 0 0 0 0.7-0.7 3.9-4.8 5.7-6.7 3.9-4.2 8.9-15.8 8.9-15.8 0 0 0.1 7-5 16.4 7.5-4.8 19.8-15.8 21.2-24.8 2.2-13.6-4.8-21.1-7.9-24.6z"/>
    <path d="m143 137.4c0 0 15.9-0.8 19.4 0 3.4 0.8 17.5 2.8 26.8 17.8 7 11.2 5.3 29.7 3.2 35.2-2 5.4-12.6 20.3-12.6 20.3l-18.8-11.8c-1.2-0.4-9.4-6.4-10.5-8.1-1.1-1.7-2.1-1.3-3.8-4.6-1.8-3.3-2.6-4.5-3.7-6.6-3.6-6.8-6-3.2-7.1-3.2h-4.6c0 0 7.2-22.7 5.9-28.5-1.3-5.8-4.3-12.9-4.3-12.9z" fill="#fc0"/>
    <path d="m85.6 158c0 0-9.3-1-19.1 4.8-13 7.6-19.1 14.4-18.9 17.5 0.2 3.2 3.5 4.1 6.1 0.7 2.6-3.5 1.7-5.8 1.7-5.8 0 0 10.4-11.2 19.3-13.4 8.3-2.1 12.9-1.2 12.9-1.2l3.5-2.4z"/>
    <path d="m91.3 149.8c-4.1 1-7.6 5-8.2 14.7-0.7 11.2-0.4 15.1 5.5 11.7 7.1-4.1 11.1-12.8 10.4-20.2-0.5-5-3.2-7.3-7.6-6.3z" fill="#fff"/>
    <path d="m82.9 142.2c0 0-7.1-6.1-18.5-6.9-15-1.1-23.9 0.9-25.5 3.6-1.6 2.7 0.5 5.4 4.6 4 4.1-1.4 4.7-3.8 4.7-3.8 0 0 14.9-3.3 23.5 0 8 3 11.3 6.3 11.3 6.3h4.3zm28.3-6.9c0 0 13 0.5 17.1 10.2 9.1 21.4-13.8 31.6-13.8 31.6 0 0 18.6 4.9 26.4-2.4 7.8-7.3 14.4-20.9 5.1-34.4-9.3-13.5-24.1-13.5-34.7-4.9zm32.6 2.1c0 0 8.1-1.2 15.5 4.3 7.3 5.5 9.1 22.7 2.8 31.8-6.9 10-16.3 11-16.3 11l-4.2-7.1c0 0 12.7-6 14.5-16.5 1.8-10.5-2.5-20.7-12.4-23.6zm13.2-0.3c0 0 15.2 2.4 17.7 16.9 2.5 14.5-3.3 25-8.6 28.9-10.1 7.5-18.3 5-18.3 5 0 0 7 7.2 9.5 8.7 0.8 0.5 28.5-6.2 28-33.1-0.2-10.5-4-26.7-28.2-26.5zM187 152.2"/>
    <path d="m187 152.2c0 0 9.1 21.1 2.3 33.3-7.1 12.6-15.9 15.5-21.6 15.1-4.6-0.3-4.4-0.5-4.4-0.5 0 0 13.6 14.4 14.4 19.9 0.8 5.5 0 1.7 2.1-2.3 2.1-4 15.9-11.7 17.5-29.4 1.5-17-1.6-24.5-10.3-36.1zm-61.2 25.3c0 0-0.2 4.2-1.1 7.1-0.9 2.8 0 3.8 1.1 8.3 1.1 4.5 1.7 7.8-0.8 9.5-2.5 1.7-2.1 2.7-2.5 1.7-0.4-0.9 0.3-1.4 1.1-3.4 0.8-2 1.5-3.8 0-7-1.5-3.2-4.2-6.1-3.6-10.4 0.3-2.1 0.9-4.9 0.9-4.9l1.5-1.9zm8.9-1.1c0.7 1.3 3.4 5.3 3.8 8.1 0.4 2.8-1.5 4.5-1.9 5.9-0.4 1.3-2.2 4.7 0 7.8 2.2 3 3.2 6.2 3.2 9.8 0 3.6 0.9 5.5 1.9 3.4 0.9-2.1 2.3-1.5 0-7-2.3-5.5-2.3-5.3-2.9-7.7-0.5-2.3 4.1-6.2 4.1-9.3 0.1-3.1-2.6-9.1-3.1-11-0.6-1.9-2.3-4.7-2.3-4.7zm14.8 12.7c0.6 0.6 5.5 9.1 4 16.5-1.5 7.4-4.4 12.9-1.8 16.3 2.6 3.4 6.2 7.4 6.9 7.6 0.8 0.2 1.9-1.1 1.3-2.1-0.6-0.9-2.8-2.6-4-5-1.3-2.6-2.8-5.2-1.1-8.2 1.7-3 3-7 3-9.7 0-2.6-0.1-4.3-0.3-7.7-0.2-3.4-2.7-7.6-2.7-7.6h-5.3zm-47.9-23.3c-1.7 4.8-6 7.7-9.6 6.4-3.6-1.3-5.2-6.2-3.6-11 1.7-4.8 6-7.7 9.6-6.4 3.6 1.3 5.2 6.2 3.6 11z"/>
    <circle r="3.3" cy="161.2" cx="90.5" fill="#fff"/>
  </g> 
    <g id="wing1">
  <path   d="M35.4 10.7C28 16.7 24.1 31.2 24.1 31.7a106.4 106.4 0 0 1 1.1 0.6c1.1 0.6 2.5 2.4 2.5 2.4l1-0.3 0 0c2-0.6 5-1.7 8.2-3.2C41.9 28.8 51.6 21.1 51.6 12.7 51.6 4.8 42.9 4.8 35.4 10.7Zm0.4 18.4c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" fill="#000"/>
      
  <path id="inside-wing1" fill="#EAEAEA" d="m35.9 29.1c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" /> 
   </g> 
    <g id="wing2">
  <path id="wing2" d="m27.3 1.3c-6.5 4.6-8.3 16.8-7.9 22.3 0.3 4.1 1 7.7 1.3 9.5 0.5-0.1 1 0 1.6 0.1 0.1 0.1 0.3 0.1 0.4 0.1 1.4 0.2 1.6 0.8 1.6 0.9l0 0c0 0 0 0 0 0 0.3-0.2 0.5-0.4 0.8-0.7 0 0 9.4-10.8 10.8-20.2C37.3 4 33.5-3.1 27.3 1.3Zm6.6 11.9c-0.8 5.6-4.9 13.3-7.5 17.6l-4.2-0.8A73.9 73.9 0 0 1 21.5 23.2c-0.4-4.9 1.3-16.1 6.8-20 1.1-0.8 2.1-1.1 2.8-0.9 0.7 0.2 1.3 0.7 1.9 1.7 1.1 2.1 1.5 5.5 0.9 9.2z" fill="#EAEAEA"/>
  
   </g> 
        <animateTransform attributeName="transform" type="translate" dur="20s" values="900,0;800,140;800,150;700,100; 610,160;610,150;610,150;610,160;610,150;600,160;610,330;610,300;610,330;685,470;685,470;560,520;570,530;570,530;480,340;480,330;480,340;400,400;400,400;330,220;330,220;280,180;250,80;225,365;
            225,365;225,365;200,180;150,150;150,150;0,0;-100,-100"
            fill="freeze"
            repeatCount="indefinite" />  
           
  </g> 
</svg>

#2。蜜蜂翅膀动画

为了使机翼正确旋转（没有水平位移），需要选择正确的旋转中心

注意蜜蜂及其翅膀的形象。

旋转中心的正确选择将是蜜蜂翅膀周围矩形的左下角

在这种情况下，CSS 规则是：

transform-origin: bottom  left;
transform-box: fill-box;

下面是蜜蜂翅膀的动画：

#wing1 
transform-origin: bottom  left;
transform-box: fill-box;
opacity:0.6;
 animation: rotateBox1 .2s  infinite;


@keyframes rotateBox1 
0% transform:rotate(0deg); 
50% transform:rotate(-60deg); 
0% transform:rotate(0deg); 

#wing2 
transform-origin: bottom  left;
transform-box: fill-box;
opacity:0.75;
 animation: rotateBox2 .2s  infinite;


@keyframes rotateBox2 
0% transform:rotate(0deg); 
50% transform:rotate(30deg); 
0% transform:rotate(0deg); 

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="img-responsive"   viewBox="0 0 1200 700" version="1.1" >
   <rect   fill="#39D594" />
    <g  id="bee" transform="scale(4) translate(100,50)">
  <g transform="matrix(0.26458,0,0,0.26458,-10.137,-3.944)">
    <path d="m108.9 137.3c0-0.3 1.5-2.6 5.2-3.1 15.7-2.2 29.9 28.8 28.9 30.3-1 1.5-8.5 8.6-12.1 9.5-3.6 0.8-7.2 3.2-8.8 3.2-1.7-0.1-7.1 0.5-7.3-0.7-0.1-1.2-2.7-15.4-2.7-20 0-4.6-0.2-13.2-0.9-14.6-0.7-1.4-2.3-4.5-2.3-4.5z" fill="#fff"/>
    <path d="m115.6 138.6c-3.2-3.6-9.8-6.9-18.8-4.6-9 2.3-24.6 13.4-24 31.9 0.5 18.6 10.7 29.8 13.7 32.2 1.8 1.5 3.6-1.1 6.2-4 0 0 0 0 0 0 0.7-0.7 3.9-4.8 5.7-6.7 3.9-4.2 8.9-15.8 8.9-15.8 0 0 0.1 7-5 16.4 7.5-4.8 19.8-15.8 21.2-24.8 2.2-13.6-4.8-21.1-7.9-24.6z"/>
    <path d="m143 137.4c0 0 15.9-0.8 19.4 0 3.4 0.8 17.5 2.8 26.8 17.8 7 11.2 5.3 29.7 3.2 35.2-2 5.4-12.6 20.3-12.6 20.3l-18.8-11.8c-1.2-0.4-9.4-6.4-10.5-8.1-1.1-1.7-2.1-1.3-3.8-4.6-1.8-3.3-2.6-4.5-3.7-6.6-3.6-6.8-6-3.2-7.1-3.2h-4.6c0 0 7.2-22.7 5.9-28.5-1.3-5.8-4.3-12.9-4.3-12.9z" fill="#fc0"/>
    <path d="m85.6 158c0 0-9.3-1-19.1 4.8-13 7.6-19.1 14.4-18.9 17.5 0.2 3.2 3.5 4.1 6.1 0.7 2.6-3.5 1.7-5.8 1.7-5.8 0 0 10.4-11.2 19.3-13.4 8.3-2.1 12.9-1.2 12.9-1.2l3.5-2.4z"/>
    <path d="m91.3 149.8c-4.1 1-7.6 5-8.2 14.7-0.7 11.2-0.4 15.1 5.5 11.7 7.1-4.1 11.1-12.8 10.4-20.2-0.5-5-3.2-7.3-7.6-6.3z" fill="#fff"/>
    <path d="m82.9 142.2c0 0-7.1-6.1-18.5-6.9-15-1.1-23.9 0.9-25.5 3.6-1.6 2.7 0.5 5.4 4.6 4 4.1-1.4 4.7-3.8 4.7-3.8 0 0 14.9-3.3 23.5 0 8 3 11.3 6.3 11.3 6.3h4.3zm28.3-6.9c0 0 13 0.5 17.1 10.2 9.1 21.4-13.8 31.6-13.8 31.6 0 0 18.6 4.9 26.4-2.4 7.8-7.3 14.4-20.9 5.1-34.4-9.3-13.5-24.1-13.5-34.7-4.9zm32.6 2.1c0 0 8.1-1.2 15.5 4.3 7.3 5.5 9.1 22.7 2.8 31.8-6.9 10-16.3 11-16.3 11l-4.2-7.1c0 0 12.7-6 14.5-16.5 1.8-10.5-2.5-20.7-12.4-23.6zm13.2-0.3c0 0 15.2 2.4 17.7 16.9 2.5 14.5-3.3 25-8.6 28.9-10.1 7.5-18.3 5-18.3 5 0 0 7 7.2 9.5 8.7 0.8 0.5 28.5-6.2 28-33.1-0.2-10.5-4-26.7-28.2-26.5zM187 152.2"/>
    <path d="m187 152.2c0 0 9.1 21.1 2.3 33.3-7.1 12.6-15.9 15.5-21.6 15.1-4.6-0.3-4.4-0.5-4.4-0.5 0 0 13.6 14.4 14.4 19.9 0.8 5.5 0 1.7 2.1-2.3 2.1-4 15.9-11.7 17.5-29.4 1.5-17-1.6-24.5-10.3-36.1zm-61.2 25.3c0 0-0.2 4.2-1.1 7.1-0.9 2.8 0 3.8 1.1 8.3 1.1 4.5 1.7 7.8-0.8 9.5-2.5 1.7-2.1 2.7-2.5 1.7-0.4-0.9 0.3-1.4 1.1-3.4 0.8-2 1.5-3.8 0-7-1.5-3.2-4.2-6.1-3.6-10.4 0.3-2.1 0.9-4.9 0.9-4.9l1.5-1.9zm8.9-1.1c0.7 1.3 3.4 5.3 3.8 8.1 0.4 2.8-1.5 4.5-1.9 5.9-0.4 1.3-2.2 4.7 0 7.8 2.2 3 3.2 6.2 3.2 9.8 0 3.6 0.9 5.5 1.9 3.4 0.9-2.1 2.3-1.5 0-7-2.3-5.5-2.3-5.3-2.9-7.7-0.5-2.3 4.1-6.2 4.1-9.3 0.1-3.1-2.6-9.1-3.1-11-0.6-1.9-2.3-4.7-2.3-4.7zm14.8 12.7c0.6 0.6 5.5 9.1 4 16.5-1.5 7.4-4.4 12.9-1.8 16.3 2.6 3.4 6.2 7.4 6.9 7.6 0.8 0.2 1.9-1.1 1.3-2.1-0.6-0.9-2.8-2.6-4-5-1.3-2.6-2.8-5.2-1.1-8.2 1.7-3 3-7 3-9.7 0-2.6-0.1-4.3-0.3-7.7-0.2-3.4-2.7-7.6-2.7-7.6h-5.3zm-47.9-23.3c-1.7 4.8-6 7.7-9.6 6.4-3.6-1.3-5.2-6.2-3.6-11 1.7-4.8 6-7.7 9.6-6.4 3.6 1.3 5.2 6.2 3.6 11z"/>
    <circle r="3.3" cy="161.2" cx="90.5" fill="#fff"/>
  </g> 
    <g id="wing1">
  <path   d="M35.4 10.7C28 16.7 24.1 31.2 24.1 31.7a106.4 106.4 0 0 1 1.1 0.6c1.1 0.6 2.5 2.4 2.5 2.4l1-0.3 0 0c2-0.6 5-1.7 8.2-3.2C41.9 28.8 51.6 21.1 51.6 12.7 51.6 4.8 42.9 4.8 35.4 10.7Zm0.4 18.4c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" fill="#000"/>
      
  <path id="inside-wing1" fill="#EAEAEA" d="m35.9 29.1c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" /> 
   </g> 
    <g id="wing2">
  <path id="wing2" d="m27.3 1.3c-6.5 4.6-8.3 16.8-7.9 22.3 0.3 4.1 1 7.7 1.3 9.5 0.5-0.1 1 0 1.6 0.1 0.1 0.1 0.3 0.1 0.4 0.1 1.4 0.2 1.6 0.8 1.6 0.9l0 0c0 0 0 0 0 0 0.3-0.2 0.5-0.4 0.8-0.7 0 0 9.4-10.8 10.8-20.2C37.3 4 33.5-3.1 27.3 1.3Zm6.6 11.9c-0.8 5.6-4.9 13.3-7.5 17.6l-4.2-0.8A73.9 73.9 0 0 1 21.5 23.2c-0.4-4.9 1.3-16.1 6.8-20 1.1-0.8 2.1-1.1 2.8-0.9 0.7 0.2 1.3 0.7 1.9 1.7 1.1 2.1 1.5 5.5 0.9 9.2z" fill="#000"/>
   </g> 
  </g> 
</svg>

3。结合机翼移动和旋转动画

--

为了逼真，添加一张盛开的草地的图片

 <image xlink:href="https://i.stack.imgur.com/DUxlZ.jpg" x="-100"   />

为了实现蜜蜂停在花上时的暂停，对应的坐标对 &lt;animateTransform values =" ... 610,150; 610,150; 610,150; ... " 重复

下面是完整的应用代码：

点击后动画开始

#wing1 
transform-origin: bottom  left;
transform-box: fill-box;
opacity:0.6;
 animation: rotateBox1 .15s  infinite;


@keyframes rotateBox1 
0% transform:rotate(0deg); 
50% transform:rotate(-60deg); 
0% transform:rotate(0deg); 

#wing2 
transform-origin: bottom  left;
transform-box: fill-box;
opacity:0.75;
 animation: rotateBox2 .15s  infinite;


@keyframes rotateBox2 
0% transform:rotate(0deg); 
50% transform:rotate(30deg); 
0% transform:rotate(0deg); 

<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="img-responsive"   viewBox="0 0 1200 700" version="1.1" >
  <image xlink:href="https://i.stack.imgur.com/DUxlZ.jpg" x="-100"   />
    <g  id="bee" transform="translate(1400,100)">
  <g transform="matrix(0.26458,0,0,0.26458,-10.137,-3.944)">
    <path d="m108.9 137.3c0-0.3 1.5-2.6 5.2-3.1 15.7-2.2 29.9 28.8 28.9 30.3-1 1.5-8.5 8.6-12.1 9.5-3.6 0.8-7.2 3.2-8.8 3.2-1.7-0.1-7.1 0.5-7.3-0.7-0.1-1.2-2.7-15.4-2.7-20 0-4.6-0.2-13.2-0.9-14.6-0.7-1.4-2.3-4.5-2.3-4.5z" fill="#fff"/>
    <path d="m115.6 138.6c-3.2-3.6-9.8-6.9-18.8-4.6-9 2.3-24.6 13.4-24 31.9 0.5 18.6 10.7 29.8 13.7 32.2 1.8 1.5 3.6-1.1 6.2-4 0 0 0 0 0 0 0.7-0.7 3.9-4.8 5.7-6.7 3.9-4.2 8.9-15.8 8.9-15.8 0 0 0.1 7-5 16.4 7.5-4.8 19.8-15.8 21.2-24.8 2.2-13.6-4.8-21.1-7.9-24.6z"/>
    <path d="m143 137.4c0 0 15.9-0.8 19.4 0 3.4 0.8 17.5 2.8 26.8 17.8 7 11.2 5.3 29.7 3.2 35.2-2 5.4-12.6 20.3-12.6 20.3l-18.8-11.8c-1.2-0.4-9.4-6.4-10.5-8.1-1.1-1.7-2.1-1.3-3.8-4.6-1.8-3.3-2.6-4.5-3.7-6.6-3.6-6.8-6-3.2-7.1-3.2h-4.6c0 0 7.2-22.7 5.9-28.5-1.3-5.8-4.3-12.9-4.3-12.9z" fill="#fc0"/>
    <path d="m85.6 158c0 0-9.3-1-19.1 4.8-13 7.6-19.1 14.4-18.9 17.5 0.2 3.2 3.5 4.1 6.1 0.7 2.6-3.5 1.7-5.8 1.7-5.8 0 0 10.4-11.2 19.3-13.4 8.3-2.1 12.9-1.2 12.9-1.2l3.5-2.4z"/>
    <path d="m91.3 149.8c-4.1 1-7.6 5-8.2 14.7-0.7 11.2-0.4 15.1 5.5 11.7 7.1-4.1 11.1-12.8 10.4-20.2-0.5-5-3.2-7.3-7.6-6.3z" fill="#fff"/>
    <path d="m82.9 142.2c0 0-7.1-6.1-18.5-6.9-15-1.1-23.9 0.9-25.5 3.6-1.6 2.7 0.5 5.4 4.6 4 4.1-1.4 4.7-3.8 4.7-3.8 0 0 14.9-3.3 23.5 0 8 3 11.3 6.3 11.3 6.3h4.3zm28.3-6.9c0 0 13 0.5 17.1 10.2 9.1 21.4-13.8 31.6-13.8 31.6 0 0 18.6 4.9 26.4-2.4 7.8-7.3 14.4-20.9 5.1-34.4-9.3-13.5-24.1-13.5-34.7-4.9zm32.6 2.1c0 0 8.1-1.2 15.5 4.3 7.3 5.5 9.1 22.7 2.8 31.8-6.9 10-16.3 11-16.3 11l-4.2-7.1c0 0 12.7-6 14.5-16.5 1.8-10.5-2.5-20.7-12.4-23.6zm13.2-0.3c0 0 15.2 2.4 17.7 16.9 2.5 14.5-3.3 25-8.6 28.9-10.1 7.5-18.3 5-18.3 5 0 0 7 7.2 9.5 8.7 0.8 0.5 28.5-6.2 28-33.1-0.2-10.5-4-26.7-28.2-26.5zM187 152.2"/>
    <path d="m187 152.2c0 0 9.1 21.1 2.3 33.3-7.1 12.6-15.9 15.5-21.6 15.1-4.6-0.3-4.4-0.5-4.4-0.5 0 0 13.6 14.4 14.4 19.9 0.8 5.5 0 1.7 2.1-2.3 2.1-4 15.9-11.7 17.5-29.4 1.5-17-1.6-24.5-10.3-36.1zm-61.2 25.3c0 0-0.2 4.2-1.1 7.1-0.9 2.8 0 3.8 1.1 8.3 1.1 4.5 1.7 7.8-0.8 9.5-2.5 1.7-2.1 2.7-2.5 1.7-0.4-0.9 0.3-1.4 1.1-3.4 0.8-2 1.5-3.8 0-7-1.5-3.2-4.2-6.1-3.6-10.4 0.3-2.1 0.9-4.9 0.9-4.9l1.5-1.9zm8.9-1.1c0.7 1.3 3.4 5.3 3.8 8.1 0.4 2.8-1.5 4.5-1.9 5.9-0.4 1.3-2.2 4.7 0 7.8 2.2 3 3.2 6.2 3.2 9.8 0 3.6 0.9 5.5 1.9 3.4 0.9-2.1 2.3-1.5 0-7-2.3-5.5-2.3-5.3-2.9-7.7-0.5-2.3 4.1-6.2 4.1-9.3 0.1-3.1-2.6-9.1-3.1-11-0.6-1.9-2.3-4.7-2.3-4.7zm14.8 12.7c0.6 0.6 5.5 9.1 4 16.5-1.5 7.4-4.4 12.9-1.8 16.3 2.6 3.4 6.2 7.4 6.9 7.6 0.8 0.2 1.9-1.1 1.3-2.1-0.6-0.9-2.8-2.6-4-5-1.3-2.6-2.8-5.2-1.1-8.2 1.7-3 3-7 3-9.7 0-2.6-0.1-4.3-0.3-7.7-0.2-3.4-2.7-7.6-2.7-7.6h-5.3zm-47.9-23.3c-1.7 4.8-6 7.7-9.6 6.4-3.6-1.3-5.2-6.2-3.6-11 1.7-4.8 6-7.7 9.6-6.4 3.6 1.3 5.2 6.2 3.6 11z"/>
    <circle r="3.3" cy="161.2" cx="90.5" fill="#fff"/>
  </g> 
    <g id="wing1">
  <path   d="M35.4 10.7C28 16.7 24.1 31.2 24.1 31.7a106.4 106.4 0 0 1 1.1 0.6c1.1 0.6 2.5 2.4 2.5 2.4l1-0.3 0 0c2-0.6 5-1.7 8.2-3.2C41.9 28.8 51.6 21.1 51.6 12.7 51.6 4.8 42.9 4.8 35.4 10.7Zm0.4 18.4c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" fill="#000"/>
      
  <path id="inside-wing1" fill="#EAEAEA" d="m35.9 29.1c-2.9 1.3-5.8 2.4-7.6 3-0.1 0-0.6 0.3-1 0.5-1-1.2-2.1-1.7-2.4-1.8 1.6-3.6 6.7-14 12.1-18.3 2.9-2.3 6.2-3.7 8.7-3.7 1.2 0 2.1 0.3 2.7 0.9 0.7 0.6 1 1.7 1 3.1 0 7.1-8.9 14.3-13.4 16.4z" /> 
   </g> 
    <g id="wing2">
  <path id="wing2" d="m27.3 1.3c-6.5 4.6-8.3 16.8-7.9 22.3 0.3 4.1 1 7.7 1.3 9.5 0.5-0.1 1 0 1.6 0.1 0.1 0.1 0.3 0.1 0.4 0.1 1.4 0.2 1.6 0.8 1.6 0.9l0 0c0 0 0 0 0 0 0.3-0.2 0.5-0.4 0.8-0.7 0 0 9.4-10.8 10.8-20.2C37.3 4 33.5-3.1 27.3 1.3Zm6.6 11.9c-0.8 5.6-4.9 13.3-7.5 17.6l-4.2-0.8A73.9 73.9 0 0 1 21.5 23.2c-0.4-4.9 1.3-16.1 6.8-20 1.1-0.8 2.1-1.1 2.8-0.9 0.7 0.2 1.3 0.7 1.9 1.7 1.1 2.1 1.5 5.5 0.9 9.2z" fill="#000"/>
    </g> 
            <!-- Bee moving animation -->
        <animateTransform attributeName="transform" type="translate" begin="svg1.click" dur="30s" values="900,0;800,140;800,150;700,100; 610,160;610,150;610,150;610,160;610,150;600,160;610,330;610,300;610,330;685,470;685,470;560,520;570,530;570,530;480,340;480,330;480,340;400,400;400,400;330,220;330,220;280,180;250,80;225,365;
            225,365;225,365;200,180;150,150;150,150;0,0;-100,-100"
            fill="freeze"
            repeatCount="indefinite" />  
  </g>   
     <text x="200" y="30" font-size="24px" fill="white">Click me </text>
</svg>

【讨论】：

【参考方案2】：

将其更改为以下内容，它应该可以工作......

主要是使用 Snap("bee") 而不是 $("bee") 并在动画参数中包含“缓动”功能。

动画文档可以在here找到

var s = Snap("#snappy");
var bee = Snap("#bee");

var vBW = 1200; // viewBoxWidth
var vBH = 700; // viewBoxHeight

function animate1()
  bee.animate(x: vBW, 4000, mina.linear, animate2);  


function animate2()
  bee.animate(x: 10, 2000, mina.linear, animate1);  


animate1();

【讨论】：

以上是关于带有 SVG.js 的蜜蜂 SVG 动画的主要内容，如果未能解决你的问题，请参考以下文章

svg.js元素的动画旋转给出了意想不到的结果（可见“摇摆”）

带有变换的css关键帧动画不适用于SVG

带有 d: 路径的 Svg 动画

markdown 带有anime.js的SVG球体动画

markdown 带有anime.js的SVG球体动画

如何在相应的滚动上获得虚线（带有向下箭头图标）SVG动画？