Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Animation

Как использовать переменные CSS для анимации

by
Difficulty:IntermediateLength:ShortLanguages:

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

Когда мы упоминаем CSS в дискуссиях, мы часто говорим о нем как о неполноценном языке. Декларативный язык, лишенный логики и понимания; Но это не совсем настоящая реальность. В течение многих лет разработчики жаждали  получить возможность использовать переменные в стандартном CSS, которые так долго были доступными с препроцессорами, такими как LESS и Sass. Мало того, что переменные CSS являются реальным и осязаемым для разработчиков, они также могут использоваться в сценариях анимации. Все еще настроены скептически? Следуйте дальше, чтобы узнать больше!

Основы переменных

Переменные CSS - это хранимые значения, предназначенные для повторного использования в таблице стилей. Они доступны с использованием пользовательской функции var() и задаются с использованием пользовательской нотации свойств.

Переменные, определенные в :root, являются глобальными, тогда как переменные, определенные в селекторе, являются специфическими для этого селектора.

В приведенном выше примере любой div принимает переменную, но мы могли бы более точно определить наименования, используя методы таргетинга, такие как class или например id.

Функция var() также может принимать значения возврата.

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

Переменные CSS не совсем готовы для прайм-тайма, но перспективы на будущее, многие ведущие браузеры уже реализуют спецификацию. Это только вопрос времени, пока они не могут быть использованы без каких-либо забот, и это время приближается быстро.

Переменные для анимации

Существует множество вариантов объединения переменных CSS с анимацией. Подумайте о таких контекстах, как аудиовизуализация, сценарии, управляемые событиями JavaScript, и даже события, связанные с CSS, такие как hoverfocus и target. Теоретически, Apple Watch может быть подключен к API, используя анимацию биения с переменными параметрами CSS. Тогда у нас есть акселерометры, API-интерфейсы наклона устройства и даже API-интерфейсы геймпада, но почему мы должны рассматривать анимацию с помощью CSS-переменных вообще? Вот несколько причин:

  • Легко отлаживается.
  • Никаких чрезмерных манипуляций с DOM.
  • Независимый от узлов DOM.
  • Тематизация
  • Работает с SVG.

Операции в CSS действительно являются ключевой частью всей головоломки с анимацией. Функции CSS, такие как calc, могут принимать значение во время выполнения и выполнять такие операторы, как умножение, деление, сложение, вычитание, изменение значений. Это позволяет делать переменные CSS динамическими.

Переменные CSS в JavaScript

Теперь, когда мы знаем, как выглядят переменные CSS и что они могут делать, пришло время понять, как JavaScript подходит ко всему этому.

Методы, показанные выше, используются для установки, получения и удаления значений свойств. Они могут использоваться для наших типичных свойств CSS (background-color, font-size и т.д.), Но они также могут использоваться и для переменных CSS. Эти параметры будут устанавливать новое значение для глобально определенного свойства, иначе известного как:root в CSS.

Они также являются настоящим открытием для анимации с помощью переменных CSS, потому что наши методы JS могут получать, устанавливать или удалять переменную во время выполнения динамически!

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

Демонстрация

Есть множество удивительных и чрезвычайно талантливых разработчиков, которые используют и экспериментируют с этими концепциями реактивной и тематической анимации, используя переменные CSS. Вот только несколько примеров, чтобы нырнуть в и узнать, что происходит под капотом.

Закат/восход

Дэвид Харшид.

Этот пример показывает мощь анимации переменных CSS, используемых для создания темы. Как правило, понадобилось бы в два раза больше кода для выполнения этой демонстрации без использования переменных CSS и во много раз больше, если вы хотите использовать более двух тем.

Анимация переменными CSS

Автор GREY GHOST.

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

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

Алекс CSS Husky

Дэвид Харшид.

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

Заметьте, что происходит, когда вы двигаете мышью? Довольно круто, да?

Анимация с помощью CSS-переменных

Уэсом Босом.

А что на счет изменения значений переменных другими способами? Давайте взглянем на следующее демо Уэс Бос, в котором используются ползунки, чтобы обновить позиции изображения.

Двигайте ползунки в свободное время. Обратите внимание на прохладу, которая наступает? Просто, но просто волшебно, а  это просто обновляются переменные для позиции преобразования при каждом изменении ползунков. Suuuuhhhweeet!

Single Div Accordion (анимированные с CSS-переменными)

Дэн Уилсон.

Как насчет чего-то другого для музыкантов? Посмотрите на этот хип-аккордеон Дэна Уилсона.

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

Переменные CSS + Transform = Индивидуальные свойства (с входами)

Дэн Уилсон.

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

Побочные эффекты CSS-переменных

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

Вот демо-версия Shaw, опубликованная в группе Animation at Work Slack, которая использовалась для тестирования: CSS-переменные Recalc Style Performance Test

Во время тестов (Chrome 58. Mac 10.12) было обнаружено, что когда кнопка Set CSS Var срабатывает до тех пор, пока браузер не закрасит фон, будет затрачено 52.84 мс времени на recalc и 51.8ms рендеринга. Переключение настроек в тесте  CSS Property показывает совсем другой результат. С момента нажатия кнопки «Установить CSS-свойство» до тех пор, пока фон не будет окрашен, проходит примерно 0,43 мс recalc и 0,9 мс рендеринга.

Если вы переключаете background на color  вы получите эквивалентные измерения, так как currentColor может или не может существовать у наследников (Дэвиду Харшиду). Любое свойство, которое наследуется, всегда будет вызывать recalc стиля для всех и всех дочерних элементов. Свойство background-color не наследуется, следовательно, существует огромная разница с CSS-переменными, которые всегда наследуются. Обычно свойства CSS, которые по умолчанию inherit  в большинстве случаев вызывают большой recalc стилей. По-прежнему важно отметить, что простоянное изменение переменных CSS может быть дырой в производительности. Хорошей практикой избежать этого является оживить переменные CSS на самом определенном уровне (или самом глубоком уровне), чтобы предотвратить изменение множества дочерних элементов. Подробнее о сокращении объема и сложности вычислений стилей вы можете узнать на странице основных принципов Google.

Вывод

Я призываю всех вас погрузиться и протестировать это демо для себя и сделать свой собственный вывод/изменения/пользовательские тесты и поделиться своими результатами в комментариях. Основной вывод во всем этом состоит в том, что переменные CSS предлагают огромную гибкость, но будут иметь последствия для установки CSS-переменных для родителя с большим количеством дочерних элементов.

Особая благодарность банде в канале Animations At Work Slack за продолжающееся тестирование, отзывы и обсуждения (Дэвид Хоршид, Джони Корпи, Дэн Уилсон и Шоу).

Ресурсы

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.