CSS3 Animation – Создание разветвления с эффектом отскока с использованием кривой Безье

Знаете ли вы, что геометрические преобразования добавляются в элементы HTML с преобразованиеСвойства CSS, такие как масштаб, наклон и поворот, можно анимировать? Их можно анимировать с помощью переход собственность и @keyframes анимации, но что еще круче, так это то, что анимированные трансформации можно взять на ступеньку выше с добавлением небольшого эффекта отскока, используя кубических Безье () функция времени

В двух словах, Cubic-Bezier () (в CSS) является функция времени для переходов. Он определяет скорость перехода и, помимо прочего, может также использоваться для создания эффекта отскакивания в анимации.

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

Читайте также: Взгляд в: Cubic-Bezier в переходе CSS3

Увидеть перо CSS разветвление вращения с отскоком Прети (@rpsthecoder) на CodePen,

Демо вдохновлено этой прекрасной Дриббл выстрел по Кристофер Джонс о анимированном маркере местоположения.
ИЗОБРАЖЕНИЕ: Dribble1. Создание листьев
Форма маркера местоположения состоит из пяти (давайте назовем их) листов. Чтобы создать овальную форму листа, давайте использовать граница радиуса CSS свойство Граница-радиус одного угла состоит из двух радиусов, горизонтального и вертикального, как показано ниже.
ИЗОБРАЖЕНИЕ: W3CСвойство border-radius имеет много разных синтаксисов, Мы будем использовать более сложный для формы маркера:

border-radius: htl htr hbr hbl / vtl vtr vbr vbl;

В этом синтаксисе горизонтальные и вертикальные радиусы сгруппированы вместе; h & v представляют горизонтальные и вертикальные радиусы, а t, l, b & r представляют верхний, левый, нижний и правый углы. Например, vbl обозначает вертикальный радиус нижнего левого угла.

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

Чтобы создать вертикальную овальную форму, сохраните горизонтальные радиусы на 50% для всех углов и отрегулируйте вертикальные, пока не увидите желаемую форму. Горизонтальная сторона будет использовать только одно значение: 50%.

Вертикальные радиусы верхнего левого и верхнего правого углов будут составлять 30%, в то время как нижний левый и нижний правый углы будут использовать значение 70%.

HTML

CSS
.pinStarLeaf {
  ширина: 60 ​​пикселей;
  высота: 120 пикселей;
  радиус границы: 50% / 30% 30% 70% 70%;
  цвет фона: # B8F0F5;
}
ИЗОБРАЖЕНИЕ: форма маркера (вертикальный овал) 2. Умножение листьев
Поскольку маркер будет разветвляться, показывая пять листов, мы создадим еще четыре копии листа разных цветов и с абсолютное позиционирование для того, чтобы сложить их друг на друга.

HTML

CSS
#pinStarWrapper {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  положение: относительное;
}
.pinStarLeaf {
    ширина: 60 ​​пикселей;
    высота: 120 пикселей;
    положение: абсолютное;
    радиус границы: 50% / 30% 30% 70% 70%;
    слева: 0;
    справа: 0;
    верх: 0;
    низ: 0;
    наценка: авто;
    непрозрачность: .5;
}
.pinStarLeaf: п-го из-типа (1) {
  цвет фона: # B8F0F5;
}
.pinStarLeaf: п-го из-типа (2) {
  цвет фона: # 9CF3DC;
}
.pinStarLeaf: п-го из-типа (3) {
  цвет фона: # 94F3B0;
}
.pinStarLeaf: п-го из-типа (4) {
  цвет фона: # D2F8A1;
}
.pinStarLeaf: п-го из-типа (5) {
  цвет фона: # F3EDA2;
}

1. Захват события клика и улучшение эстетики
   Давайте добавим флажок с идентификатором #pinStarCenterChkBox, чтобы зафиксировать событие нажатия. Когда флажок установлен, листья разветвляются (вращаются). Нам также нужно добавить белый кружок с идентификатором #pinStarCenter для эстетики. Он будет расположен сверху маркера, и он будет центральной частью маркера местоположения.

HTML

Мы ставим флажок до, а белый круг после листьев:

CSS

Сначала мы устанавливаем основные стили для флажка и круга покрытия:

#pinStarCenter, #pinStarCenterChkBox {
    ширина: 45 пикселей;
    высота: 50 пикселей;
    положение: абсолютное;
    слева: 0;
    справа: 0;
    верх: -60px;
    низ: 0;
    наценка: авто;
    цвет фона: #fff;
    радиус границы: 50%;
    курсор: указатель;
}
#pinStarCenter, .pinStarLeaf {
  события указателя: нет;
}
#pinStarCenter> input[type=”checkbox”]{
    ширина: 100%;
    высота: 100%;
    курсор: указатель;
}

Поскольку каждый лист будет вращаться вдоль оси z под разными углами, нам нужно установить преобразование: rotatez (); Свойство соответственно, чтобы создать форму звезды. Мы также применяем переход свойство для эффекта вращения (точнее мы используем переход: преобразование линейного правила 1s для листьев).

