Люди мира, ремень себя в и держись крепче, потому что вы собираетесь испытать по-настоящему страшных впечатлений, которые вы получите в борьбу с тонкостями очень интересная функция CSS временной

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

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

CSS Сроки Функция Explained

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

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

Note: “. ГРМ функция” Там нет никакого фактического свойство с именем Когда я ссылку на это “имущество”, я на самом деле в виду и transition-timing-function и animation-timing-function недвижимость .

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

div {
   transition-property: background;
   transition-duration: 1s;
   transition-delay: .5s;
   transition-timing-function: linear;
}

/* This could, of course, be shortened to: */
div {
   transition: background 1s .5s linear;
}

Сокращение для определения перехода является довольно мягким, единственное требование для того, в том, что параметр задержки должны быть указаны после значения длительности (но не обязательно сразу же после).Кроме того, transition-duration значение только одно, что на самом деле требуется для кода функции;и потому, что значения по умолчанию остальных параметров адекватны большую часть времени, ваши переходы редко нужно что-то большее, чем в следующем фрагменте:

div {
   transition: 1s;
}

/* This is the same as saying: */
div {
   transition: all 1s 0s ease;
}

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

Во всяком случае, теперь у вас есть представление о том, что функция синхронизации делает.Давайте посмотрим на то, как он это делает .

Заглянув под Hood

Многие из вас, вероятно, не смотреть мимо доступных ключевых слов дляГРМ функция собственности, из которых пять: ease (по умолчанию), ease-in, ease-out, ease-in-out и linear.Тем не менее, эти слова просто сокращение для определения Bé кривую Zier .

Что

Вы не можете быть знакомы с этим термином, но я готов поспорить, что вы на самом деле видели Bé Zier кривая — черт возьми, если вы использовали графический программное обеспечение для редактирования, то вы, вероятно, даже создал одну!Это верно, когда вы используете перо или инструмент Path, чтобы создать хорошую гладкую кривую, то вы рисуете Bé кривую Zier!Во всяком случае, чтобы добраться до точки этого раздела, Bé кривая Zier является волшебство временной function;это в основном описывает шаблон ускорения на графике .

Это Bé кривая Zier переводится как ease Ключевое слово .

Если вы что-нибудь вроде меня в первый раз, когда я увидел Bé Zier кривую, как это, то вы можете быть удивлены, как на земле, что кривая может быть сформирован из четырех точек, построенных на графике!Я не мог сказать вам, на словах, но, к счастью, у меня есть особенно фантастический GIF, чтобы сделать работу для меня, любезно Wikipedia ¹ .

Кубический Bé кривая Zier втягивается (Изображение: Wikipedia ² )

Потому что эта кривая формируется из четырех пунктов, мы имеем в виду его как “кубический” Bé Zier кривой, в отличие от “квадратичной” кривой (три точки) или в “четвертой степени” кривой (пять баллов) .

Введение кубической Безье () Function

Итак, это где вещи становятся действительно интересно, как я открою, что вы можете получить доступ к этой кривой через cubic-bezier() функции, которые просто могут быть использованы вместо ключевых слов стоимости имущества ГРМ функции.Я понимаю, что вы, возможно, потребуется время, чтобы содержать ваше волнение …

С cubic-bezier() функции, вы можете манипулировать Bé кривой Zier в зависимости от того, как вы desire, создавая полностью настраиваемые шаблоны для ускорения вашего анимации!Итак, давайте посмотрим, как работает эта функция и как она позволяет Вам создать свой собственный Bé кривую Zier .

Во-первых, мы знаем, что кривая формируется по четырем точкам, которые упоминаются как точки 0, точки 1, пункт 2 и пункт 3 Другим важнымчто нужно отметить, что первый и последний пункты (0, 3) уже определены на графике, с точки 0 всегда сидит на 0,0 (внизу слева) и пункт 3 всегда сидит на 1,1 (вверху справа) .

Это оставляет только точкой 1 и точкой 2 доступны для наносим на графике, который вы можете сделать, используя cubic-bezier() функцию!Функция принимает четыре параметра, первый два являются х и у координаты точки 1 и причем два последних х и у координаты точки 2 .

transition-timing-function: cubic-bezier(x, y, x, y);

Для освоиться с синтаксисом, а также с тем, как он создает кривую и с ее физическим воздействием на анимации, я возьму вас через ГРМ функциональных ключевых слов пяти, их эквивалент cubic-bezier() ценности и результирующий эффектна анимацию .

Легкость в-out

Давайте начнем с ease-in-out ключевого слова, так Логика этой кривой и как это переводится с анимацией, вероятно, самый простой для понимания .

/* The cubic-bezier() equivalent of the ease-in-out keyword */
transition-timing-function: cubic-bezier(.42, 0, .58, 1);

