围绕环的SVG电子动画

Question

我有以下.svg图片：

我试图使电子动画，使其沿着环的曲率向上移动（与页面滚动时成比例），直到某个点（如果翻转过，电子可能在同一点）该图像的假想x轴）：

我对网络开发相当陌生，所以我不确定如何实现这一目标。我想我必须使用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"标记了代码中的电子。有什么建议吗？

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

这个例子也旋转了原子核;如果不需要，你可以删除它。

You can see it working here.

---

工作原理：

<svg>元素的大小为80×80像素，顶级<g>元素将绘图坐标的原点水平和垂直移动40像素到图像的中间。因此，当我们更改其中的两个<g>元素的旋转时，我们可以确定它们将围绕图像的中心旋转。

电子只是一个在+ y方向垂直偏移37个像素的普通圆（恰好是朝向屏幕的底部），而g#a2元素给出了它初始（顺时针）旋转160°，因此它出现在轨道顶部的左侧。

在窗口的滚动处理程序事件中，s被设置为当前滚动位置，作为从0（顶部）到1（底部）的值，该值用于更改电子的旋转角度在+ 160°至-160°的范围内（或在评论中讨论的修改版本中，+ 160°至+ 20°。

Answer 2

这个链接对您有帮助吗？

1. [ Sample 1 ]
2. [ Sample 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内联动画。