Анимировать SVG-электрон вокруг кольца

У меня есть следующий .svg график:

Я пытаюсь оживить электрон так, чтобы он двигался (пропорционально странице, когда он прокручивался) вдоль кривизны кольца до некоторой точки (вероятно, та же самая точка, на которой находился бы электрон, если бы она была перевернута мнимая ось х этого изображения):

Я новичок в веб-разработке, поэтому я не уверен, как бы это сделать. Я предполагаю, что мне придется использовать CSS3 для реальной анимации, а jQuery - для захвата события прокрутки; но я действительно не знаю, где я начну.

Оптимизированный код .svg для справки:

<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>

Я обозначил электрон в коде с помощью class="electron". Любые предложения?

Ответ 1

Ваш SVG-код может быть оптимизирован немного больше, поскольку он целиком состоит из примитивов круга:

<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>

Вращение электрона легко может быть достигнуто за счет включения в событие window.onscroll:

$(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+")");
});

Этот пример также вращает ядро атома; вы можете удалить это, если это не требуется.

Вы можете видеть, как он работает здесь.

Как это работает:

Элемент <svg> имеет размер 80 × 80 пикселей, а элемент верхнего уровня <g> сдвигает начало координат чертежа на 40 пикселей по горизонтали и вертикали до середины изображения. Поэтому, когда мы меняем вращение двух элементов <g> внутри него, мы можем быть уверены, что они будут вращаться вокруг центра изображения.

Электрон - это просто равное круговое смещение вертикально на 37 пикселей в направлении + y (которое находится в нижней части экрана), а элемент g#a2 дает ему начальное (по часовой стрелке) вращение на 160 ° поэтому он появляется только слева от вершины орбиты.

В событии обработчика прокрутки окна s устанавливается текущая позиция прокрутки в виде значения от 0 (вверху) до 1 (внизу), и это значение используется для изменения угла поворота электрона над от + 160 ° до -160 ° (или от + 160 ° до + 20 ° в модифицированной версии, обсуждаемой в комментариях.

Ответ 2

Помогают ли вам эти ссылки?

ниже код предназначен для обнаружения прокрутки:

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
    }

}

и для анимации svg у вас есть 2 варианта! CSS3 и встроенная анимация SVG!
в CSS3 вы должны использовать свойства transform, такие как translateX, translateY и...
в [ Sample 1 ] я покажу вам, как оживить CSS3, и для повышения производительности я использовал VELOCITY.JS вместо JQuery. (простите меня из-за низкой точности вращения!, я просто хотел показать вам, что это возможно)
в [ Sample 2 ] я покажу вам, как анимировать с чистыми свойствами svg, которые называются встроенной анимацией SVG.