Люди мира, ремень себя и удерживать крепко, потому что вы собираетесь испытать поистине ужасный волнение, как вы, чтобы справиться с тонкостях чрезвычайно интересной функцией синхронизации УС
Итак, предметом данной статьи, вероятно, не послал свою гонки в крови, но все шутки в сторону, функция времени является немного скрытой 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 .
__, Что 0! |
Вы не могли бы быть знакомы с этим термином, но я держу пари, что вы на самом деле видели Bé Zier кривая — черт возьми, если вы использовали графический программное обеспечение для редактирования, то вы, вероятно, даже создал одну!Это верно, когда вы используете перо или инструмент Path, чтобы создать хорошую гладкую кривую, то вы рисуете кривую Bé Zier!Во всяком случае, чтобы добраться до точки этого раздела, Bé кривая Zier это магия за временной function;это в основном описывает шаблон ускорения на графике .
Это Bé кривая Zier переводит на ease Ключевое слово .
Если вы что-нибудь вроде меня, когда я впервые увидел Bé Zier кривую, как это, то вы можете быть интересно, как на земле, что кривая может быть сформирован из четырех пунктов, построенных на графике!Я не мог сказать вам, на словах, но, к счастью, у меня есть особенно фантастический GIF, чтобы сделать работу для меня, любезно Wikipedia __15 | | 1__14 .
Кубический Bé кривая Zier втягивается (Изображение: Wikipedia 2 )
Потому что это кривая формируется из четырех пунктов, мы говорим о нем как о “кубический” 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 3 Стивен Грейг ( @ stephengreig 39 36 31 28 25 22 19 16 13 4 ) на CodePen __17 | 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);
6
Bé Zier кривая ease-in ключевое слово (слева) и ease-out ключевое слово (справа) ( Большая version 7 )
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 не может быть проще!Леа разработала метко назвал Cubic Bé Zier, которая в основном площадка для создания полностью настраиваемых Bé кривые Zier и сравнивая их в действии с предопределенными ключевых слов.Что это означает для вас, что, вместо того, чтобы кропотливо редактирования десятичные в ваших cubic-bezier() функций, вы можете просто посетить кубический Bezier 8 и поиграть с кривой, пока вы не достигли желаемого эффекта.Гораздо удобнее .
9 Великолепно полезным __13 Lea Verou в | кубический Bé zier 10 ( Большая version 11 )
Стенограмма ключевые слова дают вам большие возможности для синхронизации функции, чтобы начать с, но различия между ними часто возникают незначительные.Только тогда, когда вы начинаете создавать собственные Bé кривые Zier ты поймешь, радикальный эффект функция времени может иметь на анимации .
Просто посмотрите на следующих рабочих примеров, чтобы увидеть большую разницу между анимации, несмотря на все из них имеют точно такой же продолжительности значения .
Смотрите ручка baFhH __34 | 12 Стивен Грейг ( @ stephengreig 39 36 31 28 25 22 19 16 13 4 ) на CodePen __82 | 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 против “прогрессии” шкалы (у-ось).Это означает, что анимация прогрессирует в виде коротких пакетов, с длинной постепенного паузы в середине (где уровни кривой выход).Эта модель резко контрастирует с тем, что мы привыкли к с ГРМ функциональных ключевых слов, которые принимают противоположный подход, с ослаблением периоды приходят в начале или в конце анимации, нежели в средней .
С пользовательской Bé кривые Zier предприятием в сумке, конечно, мы все, но исчерпаны возможности cubic-bezier() функции, правильно ?!Можно подумать, что это так, но это хитрый нищий получил еще более рукаве
Получение Творческий с Bé Zier Curves
Да, это правда: Bé кривые Zier получить еще более захватывающим!Кто бы мог подумать?Сфера расширяется с откровением, что только шкалы времени (ось х) ограничена 0– 1 диапазона на графике, в то время как в масштабе прогрессии (ось) можно расширить ниже и рамки типичной 0– 1 диапазоне .
Шкала прогрессии именно то, что вы думаете, это, с нижнего конца (0), отмечающего начало анимации и верхней части (1), отмечающий конец анимации.Как правило, кубический Bé кривая Zier всегда путешествует на север вдоль этой прогрессии шкале на различной интенсивности, пока не достигнет конечной точки анимации.Тем не менее, способность строить пункты 1 и 2 за пределами этой 0– 1 диапазон позволяет кривую блуждать назад down шкала прогрессии, что на самом деле вызывает обратное движение в анимации!Как всегда, лучший способ понять это через визуальные:
Заказ Bé Zier кривой с использованием значения за пределами типичного 0– 1 | range__22
Вы можете видеть, что точка 2 строится за пределами типичного 0– 1 диапазона на -0.5, что в свою очередьтянет кривой вниз.Если вы посмотрите на следующий демо, вы увидите, что это создает эффект подпрыгивая в середине анимации .
Смотреть Ручка kILDb 15 Стивен Грейга ( @ stephengreig 39 36 31 28 25 22 19 16 13 4 ) на CodePen __52 | 40 37 32 29 26 23 20 17 14 5 .
Наоборот, вы могли бы разместить эту обратную движение в начале анимации, а также сделать его временно пробежать мимо намеченной конечной точки.Думайте о нем, как принимать пару шагов назад, чтобы получить разбега;Затем, в конце концов, ваш импульс несет мимо вашего назначения, в результате чего вам взять пару шагов назад, чтобы убедиться, что вы приедете в назначенное место.Посмотрите на рабочем примере, чтобы действительно понять, что мы говорим здесь.Кроме того, Bé Zier кривая, которая производит этот эффект можно увидеть ниже .
Смотреть Ручка xcCqj 18 Стивен Грейга ( @ stephengreig 39 36 31 28 25 22 19 16 13 4 ) на CodePen __38 | 40 37 32 29 26 23 20 17 14 5 .
Заказ Bé Zier кривой с использованием значения за пределами типичного 0– 1 | range__82
Теперь вы должны иметь достаточно хорошее представление о том, cubic-bezier() значения вне типичного 0– 1 диапазона может физически повлиять, как анимация выдохся.Мы можем посмотреть на движущиеся коробки весь день, но давайте закончим этот раздел с примера, который четко демонстрирует этот тип творческой функции синхронизации .
Смотрите ручка vbqBh __89 | 21 Стивен Грейг ( @ stephengreig 39 36 31 28 25 22 19 16 13 4 ) на CodePen 40 37 32 29 26 23 20 17 14 5 .
Это верно: Мы оживляющий плавающей воздушный шар!… Что?Разве вы всегда хотели сделать, что с CSS
Кратко для этой анимации заключается в “добавить гелий” в баллон на мыши, так что он плавает на “потолке”, где он будет отказов немного, прежде че …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров