Мобильная версияВ приведенном ниже примере я хотел бы иметь возможность точно знать, как устанавливаются свойства масштабирования и поворота, независимо от того, где я приостановил анимацию без необходимость сортировки внутренних свойств, таких как отступы или синий цвет, передаваемый другой кнопкой.
Если это просто невозможно легко сделать, это нормально , мне просто нужно подтверждение этого. Если да, то я открыт для мозгового штурма разумных альтернатив.
Что я рассмотрел:
Я видел несколько качественных примеров использования getComputedStyle() и я думаю, что это довольно близко к тому, что я хочу, но в идеале мне нужен объект или строка CSS, которая содержит только свойства стиля, которые применяются анимацией (поэтому никаких параметров базового стиля, которые поступают из файла CSS или применяться другими способами).
Я довольно тщательно просмотрел документацию по API веб-анимации и не нашел ничего, что напрямую отвечало бы моим потребностям. Разумный наивный подход состоит в том, чтобы посмотреть на первый или последний (в зависимости от направления анимации) объект keyFrameEffect в анимации и проверить пары значений свойств на наличие соответствующих свойств, но с тем, сколькими способами анимацию можно приостановить или закончить в промежуточных/неожиданных местах в цикл анимации это не кажется основательным решением. Например, это не будет работать, если анимация приостановлена или даже находится в состоянии завершения, если установлено такое значение, как iterationStart, поскольку теперь оно смещает состояние завершения от последнего ключевого кадра.
Возможно, есть способ взять объект анимации и применить его точное текущее состояние к пустому объекту с помощью commitStyles() или чего-то еще, чтобы результирующий объект стилей на пустом элементе содержал только свойства, примененные анимацией? Меня беспокоят пользовательские элементы/свойства, но, возможно, я слишком много об этом думаю.
Независимо от того, что это критично, я не меняю напрямую анимируемый элемент или какие-либо его свойства, поэтому Мне нужно быть осторожным и убедиться, что стили фиксации влияют только на пустой объект. Возможно, изменив цель ключевых кадров, а затем вернув ее обратно по завершении?
Спасибо. заранее за любые предложения!
Пример:
Код: Выделить всё
const newspaper = document.querySelector(".newspaper");
const colorChange = document.querySelector(".color-change");
const pauseButton = document.querySelector(".pause");
const finish = document.querySelector(".finish");
// I want a way to directly get the current value of these properties
// without being mixed in with other non animation related css properties
const newspaperSpinning = [
{ transform: "rotate(0) scale(1)" },
{ transform: "rotate(360deg) scale(0.7)" },
];
const newspaperTiming = {
duration: 2000,
iterations: 999,
fill: 'forwards',
iterationStart: 0.3
};
const newspaperKeyFrames = new KeyframeEffect(
newspaper, // element to animate
newspaperSpinning,
newspaperTiming, // keyframe options
);
const animation = new Animation(
newspaperKeyFrames,
document.timeline,
);
newspaper.addEventListener("click", () => {
animation.play()
});
colorChange.addEventListener("click", () => {
newspaper.style.color = 'blue';
});
pauseButton.addEventListener("click", () => {
animation.pause();
});
finish.addEventListener("click", () => {
animation.finish();
});Код: Выделить всё
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
button {
cursor: pointer;
}
.newspaper {
padding: 0.5rem;
text-transform: uppercase;
text-align: center;
background-color: white;
cursor: pointer;
}Код: Выделить всё
click to start spinning newspaper animation
click to change the color
click to pause the animation
click to finish the animationПримечание: если на элемент в данный момент действует несколько анимаций, это нормально, и возможно, даже предпочтительнее, если результатом является список/объект всех свойств стиля, активно передаваемых любой анимацией элемента.
Подробнее здесь: https://stackoverflow.com/questions/786 ... -a-web-ani
