felixo
Reputation: 1613
Bee SVG animation with SVG.js
As you can see in this codepen, there is a simple Bee SVG in a SVG canvas. Ideally I would like to achieve an animation where the Bee is buzzing around that canvas but for now I am simple trying to move it left to right. The library I am using is snap.svg
My basis is this codepen, but somehow I am not getting it to work.
The 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" width="194.874" height="214.536" 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>The 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;
}The 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();I am very much a beginner with SVGs and animating them, any help is much appreciated.
Upvotes: 2
Views: 814
Answers (2)
Alexandr_TT
Reputation: 14545
Ideally I would like to achieve an animation where the Bee is buzzing around that canvas but for now I am simple trying to move it left to right.
Live Demo
The first half of the task can be solved not only with the help of JS libraries, but also using smil SVG.
#1. Animation of horizontal and vertical movement of the bee
By adding and changing coordinates in the translate (X, Y) command, you can get a combination of horizontal and vertical movement of an object.
If you add several pairs of coordinates in the values attribute of the animation command animateTransform, you can get an animation of movement of any shape
<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" />
Please see full screen
<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" width="1200" height="700" 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 width="100%" height="100%" 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. Bee wings animation
In order for the wing to rotate correctly (without horizontal displacements), it is necessary to choose the right center of rotation
Pay attention to the image of the bee and its wings.
The correct choice of the center of rotation will be the bottom, left corner of the rectangle surrounding the wing of the bee
In this case, the CSS rules would be:
transform-origin: bottom left;
transform-box: fill-box;
Below is the animation of the bee's wings:
#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" width="1200" height="700" viewBox="0 0 1200 700" version="1.1" >
<rect width="100%" height="100%" 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. Combining Wing Move and Rotate Animations
--
For realism, add a picture of a blooming meadow
<image xlink:href="https://i.sstatic.net/DUxlZ.jpg" x="-100" width="1200" height="700" />
To implement pauses when a bee sits on a flower, the corresponding pairs of coordinates in
<animateTransform values =" ... 610,150; 610,150; 610,150; ... " are duplicated
Below is the complete application code:
Animation starts after click
#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" width="1200" height="700" viewBox="0 0 1200 700" version="1.1" >
<image xlink:href="https://i.sstatic.net/DUxlZ.jpg" x="-100" width="1200" height="700" />
<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>Upvotes: 5
Ian
Reputation: 13842
Change it to the following and it all should work...
The main thing is using Snap("bee") rather than $("bee") and including an "easing" function in the animate parameters.
Docs for animate can be found 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();
Upvotes: 2