Совершенно симметрично Bé Zier кривая, которая означает, что анимация будет легкость в полной скорости, а затем ослабить при такой же скоростью, .

Вы увидите, что точка 1 расположена на 0,42 вдоль оси х и в 0 на оси ординат, а точка 2 расположена на 0,58 по оси х и 1 на оси ординат.Результатом является совершенно симметричной Bé Zier кривая, которая означает, что анимация будет легкость в полной скорости, а затем ослабить при точно такой же ставке;Таким образом, название этого ключевого слова .

Если вы посмотрите на ниже демо, вы увидите физический эффект от ease-in-out ценности, а также о том, как он сравнивает с другой ключевые значения .

Смотрите bHzqm ³ Стивен Грейг ( @ stephengreig ^{39 36 31 28 25 22 19 16 13 4} ) на CodePen ^{40 37 32 29 26 23 20 17 14 5} .

Ease

ease Ключевое слово значение по умолчанию в CSS ГРМ функции собственности, и это на самом деле очень похож на предыдущий, хотя это облегчает в более быстрыми темпами, до ослабления гораздо более постепенно .

/* The ease keyword and its cubic-bezier() equivalent */
transition-timing-function: cubic-bezier(.25, .1, .25, 1);

Кривая по ключевому слову ease облегчает в более быстрыми темпами, до ослабления гораздо более постепенно .

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

Легкость в и простота out

ease-in и ease-out ключевые слова, что неудивительно, точные противоположности.Бывшие послабления в перед поддержания полной скорости вплоть до финиша, в то время как последние хиты на полной скорости прямо с места в карьер до ослабления до конца.ease-in-out ключевое слово, которое мы смотрели на ранее есть как логика хотел бы предложить, идеальное сочетание этих двух Bé Zier кривых .

/* The ease-in keyword and its cubic-bezier() equivalent */
transition-timing-function: cubic-bezier(.42, 0, 1, 1);

/* The ease-out keyword and its cubic-bezier() equivalent */
transition-timing-function: cubic-bezier(0, 0, .58, 1);

⁶
Bé Zier кривая для ease-in ключевое слово (слева) и ease-out ключевое слово (справа) ( Большая version ⁷ )

Linear

Окончательный ключевое слово в адрес не соответствует кривой на всех.Как следует из названия, linear ГРМ значение функции поддерживает ту же скорость на протяжении анимации, а это значит, что в результате Bé Zier кривая (или его отсутствие) будет просто прямая линия.Там просто нет varying образец ускорение, чтобы изобразить на графике .

/* The linear keyword and its cubic-bezier() equivalent */
transition-timing-function: cubic-bezier(0, 0, 1, 1);

linear ГРМ значение функции поддерживает ту же скорость на протяжении анимации .

Если вы обратиться к демо, вы, вероятно, заметили, что, несмотря на все примеры, имеющих те же значения длительности, некоторые из анимации, кажется, медленнее, чем другие.Почему это?Ну, взять ease-in-out ключевое слово в качестве примера, мы знаем, что он начинается и заканчивается в более медленном темпе, а это значит, что она должна охватывать золотую середину анимации на гораздо более быстрыми темпами.Это эффективно гарантирует, что мы воспринимаем текущая анимация, чтобы быть как короче и быстрее, в то время как, допустим, линейный анимация появляется больше и больше вытягивается .

Вы можете почувствовать, что эта статья очень медленно ослабление в его полную силу (посмотреть, что я там делал?), Так что теперь он, наконец, время, чтобы шаг вещи немного и посмотрим, как использовать cubic-bezier() функция, чтобы создать нашусобственные функции пользовательского сроки .

Создание пользовательских ускорения модели с кубической Безье () Function

Теперь, когда мы видели, как ключевые слова приравнять к соответствующим Bé кривых Zier и видел их влияние на анимации, давайте посмотрим на то, как манипулировать кривой для создания шаблонов пользовательских ускорения .

Теперь вы должны быть в состоянии построить точки 1 и 2 на графике с помощью cubic-bezier() функцию и имеют довольно твердое представление о том, как это повлияет на анимации.Однако, учитывая, что вы заговоре точек на графике, что вы, как правило, не может увидеть, очевидно, что это может стать очень утомительным очень быстро .

К счастью, такие люди, как Леа Verou существует, кто, казалось бы, не успокоится, пока развитие CSS не может быть проще!Lea разработала метко назвал Cubic Bé Zier, который является в основном площадка для создания полностью настраиваемых Bé кривые Zier и сравнивая их в действии с предопределенными ключевых слов.Что это означает для вас, что, вместо того, чтобы кропотливо редактирования десятичных знаков на ваши cubic-bezier() функций, вы можете просто посетить Cubic Bezier ⁸ и поиграть с кривой, пока вы не добилисьжелаемый эффект.Гораздо удобнее .

