Question

我正在尝试制作一个简单的圆形动画，该动画与一条也在动画的线条一起移动。

我目前移动圆圈的方法是使用并且只是将坐标与坐标与线的起点和终点坐标相匹配，这是一个手动且耗时的过程。

我还读到SMIL动画在将来很少或根本没有支持的情况下被弃用。 https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL

有人能建议一种更有效的方法吗？

.line {
  stroke: #bfbfbf;
  stroke-width: 1;
  fill: none;
  animation: drawline 2s linear forwards;
  -moz-animation: drawline 2s linear forwards;
  -webkit-animation: drawline 2s linear forwards;
}

@keyframes drawline {
  from {
    stroke-dasharray: 0 400;
    stroke-dashoffset: 0;
  }
  to {
    stroke-dasharray: 400 400;
    stroke-dashoffset: 0;
  }
}

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 521.156 545.59">

  <line class="line" id="audit-line" fill="#000" stroke="#bfbfbf" x1="154" y1="238" x2="214" y2="30"></line>
  
  <circle id="audit-circle" r="18" cx="158" cy="238" stroke="#7ac142" fill="#7ac142" />
  <text id="audit-text" font-family="Arial" font-size="13">A</text>
  <text id="audit" class="fade-in delay-2" x="245" y="35" font-size="13" font-family="Arial">Text</text>
  <animate
    xlink:href="#audit-circle"
    attributeName="cx"
    to="214"
    dur="1s"
    fill="freeze" />
  <animate
    xlink:href="#audit-circle"
    attributename="cy"
    to="30"
    dur="1s"
    fill="freeze"
  />
  <animate
    xlink:href="#audit-text"
    attributeName="x"
    from="155"
    to="210"
    dur="1s"
    fill="freeze" />
  <animate
    xlink:href="#audit-text"
    attributename="y"
    from="240"
    to="35"
    dur="1s"
    fill="freeze"
  />

</svg>

Answer 1

你可以更有效地做到这一点。例如，您不需要独立地为圆圈及其文本设置动画。另外，IMO通过混合CSS和SMIL动画让你自己变得复杂。

＆＃13;

.line {
  stroke: #bfbfbf;
  stroke-width: 1;
  fill: none;
}

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 521.156 545.59">

  <line class="line" id="audit-line" fill="#000" stroke="#bfbfbf" x1="154" y1="238" x2="154" y2="238"></line>

  <g id="audit-circle">
    <circle r="18" cx="158" cy="238" stroke="#7ac142" fill="#7ac142" />
    <text x="154" y="242" font-family="Arial" font-size="13">A</text>
  </g>

  <text id="audit" class="fade-in delay-2" x="245" y="35" font-size="13" font-family="Arial">Text</text>

  <animateTransform
    xlink:href="#audit-circle"
    attributeName="transform"
    type="translate" from="0,0" to="56,-208" dur="1s"
                    additive="replace" fill="freeze"/>
  <animate
    xlink:href="#audit-line"
    attributeName="x2"
    from="154"
    to="214"
    dur="1s"
    fill="freeze" />
  <animate
    xlink:href="#audit-line"
    attributename="y2"
    from="238"
    to="30"
    dur="1s"
    fill="freeze"
  />

</svg>

＆＃13;

SVG - 沿着动画直线

1 个答案: