Я только что обнаружил, что SVGAnimationElement.beginElement()
классифицируется как "экспериментальный API, который не должен использоваться в рабочем коде" . В настоящее время я использую 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()
нестандартен, я бы предпочел не полагаться на него.
Может ли кто-нибудь предложить альтернативную для стандартов альтернативу, которая дает такие же результаты?
UPDATE:
Я экспериментировал с удалением элемента animateTransform
и созданием / добавлением нового для каждого тика секундной стрелки - это ничего не дало, пока я не позвонил beginElement()
на только что созданном элементе animateTransform
.