Анимация CSS width и height без неприятного эффекта

Анимация CSS width и height без неприятного эффекта

От автора: возможность анимировать свойства CSS width и height была бы очень полезна. К сожалению, на данный момент это верный способ заставить ваш браузер биться в агонии. В этом 5-минутном руководстве мы рассмотрим использование свойства transform для имитации анимации ширины элемента.

Анимация CSS width и height без неприятного эффекта

Не анимируйте свойства width и height

Браузерам не нравится, когда им приходится вычислять позиции и размеры элементов на веб-странице. Большинство элементов каким-то образом влияют на отображение других элементов. Изменение размеров одного элемента может иметь множество непредвиденных последствий.

Изменение width и / или height элемента потребует, чтобы браузер вычислил, какие другие элементы (дочерние элементы, смежные элементы или родительский элемент) будут затронуты этим изменением и как эти элементы должны быть обновлены. Этот процесс называется перекомпоновкой и сопровождается перерисовкой.

Это затратные операции, и мы должны максимально избегать их запуска.

Вместо этого используйте Transform

Для создания анимации стоит использовать свойства CSS transform или opacity. В этой статье мы сосредоточимся на transform.

Свойство transform указывает графическому процессору выполнить последние обновления текстуры элемента перед его отображением на экране. Эти последние обновления могут, например, вращать, перемещать и масштабировать элемент.
Вы можете сравнить текстуру графического элемента с изображением, сделанным вами, с помощью мобильного телефона. Картинка состоит только из пикселей, дочерних элементов, и другой информации об элементе больше нет.

Графический процессор имеет дело только с пикселями, которые представляют элемент. И так как графические процессоры очень хорошо справляются с пикселями, эти операции преобразования являются супер производительными.

Это также имеет обратную сторону. Мы можем манипулировать только пикселями, а не содержимым элемента (у нас есть только изображение элемента). Ниже вы можете увидеть, как эта разница влияет на свойство border-radius. В примере с transform радиус не перерисовывается (как в примере с width), он просто масштабируется. Перекомпоновка требует перерисовки, а графический процессор не может ее выполнить, он работает только с пикселями.

Анимация CSS width и height без неприятного эффекта

Анимация свойства transform выполняется в миллион раз быстрее, чем анимация width, height или любого другого свойства, которое влияет на макет и вызывает перекомпоновку.

Но если мы анимируем это, результатом будет странно растянутая фигура. Это может быть быстро, но выглядеть это будет не очень хорошо. Это всегда напоминает мне о тех инопланетянах в Duke Nukem 3D, которых раздавило дверью.

Метод 9-фрагментного масштабирования

До появления border-radius нам приходилось создавать изображение для каждого угла (а иногда и края) элемента, чтобы «имитировать» радиус округления. В зависимости от дизайна, который может дать до 8 изображений для одного элемента, эти изображения будут расположены следующим образом.

Это называется методом 9-фрагментного масштабирования.

Анимация CSS width и height без неприятного эффекта

Этот метод позволяет масштабировать элемент и растягивать изображения 2, 4, 6 и 8, в то же время связывая 1, 3, 7 и 9 с соответствующими им углами, используя абсолютное позиционирование. Это дает углы, которые не растягиваются при масштабировании.

Анимация CSS width и height без неприятного эффекта

К счастью, мы живем в эпоху, когда браузеры поддерживают border-radius, поэтому нам больше не нужно применять эту технику для рисования закругленных углов.

Однако мы можем применить ее, чтобы изменить размеры элементов, используя свойство transform. Мы начнем с такой структуры:

Анимация CSS width и height без неприятного эффекта

Давайте применим это к нашему квадрату. Это будет означать, что нам нужен один контейнер и три дочерних элемента для представления левой (1), центральной (2) и правой (3) частей квадрата.

Давайте посмотрим на CSS:

В результате получается красиво окрашенный квадрат.

Анимация CSS width и height без неприятного эффекта

Я раскрасил отдельные элементы, чтобы сделать их индивидуально идентифицируемыми. Теперь для следующего трюка, мы можем анимировать элементы квадрата .center и .right.

Если вы используете Firefox, это должно выглядеть великолепно. Если вы используете Safari или Chrome, то можете заметить легкое мерцание края между центральной и правой частью.

Я не уверен, почему это происходит. Это либо проблема с альфа-смешиванием, либо с округлением пикселей. Тем не менее. Немного перекрывая центральный элемент с соответствующим элементом, мы можем решить эту проблему рендеринга. Мы позаботимся о том, чтобы элемент имел ширину не менее 1 пикселя и масштабировался до 121 пикселей.

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

Посмотреть демо конечного результата на CodePen

Придержите лошадей

Прежде чем вы начнете использовать эту технику, обратите внимание, что:

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

Можно задать box-shadow, но это немного сложно.

Квадрат не может обрезать другие элементы, так как overflow: hidden не будет работать.

Тем не менее, применив небольшие хитрости, вы можете использовать это, чтобы создавать удивительные эффекты. Элементы файла и область добавления библиотеки загрузки файлов FilePond — все используют эту технику, чтобы плавно анимировать их высоту.

Предыдущая версия Doka Image Editor использовала эту технику как по ширине, так и по высоте, чтобы визуализировать и анимировать белый прямоугольник обрезки в верхней части изображения. Позже это было частично заменено на WebGL.

Заключение

По умолчанию свойства CSS width и height (наряду с большинством других свойств) не подходят для анимации. Это слишком сильно влияет на производительность рендеринга.

Мы переключились на свойство transform и анимировали квадрат, задействуя графический процессор, чтобы значительно улучшить производительность, но в итоге появились некоторые другие ограничения.

Умно применив 9-фрагментную технику, мы обошли некоторые из этих ограничений, чтобы создать элемент, который мы можем анимировать, без негативного влияния на производительность.

Автор: Rik Schennink

Источник: //pqina.nl

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: