Question

我在HTML文档中有一个嵌入式SVG。使用<animate>动画（SVG）圆圈。我试图找到一种方法，只有在水平移动时才能在该圆圈上放置某种事件监听器。

在移动（水平）时，我想找到圆形的x坐标，并将第三个（外部）矩形宽度设置为圆的相对位置。第三个矩形就像一个跟踪圆圈水平进度的进度条。

SVG圈（顺便说一下，圆圈是否在SVG g组内）是否通过触发某种事件移动我可以设置一个监听器，这样我就可以改变那种进度条的宽度属性？

我原以为如果<animate>或移动/更改的元素触发了某种事件，我可以尝试捕捉它，然后更改条形图上的宽度。

我发现在矩形上使用“独立”动画并不是很好，因为当圆圈向上移动时，增长速度会有很大差异。我没有使用canvas元素，因为我试图保持可伸缩性和形状语义。（我宁愿选择javascript解决方案，但我会对其他方法表示感谢。）

回答后编辑：对于piint非常感激，并且（我认为）很有帮助。我对SVG很新，我可能误解了一些东西。我之所以包括代码，是因为。

我试图实施您的建议，但我似乎没有成功。应用于圆圈的.cx.animVal.value似乎没有得到我所需要的东西。我将包括我的代码的切碎版本，它应该沿着一条自己水平移动的路径移动一个球;两个rects（inBar和outBar）应该以与球相同的速率或多或少地跟踪水平位移。为了确保setInterval正常工作并正确收集位置，添加了一行以列出oBall..animVal和oball..baseVal。在FF 21.0中，animVal沿位移没有变化。我是否正确理解了您的建议？这里遵循代码（包括标题等，因为我特别是SVG中的菜鸟）：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
    <head><title>Motion</title>
    <script>function beginAnim(anim,sPos){anim.beginElement();}</script>
    </head>
    <body>
    <div id="here">
    <button onclick="beginAnim(document.getElementById('anim'),'out');">START</button>
    </div>
    <div style="height:350px;">
    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <script type="text/ecmascript">
    <![CDATA[
      function trckngBars(){
        oDiv=document.getElementById('here');
        var oBall=document.getElementById('ball');
        var oBar=[document.getElementById('inBar'),document.getElementById('outBar')];
        idTimer=self.setInterval(function(){updtBars(oBall,oBar);},100);
      }
      function updtBars(oBall,oBar){
        var xCoor=String(oBall.cx.animVal.value);
        oDiv.innerHTML+='==>'+oBall.cx.animVal.value+'..'+oBall.cx.baseVal.value;
        oBar[0].setAttribute("width",xCoor);
        oBar[1].setAttribute("width",xCoor);
      }
    // ]]>
    </script>
    <defs>
    <path id="throw" d="M0,0 q 80,-55 200,20" style="fill: none; stroke: blue;" />
    </defs>
    <g>
      <g>
        <rect x="2" y="50" width="400" height="110" style="fill: yellow; stroke: black;"></rect>
      </g>
      <g>
        <!-- show the path along which the circle will move -->
        <use id="throw_path" visibility="hidden" xlink:href="#throw" x="50" y="130" />
        <circle id="ball" cx="50" cy="130" r="10" style="fill: red; stroke: black;">
          <animateMotion id="ball_anim" begin="anim.begin+1s" dur="6s" fill="freeze" onbegin="trckngBars();" onend="window.clearInterval(idTimer);">
            <mpath xlink:href="#throw" />
          </animateMotion>
        </circle>
        <rect id="inBar" x="50" y="205" width="20" height="30" style="fill: purple;stroke-linecap: butt;">
    <!-- <animate attributeType="XML" attributeName="width" from="0" to="200" begin="ball_anim.begin" dur="6s" fill="freeze" /> -->
</rect>
      </g>
      <animateTransform id="anim" attributeType="XML" attributeName="transform" type="translate" from="0" to="200" begin="indefinite" dur="10s" fill="freeze" />
    </g>
    <rect id="outBar" x="50" y="235" width="10" height="30" style="fill: orange;stroke-linecap: butt;">
    <!-- <animate attributeType="XML" attributeName="width" from="0" to="400" begin="anim.begin+1s" dur="10s" fill="freeze" /> -->
</rect>
    </svg> 
    </div>
    </body>
    </html>

如果代码运行，似乎移动#ball的animVal保持在相同的x-coordinat（50），而显然它正在移动。

Answer 1

动画begin, end or repeat时会触发事件，但动画值发生变化时会触发（按照您的意愿）。

虽然动画是确定性的，但你可以在圆圈动画开始后的那几秒钟开始制作矩形动画。

var cx = myCircle.cx.animVal.value;

如果您需要动态值，

会为您提供动画值，前提是您正在设置动画属性。

你正在使用animateMotion，而不是自己动画cx和cy属性。我认为获得转换圈位置的唯一方法是调用getBBox。

Answer 2

@Robert非常感谢你的帮助。你的答案是一个很好的投入SVG和SMIL（让我加冷）。我无法使用getBBox，但检查路径上的规范（[link] http://www.w3.org/TR/SVG11/paths.html）和animateMotion（同一站点），因为SMIL动画确定性，所以可以实现这一点。正如你的答案所示。

动画具有非常少的事件触发器，并且设计似乎与动画目标的基本状态一样关注当前位置（这些被称为“基本值”和“呈现值”）。（以下所有内容均适用于FF 21运行的javascript。）我们可以在animateMotion对象上轮询应用getCurrentTime的动画的当前时间。我假设动画以恒定速度进行，因此，我们确定对象沿路径移动了多少并获得遍历的长度（因为我们可以使用方法getTotalLength获得整个路径的总长度）。 / p>

然后知道长度，我们可以确定路径上的当前位置（使用方法getPointAtLength）。请注意，返回的值，时间和位置都相对于容器对象，因此它们是可伸缩的和/或需要转换。）

对于（简单）工作示例，Question示例代码中的javascript代码可以替换为以下内容。它似乎适用于我所做的极少数测试：

  function trckngBars(){
    /* Upon beginning an animation (onbegin event), the required objects are gathered
    and an interval is set */
    var oBall=[document.getElementById('throw'),document.getElementById('ball_anim')];
    var oBar=document.getElementById('inBar');
    /* idTimer is set as a global variable so that it can be accessed from anywhere
    to clear the interval*/
    idTimer=self.setInterval(function(){updtBars(oBall,oBar);},50);
  }
  function updtBars(oBall,oBar){
    /* This function, whose purpose is only to illustrate path method getPointLength 
    and animateMotion method getCurentTime, is quick and dirty. Note that oBall[0] is
    the path and oBall[1] is the animate(Motion) */
    //Calculates the amount of time passed as a ratio to the total time of the animation
    var t_ratio=((oBall[1].getCurrentTime()-oBall[1].getStartTime())/oBall[1].getSimpleDuration());
    // As mentioned, it assumes that animateMotion performs uniform motion along path
    var l=oBall[0].getTotalLenth()*t_ratio;
    // Gets (relative referred as user in documentation) horizontal coordinate
    var xCoor=oBall[0].getPointAtLength(l).x;
    oBar.setAttribute("width",xCoor);
  }
  function endTAnim(){
    /* This function can be triggered _onend_ of an animation to clear the interval
    and leave bars with the exact last dimensions */
    window.clearInterval(idTimer);
    var oBar=[document.getElementById('inBar'),document.getElementById('outBar')];
    oBar[0].setAttribute("width",200); //hardcoded for convenience
  }

因此，我能够找到的最简单的方法需要动画对象（获取时间）和路径对象（“预测”位置），并且它不涉及动画移动的实际元素。（从最初的问题开始，有些简化，以避免在使用合成动画时讨论不同的坐标系统 - 这可能会以独立的方式更好地讨论。）

虽然我没有注意到任何滞后（因为实际的SVG并不复杂得多），但我会对计算更便宜的方法感兴趣，因为我正在考虑使用这种方法来查找和绘制两个SMIL动画对象之间的距离段

当然所有这一切都依赖于在路径上均匀运动的假设，如果不是这样，并且在较大的图像中，人们可能注意到并抵消了我也会感激任何指针（没有更好的动画）直接在javascript /编程语言中，所以你有完全控制权）。感谢您所做的所有编辑，避免陷入泥潭 - 三天前我对SVG唯一了解的是它是XML。

Answer 3

前段时间我遇到了你所描述的同样问题。我希望能够根据用户触发的事件中途停止动画并将元素保持在其到达位置。无法用SMIL这样做我决定为svg.js打造我自己的动画系统，这是我一直在研究的小型JavaScript库：

http://documentup.com/wout/svg.js#animating-elements

它可能对您要实现的目标有用。

捕获SVG元素圈的更改并通过js在其他位置更改属性

3 个答案: