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

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

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

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

Демо-версия вдохновлена ​​этим прекрасным снимком Дрибблла Кристофера Джонса о анимированном маркере местоположения..

1. Создание листьев

Форма маркера местоположения состоит из пяти (назовем их) листов. Чтобы создать овальная форма листа, давайте использовать граница радиуса CSS свойство граница радиуса одного угла состоит из двух радиусов, горизонтальный и вертикальный, как показано ниже.

граница радиуса свойство имеет много разных синтаксисов. Мы будем использовать более сложный для формы маркера:

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

В этом синтаксисе горизонтальные и вертикальные радиусы сгруппированы вместе; час & v представляют горизонтальные и вертикальные радиусы, и T, L, б & р представляют верхний, левый, нижний и правый углы. Например, VBL обозначает вертикальный радиус нижнего левого угла.

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

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

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

HTML

CSS

.pinStarLeaf ширина: 60 ​​пикселей; высота: 120 пикселей; радиус границы: 50% / 30% 30% 70% 70%; цвет фона: # B8F0F5; 

2. Умножение листьев

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

HTML

CSS

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

3. Захват события клика и улучшение эстетики

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

HTML

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

CSS

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

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

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

 #pinStarCenterChkBox: флажок ~ .pinStarLeaf переход: преобразовать 1с линейный;  #pinStarCenterChkBox: проверено ~ .pinStarLeaf: nth-of-type (5) transform: rotatez (35deg);  #pinStarCenterChkBox: проверено ~ .pinStarLeaf: nth-of-type (4) transform: rotatez (105deg);  #pinStarCenterChkBox: проверено ~ .pinStarLeaf: nth-of-type (3) transform: rotatez (180deg);  #pinStarCenterChkBox: проверено ~ .pinStarLeaf: nth-of-type (2) transform: rotatez (255deg);  #pinStarCenterChkBox: проверено ~ .pinStarLeaf: nth-of-type (1) transform: rotatez (325deg);  

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

4. Модификация центра вращения

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

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

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

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

Понимание того, как работает ubic-Bezier ()

Теперь, чтобы добавить эффект отскока, нам нужно заменить линейный функция синхронизации с кубических Безье () в переход объявления в нашем файле CSS.

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

Синтаксис для кубических Безье () функция заключается в следующем, d а также T являются расстояние а также время, и их значения обычно находятся в диапазоне от 0 до 1:

кубический Безье (t1, d1, t2, d2)

Даже если объяснить CSS кубических Безье () с точки зрения расстояния и времени не является точным, намного проще понять это таким образом.

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

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

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

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

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

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

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

Давайте использовать 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.

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

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

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

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

Хотя вам, вероятно, не нужно это длинное (но редкое) объяснение кубических Безье () на данный момент, я думаю, это поможет вам лучше понять эту функцию. Теперь, где сильный удар приходит во всем этом?

5. Добавление эффекта отскока с помощью Cubic-Bezier ()

основные параметры для эффекта отскока являются расстояния, d1 а также d2. d1 ценность менее 1 берет коробку за точкой А прежде чем продолжить к B в начале анимации.

d2 ценность более 1 берет коробку за точкой B перед возвращением отдохнуть в B в конце анимации. Отсюда эффект отскока назад и вперед.

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

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

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

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