Нервный текст при масштабировании анимации с помощью JavaScript

Question

Нервный текст при масштабировании анимации с помощью JavaScript

1

При использовании масштабирования для изменения размера HTML-элемента, содержащего текст, текст дрожит во время анимации, но только при анимации с помощью библиотек JavaScript.

Джиттергинг наиболее заметен, когда анимация медленнее, а текст меньше. Я не могу понять, что вызывает его или как избавиться от него.

Это дрожание не происходит во время анимации или анимации CSS, используя довольно новый API JavaScript для веб-анимации. В некоторых браузерах это также не происходит. (На моем iPhone)

Чтобы легко сравнить различные методы анимации масштабирования элемента и того, как они появляются, я сделал CodePen для удобства. Прежде чем проверять это, обратите внимание на следующие пункты:

Все анимации используют некоторую форму или имитацию transform: scale(num); свойства CSS transform: scale(num); для анимации и имеют такое же облегчение и продолжительность, чтобы их можно было сравнить более легко.
Несмотря на то, что дрожание появляется и на macOS, практически невозможно увидеть на Mac с сетчатыми экранами из-за высокого разрешения.
Полученные результаты отражают появление анимаций на компьютере с Windows 10 в Google Chrome 59, хотя для меня Microsoft Edge также показал те же результаты.

Поэтому мой вопрос заключается в следующем: как я могу помешать тексту дрожать или размываться при анимации свойства scale с помощью JavaScript? Как я могу сделать текст в моей анимации масштабирования JavaScript такой же гладкой, как и при использовании CSS?

Возможно, вам интересно, почему я не просто использую CSS. Ответ заключается в том, что я расстроен тем, насколько ограничена анимация CSS. Я хотел бы использовать расширенные функции ослабления, выходящие за пределы возможностей простой кривой Безье (например, функции отскока и упругих функций Роберта Пеннера) и использовать различные ослабления при наведении мыши, когда мышь входит и выходит из этого элемента. Это полностью мое собственное мнение, но до сих пор единственным безболезненным способом, который я нашел для этого, является использование библиотек JavaScript. Помимо их функциональности, связанной с ослаблением, большинство из них, похоже, предлагают множество других возможностей, которые делают анимацию гораздо более легкой. Если вы знаете лучший способ получить всю необходимую функциональность, пожалуйста, дайте мне знать!

Aaron Beaudoin 09 июнь 2017, в 12:13

Источник

Теги:

javascript

animation

1 ответ

Ещё вопросы

brianskold · Answer 1 · 2017-06-09T10-25-00.000Z

То, с чем вы сталкиваетесь, - это различия в стратегии многоуровневого браузера. Вы обнаружите, что все примеры выглядят гладкими в Firefox. Это потому, что Firefox обнаруживает, когда скрипт меняет свойство, которое может анимироваться с использованием слоев и создает слой в ответ.

Хотя все браузеры создают слои, когда это необходимо для декларативной анимации (анимации CSS, переходы CSS, анимации API веб-анимации и даже анимации SVG SMIL в некоторых случаях), не все браузеры делают это для анимации Javascript. Таким образом, для этих браузеров вам нужно попытаться обмануть браузер в создании слоя (или вы можете просто скопировать ошибку в браузере, так как он действительно должен сделать это для вас!).

До недавнего времени использование will-change: transform было рекомендуемым методом для создания браузера для создания слоя. Тем не менее, Chrome изменил свою стратегию рендеринга и теперь will-change: transform может привести к очень размытым результатам с масштабированием анимации в Chrome. Некоторым людям удалось обмануть Chrome, чтобы вначале планировать его с более высоким разрешением, а затем масштабировать свой элемент до анимации. Это очень жаль, что нужно сделать это, и я могу только побудить вас обратиться к Chrome с просьбой исправить это.

Кроме того, примеры с использованием "с НА" не являются точными. Анимация CSS в (1) также будет использовать аппаратное ускорение в каждом браузере, о котором я знаю, - нет необходимости добавлять перспективу. К сожалению, в этой области есть много вводящей в заблуждение информации (например, некоторые статьи утверждают, что анимация может работать на GPU, но это просто не так). В целях повышения самооценки вы можете найти статью, которую я написал в этом прошлом году.

Ух ты. Прежде всего, спасибо за то, что вы первый, кто наконец-то указал мне правильное направление. Я вырывал свои волосы, пытаясь понять, что вызывает это. Во-вторых, вау это отстой. Как довольно новый разработчик, многие из этих вещей кажутся мне непосильными. Я думаю, именно поэтому я испортил аппаратное ускорение. Разве я не могу заставить эту работу работать, не возиться с чьим-либо исходным кодом и не пытаться заставить анимацию правильно создавать слои?
Я думаю, что ваш лучший ресурс здесь - страница GSAP по этой теме, которую вы, возможно, уже нашли. Я действительно сожалею о таком положении дел, и я очень разочарован в команде Chrome за то, что сделал это, а затем заявил, что реализация поведения Firefox слишком сложна. Пожалуйста, добавьте свой тестовый пример к этой ошибке Chrome.