Показать конкретные рамки анимации SVG ⇐ Javascript

[Anonymous]

У меня есть SVG с элементами. Я могу изменить их атрибуты, если это необходимо.
Я хочу позволить браузеру воспроизводить элементы , а также иметь возможность стремиться к определенным кадрам (например, с использованием ). Произошло? /> Случайные вызовы от input event to setcurrenttime () используются для поиска конкретных кадров. Тем не менее, неоднократно вызов setcurrenttime () в каждом кадре для эмуляции обычного воспроизведения может быть задержкой для многих больших SVG. Вместо этого я надеюсь получить обычное воспроизведение на работу: позволить браузеру воспроизводить неопубликованные анимации (которые можно оптимизировать браузер).

Код: Выделить всё

svg.pauseAnimations();
duration = animate2.getSimpleDuration();

begun = false;
function beginIfNecessary() {
if (!begun) {
// We wait for user actions before dispatching the event because
// we hope that user actions happen after the race condition
// described in https://stackoverflow.com/revisions/79652233/6
button2.dispatchEvent(new Event('click'));
begun = true;
}
}

function update(frameTime) {
beginIfNecessary();
deltaFrameTime = previousFrameTime ? (frameTime - previousFrameTime) / 1000 : 0;
previousFrameTime = frameTime;
svgTime = svg.getCurrentTime();
if ((svgTime = duration && speed > 0)) speed = 0;
else {
newSvgTime = svgTime + speed*deltaFrameTime;
svg.setCurrentTime(newSvgTime);
input.value = newSvgTime / duration * 100;
}
if (speed) requestAnimationFrame(update);
}

function play(speed) {
window.speed = speed;
previousFrameTime = null;
requestAnimationFrame(update);
}

function pause() {
speed = 0;
}

input.addEventListener('input', function() {
beginIfNecessary();
pause();
svg.setCurrentTime(this.value / 100);
});< /code>








https://stackoverflow.com/a/79652233/

◀️
⏸️
▶️

[*] Всегда вызов beginelement () при вводе события без необходимости (когда анимация уже начинается), но очень неэффективно для больших/более SVG, ведущих к базовым кадрам. />
[*] Я пробовал десятки комбинаций, когда запускать такие вещи, как pauseanimations () , отслеживайте время начала анимации, перезапустите его, когда он заканчивается, вызовите Endelement () на другой элемент , так что он не мешает, и как компонент вклад в SetCurrentTime

Подробнее здесь: https://stackoverflow.com/questions/797 ... -animation