#pinStarCenterChkBox: проверено ~ .pinStarLeaf {
    переход: преобразование 1с линейный;
}
#pinStarCenterChkBox: проверено ~ .pinStarLeaf: nth-of-type (5) {
    преобразование: rotatez (35 градусов);
}
#pinStarCenterChkBox: проверено ~ .pinStarLeaf: nth-of-type (4) {
    преобразование: rotatez (105 градусов);
}
#pinStarCenterChkBox: проверено ~ .pinStarLeaf: nth-of-type (3) {
    преобразование: rotatez (180 градусов);
}
#pinStarCenterChkBox: проверено ~ .pinStarLeaf: nth-of-type (2) {
    преобразование: rotatez (255 градусов);
}
#pinStarCenterChkBox: проверено ~ .pinStarLeaf: nth-of-type (1) {
    преобразование: rotatez (325 градусов);
}

Если вы посмотрите на CSS выше, вы можете увидеть из наличия #pinStarCenterChkBox: флажок ~ общий выбор сестер что мы добавляем свойства перехода и преобразования только тогда, когда флажок установлен (когда пользователь щелкнул маркер).
4. Модификация центра вращения
По умолчанию центр вращения расположен в центре повернутого элемента, в нашем случае – в центре листьев. Нам нужно переместить центр преобразования во внутренний конец листьев. Мы можем сделать это с помощью преобразовании координат CSS свойство, которое изменяет положение преобразованных элементов.

Чтобы заставить эффект вращения работать должным образом, давайте добавим два следующих правила к селектору .pinStarLeaf в нашем файле CSS:

.pinStarLeaf {
    источник преобразования: 30px 30px;
    переход: преобразование 1с линейный;
}

Давайте посмотрим на нашу анимацию в действии – на данный момент, пока без эффекта отскока. Нажмите на белый кружок в верхней части маркера.

Увидеть перо Вращение разветвления CSS Прети (@rpsthecoder) на CodePen,
Понимание того, как работает ubic-Bezier ()
Теперь, чтобы добавить эффект отскока, нам нужно заменить линейный функция времени с cubic-bezier () в объявлениях перехода в нашем файле CSS.

Но сначала давайте разберемся в логике функции синхронизации cubic-bezier (), чтобы вы могли легко понять эффект отскока.

Синтаксис для функции cubic-bezier () следующий: d и t – это расстояние и время, а их значения обычно находятся в диапазоне от 0 до 1:
кубический Безье (t1, d1, t2, d2)
Несмотря на то, что объяснение CSS cubic-bezier () с точки зрения расстояния и времени не является точным, гораздо легче понять это таким образом.

Предположим, есть коробка, которая перемещается из пункта А в пункт Б за 6 секунд. Давайте использовать следующую функцию синхронизации cubic-bezier () для перехода со значениями t1 = 0 и d1 = 1.

/ * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * /
кубических Безье (0,1,0,0)

Почти мгновенно коробка перемещается из А в среднюю точку, а остальное время занимает до Б.

Увидеть перо кубических Безье (0,1,0,0) Прети (@rpsthecoder) на CodePen,

Давайте попробуем тот же переход со значениями t1 = 1 и d1 = 0.

/ * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * /
кубических Безье (1,0,0,0)

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

Увидеть перо кубических Безье (0,1,0,0) Прети (@rpsthecoder) на CodePen,

Как видите, d1 контролирует расстояние между A и средней точкой, а t1 – время, необходимое для достижения средней точки от A.

Давайте использовать d2 и t2 сейчас. И t1, и d1 будут равны 1, а t2 = 1 и d2 = 0.

/ * t1 = 1, d1 = 1, t2 = 0, d2 = 1 * /
кубических Безье (1,1,0,1)

Коробка перемещается почти наполовину за 3 секунды (из-за t1 = 1, d1 = 1) и мгновенно переходит к точке B.

Увидеть перо кубических Безье (0,1,0,0) Прети (@rpsthecoder) на CodePen,

Последний пример меняет предыдущие значения t2 и d2:

/ * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * /
кубических Безье (1,1,1,0)

Коробка перемещается почти наполовину за 3 секунды (из-за t1 = 1, d1 = 1), затем еще 3 секунды не двигаются слишком много, прежде чем прыгнуть в точку B.

Увидеть перо кубических Безье (0,1,0,0) Прети (@rpsthecoder) на CodePen,

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

Хотя вам, вероятно, не нужно было этого длинного (но разреженного) объяснения cubic-bezier () на данный момент, я думаю, что это поможет вам лучше понять эту функцию. Теперь, где сильный удар приходит во всем этом?
5. Добавление эффекта отскока с помощью Cubic-Bezier ()
Ключевыми параметрами для эффекта отскока являются расстояния d1 и d2. Значение d1 меньше 1 занимает поле позади точки A, прежде чем перейти к B в начале анимации.

Значение d2 больше 1 поднимает прямоугольник за точку B, прежде чем вернуться в B в конце анимации. Отсюда эффект отскока назад и вперед.

Теперь я добавлю значения cubic-bezier () непосредственно в нашу демонстрацию вместо прежнего линейного значения свойства transition и позволю вам увидеть результаты.

#pinStarCenterChkBox: проверено ~ .pinStarLeaf {
    переход: преобразование 1с кубического Безье (.8, -. 5, .2,1.4);
}

Вот конечный результат, анимация только для CSS с эффектом отскока:

Увидеть перо CSS разветвление вращения с отскоком Прети (@rpsthecoder) на CodePen,

Для сравнения и лучшего понимания эффекта отказов, вот как ведет себя значение cubic-bezier () анимации, когда оно применяется к нашему блоку примера:

Увидеть перо кубических Безье (0,1,0,0) Прети (@rpsthecoder) на CodePen,