Введение в веб-анимацию

1656569171 vvedenie v veb animacziyu

от CodeDraken

В этой статье «Введение в веб-анимацию» мы рассмотрим основные способы использования CSS-анимации. псевдоклассы, переходыи трансформации.

Если вы не уверены, почему следует использовать анимацию CSS, просмотрите эти статьи.

Некоторые базовые (и очень безобразные) примеры кода для этой статьи будут на CodePen:

Срабатывает

Прежде чем мы перейдем к некоторым анимациям, давайте подумаем, как они будут активированы. Большинство наших анимаций не запускаются сразу же после загрузки страницы. Чаще они будут сработаны путем смены класса (через JavaScript) или с помощью псевдоклассов.

Псевдо Фу

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

: наведите курсор
Псевдокласс при наведении курсора запускается, когда вы наведите курсор на цель с помощью мыши. В этом примере мы устанавливаем <;p>, чтобы изменить цвет на синий при наведении курсора. Он вернется к своему исходному цвету после того, как мышь отойдет от него.

<style> #hover-example:hover {  color: blue;  cursor: pointer; }</style>
<p id=”hover-example”>Hover example</p>

:фокус

«Псевдокласс CSS: focus представляет собой элемент (например, ввод формы), получивший фокус». — MDN

(хм… разве это не похоже на использование слова для определения себя??)

Фокус в основном используется для входов и кнопок, когда они выбраны/активированы, т.е. когда вы нажимаете на вход или вкладку в нем. В этом примере щелчок или нажатие табуляции на вводе приведет к изменению ширины и цвета фона. Если щелкнуть из него, он вернется к исходному размеру (и цвету).

<style> input:focus {  background-color: #f4f4f4;  width: 50vw; }</style>
<input type=”text”>

:активный
Активный кажется похожим на фокус, но обычно это только срабатывает на долю секунды. Первый вариант использования, который приходит на ум, это якоря (ссылка). В этом примере мы делаем что угодно с классом activate изменять при нажатии (т.е. пока он активен).

<style> .activate:active {  background-color: orange; }</style>
<p class=”activate”>Click me!</p><div class=”activate”>Activate me!</div><button class=”activate”>Hold me!</button>

Трансформаторы

«Свойство CSS transform позволяет возвращать, масштабировать, наклонять или переводить определенный элемент. “- MDN

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

Перевести ( x, y )

Переводить означает, что вы что-то двигаете. В следующем примере мы перемещаем все, что имеет translate класс 10rem над на оси X и 5rem по оси Y. (Если вы не знакомы с rem, вы также можете использовать пиксели.)

Это сокращенная функция, сочетающая X и Y, но вы можете использовать translateX или translateY вместо этого, если хотите.

<style> .translate {  transform: translate(10rem, 5rem) }</style>

Масштаб ( x, y )

Похож на translateмасштаб также имеет a scaleX, scaleYи а scale функция сокращения. Используйте масштаб для изменить размер чего-либо. В нижеприведенном примере элементы из scale класс уменьшается вдвое.

<style> .scale {  transform: scale(0.5); }</style>

Начало преобразования (x, y, z)

Transform-origin является важным свойством при работе с анимацией, особенно с вращениями. Это немного странно и трудно объяснить только словами, и я настоятельно предлагаю просмотреть документы MDN для этого, если вы еще не знакомы с изменением происхождения (например, Photoshop). В документации лучше всего сказано:

«Начало преобразования – это точка, вокруг которой применяется преобразование» – MDN

Представьте себе колесо:

1*Ez-Q3W-m0iDOFJyExQJMdw
колесо обзора от Unsplash

Когда колесо вращается, оно вращается вокруг центральной точки. Но теперь вообразите, что центральную точку переместили, скажем, в верхний левый угол. Теперь колесо вращается вокруг этой новой точки, обеспечивая совсем другой опыт. Эта центральная точка подобна началу координат. Интерактивный пример см. в CodePen.

Повернуть (угол)

Rotate делает то, что говорит. Вы можете указать любой угол, отрицательный, положительный, любое число, и он будет вращать его вокруг столько. Можно использовать несколько различных значений (град, совет, град) — см. больше типов значений на MDN.

Сделать все гладким

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

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

переход-свойство

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

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

transition-property: all;

продолжительность перехода

Это есть сколько времени займет завершение анимации. Используйте секунды или миллисекунды.

transition-duration: 2s;

Переходная функция времени

Здесь все становится сложнее. Функция времени перехода является an кривая ускорения, описывающая протекание анимации. Посмотрите на эти сайты, чтобы увидеть, как выглядит эта кривая и как она влияет на анимацию.

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

К счастью, мы можем использовать некоторые заранее определенные значения:

easeease-inease-outease-in-outlinearstep-startstep-end

Вам придется немного поиграть с ними, чтобы найти анимацию своей анимации.

Иногда нам придется использовать собственные cubic-bezier (или воспользуйтесь библиотекой). Для этого я предлагаю вам найти онлайн инструмент (см. ссылку выше) или воспользоваться инструментами разработчика вашего браузера, чтобы создать его.

transition-timing-function: cubic-bezier(.29, 1.01, 1, -0.68);

переход-задержка

Это, пожалуй, самое простое значение. Задержка перехода – это время, какое он будет подождите, прежде чем начать эффект. Используйте секунды или миллисекунды.

transition-delay: 500ms;

Переход (свойство, продолжительность, время, задержка)

Вы догадались, это то стенографии соединить все вышеперечисленные функции.

Вот как это выглядит с одним переходом:

transition: background 1s ease-in-out 0.5s;

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

transition: background 1s ease-in-out 0.5s,width 2s ease-in,height 1.5s;

В заключение

Это все, что вам нужно, чтобы начать создание интерактивных веб-сайтов. Упражняйте то, что вы научились, и как только вы освоите темы, рассмотренные здесь, вы сможете переходить к более сложным анимациям.

В следующей (или двух) статьях я расскажу о ключевых кадрах, 3D-преобразовании, производительности, анимации JavaScript и т.д.

Спасибо, что прочли! Если у вас есть вопросы, комментарии или критика, оставьте комментарий ниже, и я отвечу как можно скорее.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *