围绕环动画 SVG 电子

Posted 2023-03-06

【中文标题】围绕环动画 SVG 电子

【英文标题】：Animate SVG electron around ring

【发布时间】：2014-09-12 15:09:03

【问题描述】：

我有以下.svg 图形：

我正在尝试对电子进行动画处理，使其沿着环的曲率移动（与页面成比例地滚动）直到某个点（如果它被翻转，可能与电子所在的点相同）此图像的假想 x 轴）：

我对网络开发还很陌生，所以我不确定我将如何完成这项工作。我想我必须使用 CSS3 来制作实际的动画，并使用 jQuery 来捕捉滚动事件；但我真的不知道从哪里开始。

优化后的.svg代码供参考：

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"   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" 标记了电子。有什么建议吗？

【问题讨论】：

好吧，我可以帮你，但我不知道移动滚动。如果我错了纠正我！您想通过每个鼠标滚轮向上或向下更改两点之间的电子位置（翻转该图像的假想 x 轴）？

@MeTe-30 不完全是 180˚，您正在翻转大约等于 y = x 的线。在穿过图像中间的 x 轴上翻转电子。

那是我的错误，我更正了。

只有我还是那个圈子不是一个圈子？这是一个鸡蛋！

【参考方案1】：

此链接对您有帮助吗？

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

【讨论】：

但它不响应窗口滚动，只是鼠标滚轮运动。使用键盘或滚动条滚动将不起作用。

【参考方案2】：

您的 SVG 代码可以进一步优化，因为它完全由圆形图元组成：

<svg   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- />
    <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°（或在 cmets 中讨论的修改版本中为 +160° 到 +20°。

【讨论】：

几乎完美！我无法弄清楚如何解决的一件事是如何每次都在该确切点停止电子，即使文档中有更多文本。我添加了另一张图片来显示我希望动画在哪里停止，一旦弄清楚我会接受这个答案

哦，对不起。我看到x axis 并将其读作y axis。只需在滚动处理程序中将r2=160-320*s; 更改为r2=160-140*s;。 （这样角度在 160° 和 20° 之间变化）。 Updated JSFiddle here.

您能否更深入地了解答案中涉及的数学问题？我仍在试图弄清楚这一切是如何运作的。

@syb0rg 我在回答中添加了一些解释。希望对您有所帮助。