⁹ Lea Verou в великолепно полезным Cubic Bé zier ¹⁰ ( Большая version ¹¹ )

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

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

Смотрите Pen baFhH ¹² Стивен Грейг ( @ stephengreig ^{39 36 31 28 25 22 19 16 13 4} ) на CodePen ^{40 37 32 29 26 23 20 17 14 5} .

Давайте внимательнее посмотрим на первый из этих примеров, и попытаться понять, почему она производит такое принципиально иной эффект .

/* cubic-bezier() values for first example from preceding demo page */
transition-timing-function: cubic-bezier(.1, .9, .9, .1);

Пример пользовательского Bé Zier curve

Главное различие между этой функцией синхронизации и ключевые слова, по умолчанию это резкое уклонов Bé кривой Zier против “прогрессии” шкале (Y-ось).Это означает, что анимация прогрессирует в виде коротких пакетов, с длинной постепенного паузы в середине (где уровни кривой выхода).Эта картина резко контрастирует с тем, что мы привыкли к с ГРМ функциональных ключевых слов, которые принимают противоположный подход, с ослаблением периоды приходит в начале или в конце анимации, а не в середине .

При использовании пользовательского Bé кривые Zier теперь в сумке, конечно, мы все, но исчерпаны возможности cubic-bezier() функции, правильно ?!Можно подумать, что это так, но это хитрый нищий стал еще более рукаве

Начало творческой С Bé Zier Curves

Да, это правда: Bé кривые Zier получить еще более захватывающим!Кто бы мог подумать?Сфера расширяет с откровением, что только шкалы времени (ось х) ограничена 0– 1 диапазона на графике, в то время как в масштабе прогрессии (Y-ось) может продлить ниже и рамки типичной 0– 1 диапазоне .

Шкала прогрессии именно то, что вы думаете это, с нижней стороны (0), отмечающего начало анимации и верхним концом (1), отмечающий конец анимации.Как правило, кубический Bé кривая Zier всегда путешествует на север вдоль этой прогрессии масштабе с различной интенсивностью, пока он не достигнет конечной точки анимации.Тем не менее, способность строить точки 1 и 2 за пределами этого 0– 1 диапазон позволяет кривую блуждать назад down шкала прогрессии, что на самом деле вызывает обратное движение в анимации!Как всегда, лучший способ понять это через визуальные:

Заказ Bé Zier кривой с использованием значения за пределами типичного 0– 1 range

Вы увидите, что точка 2 построена за пределами типичного 0– 1 диапазона, в -0,5, что в свою очередь тянет кривую вниз.Если вы посмотрите на следующей демонстрацией, вы увидите, что это создает подпрыгивая эффект в середине анимации .

Смотрите Pen kILDb ¹⁵ Стивен Грейга ( @ stephengreig ^{39 36 31 28 25 22 19 16 13 4} ) на CodePen ^{40 37 32 29 26 23 20 17 14 5} .

Наоборот, можно поместить этот движение назад в начале анимации, а также сделать его временно пробежать мимо намеченной конечной точки.Думайте о нем, как принимать пару шагов назад, чтобы получить разбега;затем, в конце концов, ваш импульс несет вас мимо вашего назначения, в результате чего вам взять пару шагов назад, чтобы убедиться, что вы приедете в назначенное место.Посмотрите на рабочем примере, чтобы действительно понять, что мы говорим здесь.Кроме того, Bé Zier кривая, которая производит этот эффект можно увидеть ниже .

Смотрите Pen xcCqj ¹⁸ Стивен Грейга ( @ stephengreig ^{39 36 31 28 25 22 19 16 13 4} ) на CodePen ^{40 37 32 29 26 23 20 17 14 5} .

Заказ Bé Zier кривой с использованием значения за пределами типичного 0– 1 range

Теперь вы должны иметь достаточно хорошее представление о том, cubic-bezier() Значения за пределами типичного 0– 1 диапазона может физически повлиять, как анимация выдохся.Мы можем посмотреть на движущиеся коробки в течение всего дня, но давайте закончим этот раздел с примера, который наглядно демонстрирует этот тип творческой функции синхронизации .

Смотрите vbqBh ²¹ Стивен Грейг ( @ stephengreig ^{39 36 31 28 25 22 19 16 13 4} ) на CodePen ^{40 37 32 29 26 23 20 17 14 5} .

Это верно: Мы анимация с плавающей воздушный шар!… Что?Разве вы всегда хотели сделать это с помощью CSS

Бриф на этой анимации является “добавить гелий” в баллон на клик, так что он плавает на “потолке”, где он будет отскакив …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров