Ключевые кадры свойства CSS-анимации, полный анализ ключевых кадров

Колонка давно не обновлялась. полгода? Заняты взлетом во второй половине года или, в буквальном смысле, запуском? Единственное небольшое личное время, которое у меня есть, я пожертвовал его Python в первой половине года, а теперь я почти забыл о нем (песня «Liang Liang» была отдана мне), и я внес его в JavaScript в Вторая половина года. Наконец-то я набрался смелости, чтобы начать изучать систему. JS работает (переключите канал, начинается «Мужество» Лян Цзинру). Первоначально я хотел ждать и ждать, пока я закончу изучение webapi, и я сделал большой шаг: анимация svg + CSS и JavaScript так же сильны, как тигр. Однако после наблюдения за дискуссией в авторской группе Nuggets я вдруг почувствовал, что я совершенно незнакомец (стоит ли помещать сюда Цай Цзянью?), поэтому я написал еще одну статью, чтобы освежить свое ощущение существования.

Эта статья изначально была написана как небольшой отрывок из буклета "SVG+CSS Animation".По разным необъяснимым причинам буклет застрял, застрял... Время отправления далеко, но ключевые кадры используются в качестве управляющих анимаций в разных Важный элемент состояния времени определяет окончательную форму семидесяти двух изменений, поэтому эта колонка обновлений начинается с него. Что же касается буклета, то, если его можно раздать, было бы хорошо заменить его другими кейсами, о которых речь пойдет позже.

Базовую концепцию ключевых кадров здесь можно опустить, а нижеследующее полно галантереи.

Кейс: Круг, который никогда не перестает двигаться вперед

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

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

1. Начнем с самого простого

Часть CSS определяет самую простую анимацию смещения, выполненную за 4 секунды, с линейной скоростью.case-keyframe demo 1-basic.

@keyframes  move{
0%{transform:translateX(0)}
100%{transform:translateX(800px)}
}
.c_move{animation:move 4s linear both} /*both:运动结束后停留在终点*/

Это вступает в игру в основном, когда определены анимации бесконечного цикла.

Базовые настройки естественно приводят к безликой и ничем не примечательной базовой анимации.

2. Отложенный старт (выкинуть свойство animation-delay)

Ниже я хочу, чтобы круг оставался в начальной точке в течение 2 с, а затем начал двигаться, первая реакция — использовать задержку в свойстве анимации.animation-delay, определите время как 2 с, хорошо? Хорошо, но вот более продвинутый подход. Мы использовали много процентов при определении ключевых кадров, где процентные значения представляютвременные рамки, то естьКлючевые кадры определяют свойства состояния узлов в разное время.Давайте взглянем на другое изображение. Это изображение не следует путать с демонстрацией пути выше. Это изображение временной шкалы анимации.

Позволить кругу оставаться в начальной точке в течение 2 секунд — это поверхностное утверждение, которое переведено на наш язык определения анимации, то есть в течение первых 2 секунд в 4-секундном цикле анимации эффект анимации отсутствует. Итак, позвольте мне определить правила анимации следующим образом:

@keyframes  move{
0%{transform:translateX(0)}
50%{transform:translateX(0px)}
100%{transform:translateX(800px)}
}

По сравнению с разделением на приведенной выше временной шкале легче понять, что после пребывания в начальной точке в течение 2 с эффект анимации всей анимации завершается в следующие 2 с. Здесь, или проще напишите как0%, 50%{transform:translateX(0)}, одинаковые атрибуты можно объединять вместе, разделяя запятыми.case-keyframe demo-delay start

Так что впредь отбрасываем в анимации атрибут времени начала анимации animation-dalay, его вполне можно заменить определением времени ключевых кадров, и нет никакой разницы в участии в цикле.

3. Закончить раньше

На основе отсроченного начала можно вытолкнуть досрочное завершение. Чтобы различать, я позволил анимации закончиться на 3 секунды раньше. Как обычно, сначала нарисуйте анализ временной оси.

Соответствующие ключевые кадры определяются следующим образом:

@keyframes  move{
0%{transform:translateX(0)}
25%，100%{transform:translateX(800px)}
}

