В этой статье рассматриваются новые параметры замедления, которые на момент написания были доступны только в Firefox 65+. Демонстрации будут полностью реализованы только в Firefox, пока другие браузеры не реализуют это.
Первое большое изменение в упрощении веб-анимации (или функции синхронизации) уже на нас. После некоторых обсуждений, обновлений спецификации и первоначальных реализаций в качестве отдельной функции Firefox 65 представляет четыре новых параметра для функции steps () .
-
толчок -
прыжок конец -
скачка и -
перепрыжка ни
См. Pen .
Визуальный справочник: шаги () и другие упрощения, перевод Дэна Уилсона (@danwilson)
на CodePen.
Как эти новые значения сравниваются с тем, что у нас уже было, и когда лучше всего использовать каждое из них?
Содержание статьи
Функция облегчений и шагов ()
Во-первых, давайте сделаем шаг назад и обсудим, что такое упрощения и что нам позволяет делать функция steps () .
Упрощения позволяют нам изменить способ завершения анимации перехода CSS или API веб-анимаций с течением времени.
.mover {
анимация : ход 2000 мс ; ;
функция анимации-времени : линейная ; / * замедление * /
transform : translateX ( 0px ); ;
}
@keyframes ход {
100 % {
transform : translateX ( 200px ); ;
}
}
При линейном линейном замедлении все движется с постоянной скоростью. Если мы изменим это на easy-in у нас будет что-то, что начинается медленнее и ускоряется по мере достижения конца анимации.
Шаги немного отличаются, так как мы можем указать анимации, чтобы она имела определенное количество отдельных кадров. Так, например, изменение замедления на steps (2) дало бы анимацию только с двумя состояниями: начальной и конечной.
Как steps () определяет каждый интервал шага на основе второго (и необязательного) параметра. Здесь наши новые значения вступают в игру и объединяют два существующих значения — start и end .
Начало и конец
Вместо того, чтобы углубиться в то, что означают начало и конец давайте перейдем к тому, чтобы сказать, что два из четырех вышеупомянутых новых значений фактически являются псевдонимами этих исходных значений:
-
jump-start === start -
jump-end === end
Префикс jump помогает нам более эффективно объяснить начало и конец слов. Когда мы используем start или jump-start мы говорим, что расчет пропускает начальную позицию. С помощью end / jump-end мы хотим пропустить конечную позицию.
Вы можете представить себе функцию steps (n) как создание снимков анимации с линейным замедлением с заданными интервалами и отображением этого снимка, пока не настало время показать следующий снимок. Поэтому, когда мы говорим, что нам нужно steps (4, jump-end) мы получим анимацию, которая делит нашу анимацию на четыре секции и снимает начальную позицию каждой из этих четвертей. С помощью steps (5, jump-start) мы получаем анимацию, разделенную на пять частей, и мы занимаем окончательную позицию в каждой части.
См. Перо .
Визуальная справка: начало прыжка, конец прыжка, линейный Дэн Уилсон (@danwilson)
на CodePen.
Почему вы хотите пропустить начальное или конечное состояние? Мы говорим браузеру о переходе из определенного состояния в другое определенное состояние с нашими ключевыми кадрами анимации, поэтому разве мы не хотим, чтобы оба этих состояния были представлены в нашей результирующей анимации?
Обороты
Становится понятнее осознать преимущества пропуска начала или конца, когда вы думаете о секундной стрелке на часах — мы, вероятно, хотели бы, чтобы анимация работала в течение 60 секунд для полного вращения ( 0deg до 360deg ) и ослабление шагов (60) . Это дает нам часы с секундной стрелкой, которые переходят к каждой метке на часах ( end-end / end предполагается, когда второй параметр не указан). Без скачка конечного состояния у нас была бы анимация, где начало и конец было бы на вершине ( 0deg ), и, следовательно, наши часы не были бы естественными, как это было бы оставайтесь на вершине в течение двух секунд и делайте остальные 58 секунд между ними.
См. Перо .
Визуальный справочник: шаги () и другие упрощения, полное вращение Дэна Уилсона (@danwilson)
на CodePen.
Спрайты
Другая важная причина — анимация со спрайтами. Вы можете иметь полосу кадров для анимации и преобразования положения из translateX (0) в translate (-100%) (или использовать фоновые позиции и т. Д.). Если вы переведете полные 100% ширины, конечное состояние будет вне поля зрения, поэтому мы снова прыгаем в конец и можем волшебным образом захватывать каждый кадр.
См. Перо .
Визуальный справочник: Шаги + Спрайты Дэна Уилсона (@danwilson)
на CodePen.
Это избавляет нас от необходимости делать дополнительную математику, чтобы не показывать окончательный (пустой) кадр.
Прыжки нет
Ах да. Новый материал.
Иногда пропуск состояния не совсем то, что мы ищем. Новая опция jump-none позволяет анимацию, которая не перепрыгивает начало или конец. Для любой анимации с числом шагов не менее двух будут представлены начальное и конечное состояние. Остальные шаги будут равномерно распределены между. Три шага будут иметь их эффективные снимки при 0% 50% и 100% .
Перемещение объекта
Простой вариант для этой опции — перемещение объекта по экрану. Возможно, мы захотим переместить объект из точки A в точку B с пошаговым эффектом. Ранее, когда были доступны только прыжки с начала начала или конца не было простого способа сообщить анимации, чтобы показывать начальную и конечную позиции с равными кадрами между ними. Добавление jump-none теперь дает нам эту способность.
См. Перо .
Визуальный справочник: прыжок без линейного ослабления Дэна Уилсона (@danwilson)
на CodePen.
При старых способах steps () вы, как правило, все еще могли бы достичь этого, но вам нужно было бы выполнить некоторую дополнительную математику и сделать перевод технически выходящим за рамки вашего начального или конечного состояния , Теперь это более просто, так как вы можете быть уверены, что ваши начальные и конечные состояния — это то, что вы явно их делаете.
Непрозрачность
Непрозрачность также может быть полезна, если убедиться, что начальное и конечное состояния всегда видны. Скажем, мы хотим сделать постепенное затухание с помощью пошаговой анимации непрозрачности с 1 до 0 . При переходе с на начало или на конец либо полностью непрозрачное, либо полностью прозрачное состояние никогда не будет отображаться. Но Jump-None убедитесь, что оба они видны. Анимация с шагами (2, прыжок-нет) будет иметь прямую анимацию включения / выключения (для создания чистого строба), а шагов (4, прыжок-нет) даст США непрозрачности 1 .6667 .3333 и 0 .
См. Перо .
Визуальный справочник: шаги () с непрозрачностью Дэна Уилсона (@danwilson)
на CodePen.
Прыжки на обоих
Мы прыгнули с начала, мы прыгнули с конца, и мы не прыгнули ни одного, что оставляет нас с прыжками обоих.
См. Перо .
Визуальный справочник: прыжок и линейное ослабление Дэна Уилсона (@danwilson)
на CodePen.
Мне будет интересно посмотреть варианты использования этой анимации. С одной стороны, он учитывает полноту (поскольку мы добавляем none мы могли бы также добавить обоих ), но он также имеет потенциал, так как параметры ослабления могут использоваться вне анимации , Варианты использования для использования смягчений в контексте градиентов кажутся более убедительными (для меня, в момент, когда я пишу эти слова), чем то, что jump-both обеспечивает в контексте анимации.
Поддержка браузера
В Chrome уже реализовано поведение jump-none в более раннем обсуждении спецификации frames () поэтому я подозреваю, что это не будет большим подвигом, чтобы перенести его в новое наименование. В Webkit и EdgeHTML его пока нет ни в одной предварительной версии. Поэтому пришло время ознакомиться и поэкспериментировать, а не идти ва-банк без отступлений.
Загрузка...
