При использовании масштабирования для изменения размера HTML-элемента, содержащего текст, текст дрожит во время анимации, но только при анимации с помощью библиотек JavaScript.
Джиттергинг наиболее заметен, когда анимация медленнее, а текст меньше. Я не могу понять, что вызывает его или как избавиться от него.
Это дрожание не происходит во время анимации или анимации CSS, используя довольно новый API JavaScript для веб-анимации. В некоторых браузерах это также не происходит. (На моем iPhone)
Чтобы легко сравнить различные методы анимации масштабирования элемента и того, как они появляются, я сделал CodePen для удобства. Прежде чем проверять это, обратите внимание на следующие пункты:
transform: scale(num);
свойства CSS transform: scale(num);
для анимации и имеют такое же облегчение и продолжительность, чтобы их можно было сравнить более легко.Поэтому мой вопрос заключается в следующем: как я могу помешать тексту дрожать или размываться при анимации свойства scale с помощью JavaScript? Как я могу сделать текст в моей анимации масштабирования JavaScript такой же гладкой, как и при использовании CSS?
Возможно, вам интересно, почему я не просто использую CSS. Ответ заключается в том, что я расстроен тем, насколько ограничена анимация CSS. Я хотел бы использовать расширенные функции ослабления, выходящие за пределы возможностей простой кривой Безье (например, функции отскока и упругих функций Роберта Пеннера) и использовать различные ослабления при наведении мыши, когда мышь входит и выходит из этого элемента. Это полностью мое собственное мнение, но до сих пор единственным безболезненным способом, который я нашел для этого, является использование библиотек JavaScript. Помимо их функциональности, связанной с ослаблением, большинство из них, похоже, предлагают множество других возможностей, которые делают анимацию гораздо более легкой. Если вы знаете лучший способ получить всю необходимую функциональность, пожалуйста, дайте мне знать!
То, с чем вы сталкиваетесь, - это различия в стратегии многоуровневого браузера. Вы обнаружите, что все примеры выглядят гладкими в Firefox. Это потому, что Firefox обнаруживает, когда скрипт меняет свойство, которое может анимироваться с использованием слоев и создает слой в ответ.
Хотя все браузеры создают слои, когда это необходимо для декларативной анимации (анимации CSS, переходы CSS, анимации API веб-анимации и даже анимации SVG SMIL в некоторых случаях), не все браузеры делают это для анимации Javascript. Таким образом, для этих браузеров вам нужно попытаться обмануть браузер в создании слоя (или вы можете просто скопировать ошибку в браузере, так как он действительно должен сделать это для вас!).
До недавнего времени использование will-change: transform
было рекомендуемым методом для создания браузера для создания слоя. Тем не менее, Chrome изменил свою стратегию рендеринга и теперь will-change: transform
может привести к очень размытым результатам с масштабированием анимации в Chrome. Некоторым людям удалось обмануть Chrome, чтобы вначале планировать его с более высоким разрешением, а затем масштабировать свой элемент до анимации. Это очень жаль, что нужно сделать это, и я могу только побудить вас обратиться к Chrome с просьбой исправить это.
Кроме того, примеры с использованием "с НА" не являются точными. Анимация CSS в (1) также будет использовать аппаратное ускорение в каждом браузере, о котором я знаю, - нет необходимости добавлять перспективу. К сожалению, в этой области есть много вводящей в заблуждение информации (например, некоторые статьи утверждают, что анимация может работать на GPU, но это просто не так). В целях повышения самооценки вы можете найти статью, которую я написал в этом прошлом году.