Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Animate SVG electron around ring

I have the following .svg graphic:

enter image description here

I am trying to animate the electron so that it moves (proportionally with the page when it is scrolled) along the curvature of the ring up until a certain point (probably the same point the electron would be at if it was flipped over the imaginary x-axis of this image):

enter image description here

I am fairly new to web-development, so I am unsure how I would accomplish this. I imagine that I would have to use CSS3 for the actual animation, and jQuery to capture the scroll event; yet I really don't have a clue as to where I would start.

The optimized .svg code for reference:

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="436.25" height="456.5" version="1.1">
    <style>
        .s0 {
            fill:#1c1f26;
        }
    </style>
    <g transform="translate(-225.94052,-31.584209)">
        <path d="m259.84 71.78c-120.47 0-218.12 102.2-218.12 228.25 0 126.05 97.65 228.25 218.13 228.25 120.47 0 218.13-102.2 218.13-228.25 0-126.05-97.65-228.25-218.12-228.25zm0 4.78c117.95 0 213.56 100.05 213.56 223.47C473.41 423.45 377.8 523.5 259.84 523.5 141.89 523.5 46.25 423.45 46.25 300.03 46.25 176.61 141.89 76.56 259.84 76.56z" transform="translate(184.22177,-40.197041)" fill="#1c1f26" />
    </g>
    <g transform="translate(-81.915798,-31.584205)">
        <g transform="matrix(-0.25881905,-0.96592583,0.96592583,-0.25881905,129.87282,611.33082)" fill="#1c1f26">
            <path transform="matrix(1.0061861,-0.5809218,0.5809218,1.0061861,-135.78147,130.45415)" d="m279.91 300.03c0 11.09-8.99 20.07-20.07 20.07-11.09 0-20.07-8.99-20.07-20.07 0-11.09 8.99-20.07 20.07-20.07 11.09 0 20.07 8.99 20.07 20.07zM279.91 300.03 279.91 300.03" fill="#1c1f26" />
            <path d="m279.91 300.03c0 11.09-8.99 20.07-20.07 20.07-11.09 0-20.07-8.99-20.07-20.07 0-11.09 8.99-20.07 20.07-20.07 11.09 0 20.07 8.99 20.07 20.07z" transform="matrix(1.0061861,-0.5809218,0.5809218,1.0061861,-110.83616,87.416816)" fill="#1c1f26" />
            <path transform="matrix(1.0061861,-0.5809218,0.5809218,1.0061861,-160.5781,87.330591)" d="m279.91 300.03c0 11.09-8.99 20.07-20.07 20.07-11.09 0-20.07-8.99-20.07-20.07 0-11.09 8.99-20.07 20.07-20.07 11.09 0 20.07 8.99 20.07 20.07z" fill="#1c1f26" />
        </g>
        <path class="electron" d="m107.76 150.64c0 6.53-5.3 11.83-11.83 11.83-6.53 0-11.83-5.3-11.83-11.83 0-6.53 5.3-11.83 11.83-11.83 6.53 0 11.83 5.3 11.83 11.83z" transform="translate(120.35903,-99.340798)" fill="#1c1f26" />
    </g>
</svg>

I labeled the electron in the code with the class="electron". Any suggestions?

like image 994
syb0rg Avatar asked Jul 21 '14 23:07

syb0rg


People also ask

Can you animate SVG files?

The export SVG workflow in AnimateAnimate allows you to export to SVG format, version 1.1. You can create visually rich artwork using powerful design tools available within Animate, and then, export to SVG. In Animate, you can export selected frames and keyframes of an animation.


2 Answers

Your SVG code can be optimised a bit more, since it consists entirely of circle primitives:

<svg width="80" height="80" style="position:fixed; top:5px; left:5px;">
  <g transform="translate(40,40)">
    <g id="a1" transform="rotate(40)">
      <circle cx="0" cy="5" r="4" fill="#1c1f26" />
      <circle cx="4.33" cy="-2.5" r="4" fill="#1c1f26" />
      <circle cx="-4.33" cy="-2.5" r="4" fill="#1c1f26" />
    </g>
    <circle cx="0" cy="0" r="37" fill="none" stroke="#1c1f26" stroke-width="1" />
    <g id="a2" transform="rotate(160)">
      <circle cx="0" cy="37" r="3" fill="#1c1f26" />
    </g>
  </g>
</svg>

The rotation of the electron can easily be achieved by hooking into the window.onscroll event:

$(window).scroll(function(){
  var s = ($(window).scrollTop() / ($(document).height() - $(window).height()));
  var r1 = 40+106*s, r2=160-320*s;
  $("#a1").attr("transform","rotate("+r1+")");
  $("#a2").attr("transform","rotate("+r2+")");
});

This example rotates the nucleus of the atom too; you can delete this if not required.

You can see it working here.


How it works:

The <svg> element is sized at 80×80 pixels, and the top-level <g> element shifts the origin of the drawing coordinates by 40 pixels horizontally and vertically to the middle of the image. So when we change the rotation of the two <g> elements inside it, we can be sure that they will rotate around the centre of the image.

The electron is just a plain circle offset vertically by 37 pixels in the +y direction (which happens to be towards the bottom of the screen), and the g#a2 element gives it an initial (clockwise) rotation of 160° so it appears just left of the top of the orbital.

In the window's scroll handler event, s is set to the current scroll position as a value ranging from 0 (top) to 1 (bottom), and this value is used to change the rotation angle of the electron over the range from +160° to –160° (or +160° to +20° in the modified version discussed in the comments.

like image 154
r3mainer Avatar answered Sep 17 '22 19:09

r3mainer


Does this links help you?

  1. [ Sample 1 ]
  2. [ Sample 2 ]

below code is for scroll detecting:

if (document.addEventListener) {
    document.addEventListener("mousewheel", onDocumentMouseWheel, false);
    document.addEventListener("DOMMouseScroll", onDocumentMouseWheel, false);
}
else {
    document.attachEvent("onmousewheel", onDocumentMouseWheel);
}

function onDocumentMouseWheel(e) {

    if ((e.type == 'mousewheel' && e.wheelDelta > 0) || (e.type == 'DOMMouseScroll' && e.detail < 0)) {
        //UP      
    }
    else {
        //DOWN
    }

}

and for animating svg, you have 2 option! CSS3, and SVG inline animation!
in CSS3 you have to use transform properties, like translateX, translateY and ...
in [ Sample 1 ] i show you, how to animate with CSS3, and for better performance, i used VELOCITY.JS instead of JQuery. (forgive me because of low accuracy on rotating!, i just wanted to show you that it's possible)
in [ Sample 2 ] i show you, how to animate with pure svg properties, that called SVG inline animation.

like image 43
MeTe-30 Avatar answered Sep 21 '22 19:09

MeTe-30