задний план
День выбил код, получаю требование: Написать 10-секундный обратный отсчет.
После того, как я закончил писать его с таймером JavaScript, мой коллега Йонг и водитель только что закончили набирать воду. Я взглянул на него, а затем наклонился и сказал, что это тоже можно написать на CSS3, и для этого не нужно писать ни строчки JavaScript.
«Вам не нужно писать ни строчки JavaScript, вы можете написать чистый CSS3. У CSS3 такая скользкая операция!»
''Да! В CSS3-анимации есть функция steps(), вы можете проверить ее онлайн! "
"Осанка готова! Спешите проверить!"
animation-timing-function
Свойство CSS animation-timing-function определяет частоту, с которой анимации CSS выполняются во время каждого цикла анимации. Возможные значения: одна или несколько функций синхронизации (математических функций).Для анимации по ключевым кадрам функция синхронизации действует на цикл ключевого кадра, а не на весь цикл анимации, то есть от начала ключевого кадра до конца ключевого кадра. . Функция синхронизации анимации, определенная в блоке ключевого кадра, применяется к ключевому кадру; Кроме того, если ключевой кадр не определяет функцию плавности, используется функция плавности, определенная во всей анимации. --MDNвеб-документ
Глядя на этот длинный список свойств CSS3, я полагаю, что некоторые детские туфли не знакомы с этим свойством. Потому что, когда я впервые увидел его, у меня тоже был вопросительный знак на лице, что указывало на то, что я был знаком только с предыдущими.animation.
animation-timing-functionНа самом деле, я не помню, чтобы это было нормально, это принадлежитanimationединственное свойство , напримерbackground-imageЭто свойство css редко используется само по себе и используется больше для удобства написания кода.background： url('test.png') center no-repeat；Это сокращение определяет весь контекст.
Аналогично для всехanimationВ процессе использования, как правило, используетсяanimation: move 5s infinite ease both;Это сокращение класса определяет все свойство анимации. Такой сокращенный режим лаконичен и эффективен.
Позаимствовал метод использования, указанный на веб-сайте XXXschool, но не нашел нужных шагов(). Итак, давайте переключимся на MDN и посмотрим на введение атрибута:
Когда я переключаюсь на MDN, я вижу, что во введении к грамматике есть шаги(), и общий уровень количества не сильно отличается, а описание очень подробное.
PS: Конечно, обновление на XXXschool может быть медленнее, но его все же можно использовать в качестве простого запроса для повседневного использования.Рекомендуется перейти на веб-сайты, связанные с MDN и W3.org, для более глубокого исследования и изучения.
Функции замедления и шага
В основномanimation-timing-functionВ основном есть два типа функций:
1. Функция смягчения:
Он описывает, насколько быстро изменяется одномерное значение во время перехода или анимации. По сути, это позволяет вам самостоятельно определить кривую ускорения, чтобы скорость анимации могла изменяться во время анимации. Функции плавности определяют скорость, с которой выполняется эффект анимации, делая его более реалистичным.
Например, реальные объекты движутся в определенном ритме, вначале не очень быстром. Когда мы открываем ящик, мы сначала ускоряем его, а затем замедляем. Когда что-то падает, оно сначала падает все быстрее и быстрее, ударяется о землю, отскакивает и, наконец, снова падает на пол.
Большинство интерфейсных анимаций перехода используют эту функцию плавности, которая представляет собой подмножество кубических кривых Безье.
Я не буду здесь описывать функцию смягчения, если вы заинтересованы в том, чтобы порекомендовать два сайта для ваших друзей, чтобы бросить:
Памятка по функциям замедления Инструмент для онлайн-генерации кривой Безье
2. Ступенчатая функция
В математике функция вещественного числа называется стадийной функцией (или ступенчатой функцией), тогда ее можно записать как: линейная комбинация индексных функций с конечным интервалом. Неформальное утверждение состоит в том, что фазовая функция является кусочно-постоянной функцией, но она содержит много, но ограниченных фаз. --википедия
После прочтения этих письменных предисловий разразился поток отморозков Насколько сложно сделать шаги()?
свойство шагов()
Съев пачку острых полосок, захлестнула, искала информацию и продолжала читать документы. После нескольких поисков общее расположение выглядит следующим образом:
Прежде всего, функция смягчения похожа на ходьбу человека, точно так же. Он может быстро пройти, или быстро пробежать, или пробежать половину дистанции, а затем пройти. Таким образом, независимо от того, какой метод движения мы выбираем для управления, движение всегда завершается пошаговым перемещением ног человека.
Ступенчатая функция подобна человеку, который теряет ноги, но случайно обретает телепортацию. Он может телепортироваться в конечную точку, также он может телепортироваться на половину расстояния, а потом телепортироваться в конечную точку. Таким образом, пошаговая функция фокусируется на контроле нескольких телепортов для завершения.
Вы не чувствуете себя немного, это не такая головная боль, как у того, кто только что видел функцию!
Основной синтаксис:steps(<integer>[, [ start | end ] ]?)
Параметр один:integerКитайские средствацелое число, что показывает, что первый параметр является целым числом. В основном используется для указания количества интервалов функции и должно быть положительным целым числом (больше 0). Второй параметр: необязательный, принятьstartа такжеendДва значения, определяющие шаг изменения в начале или конце каждого интервала, по умолчанию равныend.
Keyword values : start-step,end-stepКроме того, я считаю, что детская обувь с лучшей памятью заметит два вышеуказанных ключевых слова в это время.step-startЭквивалентноsteps(1,start), анимация разбита на 1 шаг, а часть левой конечной точки является началом при выполнении анимации;step-endЭквивалентноsteps(1,end): Анимация делится на один шаг, выполнение анимации начинается с конечной точки, значение по умолчанию равноend.
На этот раз я позаимствовал диаграмму, предоставленную документом W3.org, сравнил ее с диаграммой вики и в сочетании с моим объяснением идеи друзей должны быть более ясными.
Герои мультфильмов:
После долгого разговора о теории, фактического случая нет, считается, что маленькие друзья не могут запомнить эти вещи, поэтому давайте сначала возьмем каштан!
Я просмотрел основные веб-сайты и обнаружил, что у приятеля на веб-сайте SegmentFault есть хороший пример, вставленный в teps(), переведенный за границу.Один из примеров очень хорош для организации и обучения.
Портал:[Перевод] Подробное объяснение использования steps() в анимации CSS
Следующая картинка состоит из 10 маленьких симпатичных мультяшных персонажей, поэтому наша задача состоит в том, чтобы заставить этого мультяшного персонажа двигаться.
Анализ мыслей:
Вся картинка составлена из 10 прямоугольников одинакового размера, каждый из которых точно такой же, как обертка мультяшных героев, стандартная идеальная картинка Спрайта. Затем вставьте это изображение спрайта в качестве фона в отображаемую блочную модель DIV. (PS: эта модель блока DIV имеет ту же ширину и высоту, что и маленький прямоугольник)
После этого background-position используется для управления положением карты Sprite.Например, 0s отображает первое действие по умолчанию, а через 100 мс background-position мгновенно меняет направление оси X и отображает второе действие, а затем через 100 мс покажите третье изображение. И так далее, используя человеческий глазпостоянство зренияТем самым формируя анимационный эффект.
Визуальная настойчивость (настойчивость видения) Феномен - это визуальный свет, генерируемый в сетчатке после легкой остановки мощности, по-прежнему сохраняется в течение периода времени явления, и его специфическое применение представляет собой фильм съемки и скрининг. Причина обусловлена скоростью реакции зрительного нерва. Анимация, пленка и другие визуальные медиа формирования и распространения. Видение фактически визуализации объектива глаз, чувствительных фоторецепторных клеток и оптического сигнала в электрический ток Neural, мозг, вызванный визуальным возвратом человека. Чувствительные фоторецепторные клетки полагаются на ряд чувствительного пигмента, светочувствительный краситель, который займет некоторое время, что сформировало механизм визуальной паузы. - взято из сети
Таким образом, помимо повторяющегося совместимого кода, анимация может быть достигнута с помощью примерно 10 строк кода.
.hi {
width: 50px;
height: 72px; // 矩形的宽高
background-image: url("http://s.cdpn.io/79/sprite-steps.png");
animation: play .8s steps(10) infinite; // 分10步完成0到-500px完成并无限重复
}
@keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
Финальные рендеры:
Просто код должен быть гораздо более лаконичным, чем JavaScript, разве это не похоже на открытие новой двери в мир!
Случай обратного отсчета:
После прочтения теории + демонстрации начните решать реальные рабочие требования: используйте функцию steps(), чтобы запустить демонстрацию обратного отсчета.
Моменты для размышления:
Согласно требованиям, этот 10-секундный обратный отсчет должен контролироваться до уровня 10 мс, четвертая цифра меняется каждые 10 мс. Тогда третья цифра меняется каждые 100 мс, вторая цифра меняется каждую 1 с, а первая цифра не меняется.
После прояснения идеи с ней легко справиться, а затем и с кодовой частью.
Прежде чем вводить код, сделайте карту спрайтов равного расстояния:
PS: Потому что предыдущее требование - сделать белую прозрачную картинку, а цвет фона статьи относительно светлый. Поэтому я временно вырезал черное фоновое изображение для справки.
HTML-код:
<div class="time">
<div class="s10 num"></div>
<div class="s0 num"></div>
<div class="spot">:</div>
<div class="ms0 num"></div>
<div class="ms10 num"></div>
</div>
CSS-код:
.time {
/*display: none;*/
position: absolute;
top: 2.05rem;
left: 4.73rem;
width: 3.22rem;
height: 0.57rem;
transform: scale(2);
}
.num {
position: absolute;
top: 0.2rem;
width: 0.28rem;
height: 0.37rem;
background: url(img/timeNum.png) no-repeat center;
background-size: cover;
background-position: 0 0;
}
.spot {
position: absolute;
top: 0.06rem;
left: 1.70rem;
color: #fff;
font-size: 24px;
line-height: 0.57rem;
}
.s10 {
left: 0.9rem;
}
.s0 {
left: 1.25rem;
-webkit-animation: sMove 10s steps(10, start);
}
.ms0 {
left: 2rem;
-webkit-animation: sMove 1s steps(10, start) infinite;
}
.ms10 {
left: 2.3rem;
-webkit-animation: sMove 100ms steps(10, start) infinite ;
}
@-webkit-keyframes sMove {
0% {
background-position: -2.80rem 0;
}
100% {
background-position: 0 0;
}
}
Финальные рендеры:
В коде видно, что та же базовая часть стиля, что и код CSS, удалена.s0,ms0,ms10Основная анимационная часть этих трех элементов в основном одинакова, но время выполнения и количество циклов различаются. Это кажется невероятным, настолько простым и элегантным, чтобы сделать это? Да, это так элегантно!
Разница во времени завершения:Поскольку изображение спрайта имеет 10 чисел, и за раз отображается только 1/10, для завершения цикла одного изображения требуется 10 шагов. Затем, как и в предыдущем анализе мыслейms10Для выполнения одного шага требуется 10 мс, а для завершения цикла из 10 шагов требуется 100 мс.ms0Для завершения цикла требуется 1 с,s0Для завершения цикла требуется 10 секунд.
Циклыесть другms10,ms0Вы можете спросить, а почему бы не дать соответствующее количество петель, а дать бесконечные петли. Конечно, также можно дать вам фиксированные параметры Причина, по которой я даю этот бесконечный цикл, заключается в том, что я ленив и не хочу считать их циклы.
Я больше привык даватьs0добавить событие слушателяwebkitAnimationEnd,потому чтоs0Количество циклов не указано, поэтому значением по умолчанию является цикл один раз, когдаs0После того, как анимация сделана, мне просто нужно послушатьwebkitAnimationEndЗапускается следующая программа.
резюме:
Отлично! Вышеизложенное — это мое простое понимание steps() в анимации CSS3 и право бросить кирпич, чтобы привлечь нефрит великих богов. Как использовать steps() для различных трюков в дальнейшем, зависит от самих судей!
Оригинальная статья, письмо ограничено, талант редкий, а обучение поверхностное.Если в статье есть какие-либо неточности, я приветствую вас снова и снова. (Есть хорошая поговорка, но важные слова надо сказать трижды.)
PS: Для полного кода Blogdemo вы можете прочитать его на моем Github.Исходный адрес демо-портала
Я автомобильная палка, и я смотрю на себя.