Конечный результат круга должен быть в 4 раза больше скорости, чтобы сделать все возможное, чтобы завершить путешествие (в конце концов, исходное время 4 с должно быть сжато до 1 с для завершения), а затем дождаться окончания всего времени анимации в конце. точка.case-keyframe demo-early end

4. Держитесь посередине

Эти готовые остановки теперь готовы к работе, я хочу, чтобы круг двигался следующим образом: останавливайтесь только на 1 секунду на первой остановке (после перемещения на 200 пикселей) для всего пути, для небольшого исправления. Как выглядит отображение на временной шкале?

Здесь есть некоторые странные цифры, которые нужно объяснить. Давайте сначала проясним, мы анализируем ось времени и, наконец, получаем узел времени. Для нашего дизайна, если мы остаемся на 1 с, время движения составляет 3 с, а время 3 с делится на две части, первая часть — первые 200 пикселей, а вторая часть — последние 600 пикселей, потому что это линейная равномерная скорость. , поэтому, когда ось времени разделена на A. После трех частей +B+C запустите 200 пикселей в период времени A и 600 пикселей в период времени C, рассчитайте время, соответствующее A, равное 0,75 с, время, соответствующее C, равно 2,25. с, время B - это время пребывания 1 с, а затем преобразуется в соответствующий процент, это метод расчета последних двух узлов времени в середине. После завершения парсинга временной шкалы определение части CSS готово:

@keyframes  move{
0%{transform:translateX(0)}
18.75%, 43.75%{transform:translateX(200px)} /*对应停留的1s*/
100%{transform:translateX(800px)}
}

случай-демонстрация ключевого кадра-первая станция остается на 1с

5. Прыгай как червоточина

Чтобы увеличить сложность, больше не проблема остановиться в любой точке посередине.Оставаться в одной точке и в нескольких точках - та же идея.Теперь я позволяю кругу прыгать вперед.После входа на первую станцию остановитесь на 1с и пересечь вторую станцию, войти прямо на третью станцию, остаться на 1 с и завершить путешествие. По принципу складывания пространства переходы происходят на 200 и 600. График анализа:

Сосредоточьтесь на красной части, там момент времени перехода, который смещен на 200px без изменения времени. Согласно анализу таймлайна, CSS-часть теоретически выглядит так:

@keyframes  move{
0%{transform:translateX(0)}
25%,50%{transform:translateX(200px)}
50%,75%{transform:translateX(600px)}
100%{transform:translateX(800px)}
}

Каков эффект?

Это полностью отличается от того, что я себе представлял, в чем проблема? Он находится в узле 50% времени. Браузер не знает ваших настоящих мыслей. Он будет думать только о том, что вы определили его неправильно. Когда есть два одинаковых ключевых кадра 50% с разными значениями атрибутов, первый будет автоматически проигнорировано. , и последнее допустимое значение будет преобладать, поэтому приведенное выше определение эквивалентно сообщению, передаваемому браузеру следующим образом:

@keyframes  move{
0%{transform:translateX(0)}
25%{transform:translateX(200px)}
50%,75%{transform:translateX(600px)} /*在位移600px后停留1s*/
100%{transform:translateX(800px)}
}

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

@keyframes  move{
0%{transform:translateX(0)}
25%,50%{transform:translateX(200px)}
50.0001%,75%{transform:translateX(600px)} 
100%{transform:translateX(800px)}
}

см. выше50.0001%В этот момент, угадайте, что произошло? Это так называемый метод «обмануть браузер», описанный выше. В интервале 50%→50,0001% произошло изменение смещения на 400 пикселей (200→600). Таким образом, вы получите следующий эффект:case-keyframe demo-jump

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

Суммировать

Прочитав приведенные выше репрезентативные примеры, появилось ли у вас новое понимание определения ключевых кадров? Вы можете почувствовать, что для двух требований «отложенного начала» и «раннего завершения» вполне возможно определить время задержки. время цикла анимации для достижения того же эффекта, однако для эффекта анимации с бесконечным циклом задержка запуска всегда работает только один раз, и этот параметр свойства больше не поддерживается, когда анимация снова и снова начинает входить в цикл. Так что попробуйте сделать это с определениями ключевых кадров, если сможете.

Постучать по доске, нарисовать ключ

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