Question

我刚刚发现SVGAnimationElement.beginElement()被归类为"an experimental API that should not be used in production code"。我目前依赖于使用beginElement()为模拟式时钟的秒针创建机械动画效果（可在此处看到：https://codepen.io/kshetline/pen/OZpvKj/）。

以下是代码中最相关的部分：

<line id="sec-hand" x1="50" y1="50" x2="50" y2="12">
  <animateTransform id="sweep"
                    attributeName="transform" attributeType="XML" type="rotate"
                    from="270 50 50" to="276 50 50" dur="0.2s"
                    values="270 50 50; 278 50 50; 276 50 50"
                    calcMode="spline"
                    keyTimes="0; 0.75; 1" keySplines="0.5 0 1 0.5; 0 0.5 0.5 1"
                    repeatCount="1">
</line>

...

function sweepSecondHand(start, end) {
  if (end < start) {
    end += 360;
  }

  sweep.setAttribute('from', start + ' 50 50');
  sweep.setAttribute('to', end + ' 50 50');
  sweep.setAttribute('values', start + ' 50 50; ' + (end + 2) + ' 50 50; ' + end + ' 50 50')
  sweep.beginElement();
}

在SVG中，我已经填写了描述将秒针从分钟顶部移动到秒之后所需的属性。但我需要定期用显示当前时间所需的特定值替换这些属性的值。

仅仅更换数值不足以根据需要移动秒针。我似乎需要beginElement()使用新值重新启动动画。我对结果感到满意，但现在我知道beginElement()是非标准的，我宁愿不依赖它。

任何人都可以建议一个标准友好的替代方案，产生相同的结果吗？

更新：

我尝试删除animateTransform元素并为秒针的每个刻度构建/附加新元素 - 直到我在新创建的beginElement()上调用animateTransform时才取得任何结果元件。

使用SVGAnimationElement.beginElement（）的任何好的替代方法？

0 个答案: