В данном уроке представлен пример мощности CSS3. Мы сделаем 3D мяч, который будет выглядеть очень реалистично с помощью свойств CSS3 и добавим немного анимаций для формирования визуального эффекта.

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

Разметка HTML

Начнем с разметки HTML

У нас есть три простых элемента div . “#ballWrapper ” - основной контейнер, который содержит наш мяч. Данный элемент div определяет положение мяча и высоту на экране. Элемент “#ball ” формирует разметку для мяча, а “#ballShadow ” содержит тень отдельно.

CSS

В текстах кода в уроке не используются префиксы для большей наглядности.

Сначала установим ширину и высоту основного контейнера. Он будет занимать положение по центру экрана:

#ballWrapper { width: 140px; height: 300px; position: fixed; left: 50%; top: 50%; margin: -150px 0 0 -70px; }

Координаты контейнера имеют значения ’50%’, а для полей используются отрицательные значения равные половине высоты и ширины. Так мяч центрируется на экране.

Теперь определим стили для мяча.

#ball { width: 140px; height: 140px; border-radius: 70px; background: linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%); box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), inset -2px -1px 40px rgba(0,0,0,0.4), 0 0 1px #000; }

Мы устанавливаем для мяча равные ширину и высоту, а для свойства ‘border-radius ’ значение ’70px ’ (которое является половиной оригинальной высоты и шириной). В итоге получается круглая форма.

Другой интересный момент - фон. Элемент получает линейный фон и 3 разных уровня теней, чтобы сформировать 3D эффект. Первый уровень тени предназначен для формирования темной зоны внизу мяча. Второй уровень формирует рассеянное свечение также внизу мяча. А третий уровень формирует размытую тень позади контура мяча.

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

#ball::after { content: ""; width: 80px; height: 40px; position: absolute; left: 30px; top: 10px; background: linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); border-radius: 40px / 20px; }

Используется псевдо-элемент CSS ::after , который получает линейный градиент с непрозрачностью. В дополнение устанавливаем скругленные углы рамки ’40px / 20px’ формируя овальную форму.

Теперь установим тень мяча:

#ballShadow { width: 60px; height: 75px; position: absolute; z-index: 0; bottom: 0; left: 50%; margin-left: -30px; background: rgba(20, 20, 20, .1); box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); border-radius: 30px / 40px; }

Здесь снова используются свойства для центрирования тени. Но она смещается вниз элемента ‘#ballWrapper’. Также добавляет полупрозрачный фон, тень и скругленная рамка.

Анимация

Теперь сформируем эффект.

Начнем с добавления свойства анимации для всего мяча:

#ball { animation: jump 1s infinite; }

Здесь определяется имя анимации (jump ), ее длительность (1 секунда) и количество раз выполнения (в нашем случае значение ‘infinite’ определяет бесконечное выполнение анимации).

А вот код анимации:

@keyframes jump { 0% { top: 0; } 50% { top: 140px; height: 140px; } 55% { top: 160px; height: 120px; border-radius: 70px / 60px; } 65% { top: 120px; height: 140px; border-radius: 70px; } 95% { top: 0; } 100% { top: 0; } }

Здесь происходит работа со свойством ‘top’ мяча. Начиная с 0 до 160 и назад до 0. В середине анимации также также изменяется свойство ‘border-radius’ - так формируется "удар" мяча о фон.

А затем определяем анимацию тени:

#ballShadow { animation: shrink 1s infinite; }

Здесь используются те же значения, что и для мяча, только с другой анимацией, которая называется shrink :

@-keyframes shrink { 0% { bottom: 0; margin-left: -30px; width: 60px; height: 75px; background: rgba(20, 20, 20, .1); box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); border-radius: 30px / 40px; } 50% { bottom: 30px; margin-left: -10px; width: 20px; height: 5px; background: rgba(20, 20, 20, .3); box-shadow: 0px 0 20px 35px rgba(20,20,20,.3); border-radius: 20px / 20px; } 100% { bottom: 0; margin-left: -30px; width: 60px; height: 75px; background: rgba(20, 20, 20, .1); box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); border-radius: 30px / 40px; } }

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

В завершении добавим эффект для нажатия кнопки мыши. Мяч будет удаляться от нас. Для достижения эффекта используем псевдо-класс ‘:active ‘, добавляется трансформация и изменение свойства ‘scale’:

#ballWrapper { transform: scale(1); transition: all 5s linear 0s; } #ballWrapper:active { transform: scale(0); }

Трансформация значения свойства ‘scale’ (от 1 до 0)формирует иллюзию удаления мяча от зрителя.

Задание 3

Сложная Анимация.

Прыгающий мяч

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

1. Загрузите файл Ball.MAX. Определим задачу как создание сложной анимации мяча с имитацией упругих отскоков и деформаций.

2. Прежде всего, необходимо создать служебный объект, задающий амплитуду отскоков объекта «Мяч Футбольный» от плоскости «Поле». Перейдите в панель Create (Создать) и выберите кнопкой Helpers (Служебные Объекты) нужную категорию создаваемых объектов. Затем, щелкнув на кнопке Dummy (Служебный) из свитка Object Type (Тип Объекта), создайте вспомогательный куб рядом с мячом (рис. 9.28).

РИСУНОК 9.28. Создание Dummy (Служебного) объекта 3.

Далее установите Pivot Point (Опорную Точку) нового объекта в положение, выровненное с его нижней гранью. Для этого перейдите в режим редактирования опорных точек щелкнув последовательно на закладке панели Hierarchy (Иерархия), кнопках Pivot (Опора) и Affect Pivot Only (Работать Только с Опорной Точкой).

В результате в видовых окнах появится тройка утолщенных осей и, используя кнопку Align (Ориентация) из выполните перенос опорной точки куба «Dummy-Мяч». После левого щелчка на самом кубе появится диалоговое окно Align Selection (Выровнять Выделение), где необходимо выбрать переключатель Pivot Point (Опорная Точка) в группе Current Object (Текущий Объект) (им является опорная точка куба).

Далее выберите переключатель Minimum (Минимум) в группе Target Object (Целевой Объект) (им станет нижняя грань куба), а также включите флажок Y Position (Положение по Оси Y) (рис. 9.29).

РИСУНОК 9.29. Выравнивание Опорной Точки по нижней грани

После подтверждения ввода выйдите из режима редактирования опорных точек, щелкнув еще раз на кнопке Affect Pivot Only (Работать Только с Опорной Точкой). Теперь вам достаточно разместить куб «Dummy-Мяч» на поверхности плоскости «Поле», что можно сделать, повторив команду Align (Ориентация) и указав в диалоговом окне соответственно переключатели Pivot Point (Опорная Точка) и Maximum (Максимум), а также включив флажок Y Position (Положение по Оси Y). Затем выполните выравнивание куба по центру объекта «Мяч Футбольный», используя оси X, Z и в результате вспомогательный объект «Dummy-Мяч» будет размещен в исходное положение анимации.

4. Выполните связывание модели мяча со вспомогательным кубом по правилу «родитель-потомок». Для этого необходимо включить режим Select and Link (Выбрать и Связать) одноименной кнопкой в Main Toolbar (Основной Панели), последовательно щелкнуть на мяче и, нажав левую кнопку мыши, перейти на куб, а затем отпустить.

5. Включив кнопку Toggle AutoKey Mode (Переключатель в режим автоматического создания ключей), поднимите куб над плоскостью приблизительно на 190-200 единиц. Обратите внимание, что связанный с ним мяч переместится в ту же точку Переместитесь в кадр с номером 14 и, опустите куб в первоначальную точку на плоскость. Мяч тоже переместится в эту точку

6. Вызовите окно Track View - Curve Editor и задайте тип цикла Ping-Pong (Циклически Зеркальный) для анимации перемещения куба, используя соответствующие инструменты. Выполнив Эскиз Анимации, вы сможете увидеть циклическое подпрыгивание мяча на плоскости.

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

Первая задача решается использованием специального механизма Мах - присвоения Multiplier Curve (Кривой Множителя) контроллеру анимации Position (Перемещения) объекта (эта кривая представляет собой график влияния и задает степень усиления / ослабления основного контроллера). Ее значения перемножаются с величинами параметра анимации и для генерации затухания должны плавно изменяться от 1 до 0). Для этого необходимо выбрать требуемую строку параметра анимации Position (Перемещения) куба в Окне Дерева Иерархии и выбрать в диалоговом окне из меню Curves (Кривые) команду Apply Multiplier Curve (Применить Кривую Множителя).

В результате возникнет одноименный подчиненный контроллер со своим треком и двумя ключами в кадрах 0 и 100. Значения ключей при создании равно 1, поэтому измените только последний из них на нулевое значение, а также задайте графики функции до и после ключа. Для придания большей плавности кривой переместите ключ из кадра 100 в 120-й кадр (рис. 9.30).

8. Поступательная составляющая движения мяча добавляется непосредственным заданием конечного положения в кадре с номером 100, поэтому, выбрав объект «Мяч Футбольный» и включив кнопку Toggle AutoKey Mode, перейдите в финальный кадр и переместите его вдоль оси X приблизительно до координаты 233 единицы по этой же оси. Контролируйте изменение координат по статусной строке или по диалоговому окну Move Transform Type-In (Точный Ввод Параметров Трансформаций).

Для наглядности активизируйте режим отрисовки траектории мяча в видовых окнах. Чтобы выполнить это, вызовите правым щелчком на модели мяча диалоговое окно Properties (Свойства) и включите флажок Trajectory (Траектория) в группе Display Properties (Свойства Показа) (рис. 9.31).

РИСУНОК 9.30. Внешний вид Функциональной Кривой Множителя

РИСУНОК 9.31. Включение отображения Траектории Анимации

9. Создайте Эскиз Анимации и проанализируйте полученные результаты. Безусловно, движение мяча требует добавления некоторых важных нюансов. Поэтому следующими действиями будут создание упругих деформаций мяча при его столкновениях с плоскостью и замедления движения по траектории, вызванные этими деформациями.

10. Выберите вспомогательный куб и откройте окно Track View -Curve Editor. Найдите трек Transform (Трансформации) объекта «Dummy-Мяч» в Окне Дерева Иерархии, раскройте его и выберите параметры анимации Position (Перемещение) и Scale (Масштаб) левым щелчком с нажатой клавишей .

В Окне Треков войдите в режим создания ключей, щелкнув на модальной кнопке Add Keys (Добавить Ключи) на Панели Инструментов диалогового окна. Создайте три ключа на функциональной кривой масштаба, отрисовываемой как прямая линия, проходящая через вертикальную координату 100 единиц. Перейдите в режим Move Keys (Перемещение Ключей), щелкнув на одноименной модальной кнопке, и переместите последовательно созданные ключи в кадры с номерами 13, 14 и 17. Щелкните правой кнопкой мыши последовательно на каждом ключе и, в появишихся диалоговых окнах, задайте форму кривой и введите следующие значения:

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

Выполните копирование тройки созданных ключей во вторую и третью точки соприкосновения мяча с плоскостью. Эти точки характеризуются нулевым значением функциональной кривой Position (Перемещение) и располагаются соответственно в 42 и 70 кадрах.

Перейдите в кадр с номером 41 и для создания копии ключей выберите их на кривой Scale (Масштаб) (левым щелчком с клавишей ).

11. Включите режим горизонтального перемещения, выбрав из списка кнопок Move Keys (Перемещение Ключей) требуемую. Затем, удерживая клавишу , перетащите выбранные ключи вправо и выполните их точное перемещение в кадр 41.

Повторите аналогичные действия для кадра 69, и в результате должен получиться график анимации трех подскоков мяча (рис. 9.32).

РИСУНОК 9.32. Функциональные кривые Анимации Масштаба

12. Однако каждый последующий отскок мяча должен быть слабее, следовательно, необходимо уменьшить величины масштабных коэффициентов для ключей трека Scale (Масштаб) в кадрах 42 и 70:

13. Теперь остается лишь внести корректировку в траекторию движения мяча путем добавления замедления и изменений кривизны функциональной кривой, продолжая работать с вспомогательным объектом «Dummy-Мяч».

Выберите первый ключ на треке Position (Перемещение) правым щелчком и установите следующие значения параметров контроллера ТСВ Position (TCB Перемещение):

Далее перейдите к параметрам следующего ключа, нажав на правую стрелку возле номера кадра в диалоговом окне Key Info (Параметры Ключа), и настройте их так: после чего траектория мяча с учетом деформаций приобретет законченный вид (рис. 9.33).

РИСУНОК 9.33. Результирующая Траектория Анимации Мяча

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

Что вы будете создавать

В этом уроке я научу вас создавать анимацию прыгающего мяча, которой вы будете гордиться!

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

Нарисуйте позиции мяча

В случае нашего прыгающего мяча, первый кадр будет представлять позицию № 1, а последний кадр мы будем называть позиция № 2. Когда мы завершим нашу анимацию, он будет двигаться по определенной схеме при проигрывании.

Шаг 1

Начните с рисования линии нижнего предела примерно высотой 2,54 см от нижней части страницы. Это точка приземления нашего мяча.

Шаг 2

Набросайте эскиз своего мяча - это не обязательно должен быть идеальный круг. Мне нравится работать с неидеальными набросками, когда я создаю анимации. Давайте нарисуем наш мяч на сантиметр ниже от верхней части страницы. Это позиция № 1. Мяч как будто находится над полом, и готов упасть и отскочить!

Шаг 3

Теперь давайте нарисуем мяч на второй позиции. Это позиция № 2. Мяч на полу и готов отпрыгнуть назад к позиции № 1! Вы можете увидеть светлый образ предыдущего кадра, так что у вас появится ощущение перемещения мяча по отношению к предыдущему кадру.

Шаг 4

Давайте вернемся и добавим еще один круг в промежуток между позой №1 и позой № 2. Этот круг является как бы кадром анимации в промежутке между нашими позициями. Эти круги создают иллюзию, что одна позиция плавно переходит в следующую.

Круги, которые мы нарисовали между позициями на этом этапе, нужны для движения между позицией № 1 и позицией № 2. Когда я создаю анимацию, я люблю отдавать предпочтение какой либо из позиций. Таким образом, рисунок-анимация нашего мяча находится не совсем посередине, а чуть ближе к позиции № 2, чем к позиции №1.

Шаг 5

Затем добавьте еще один круг между позицией № 2 и позицией № 1, чтобы создать видимость, что мяч подпрыгивает обратно к исходной позиции!

Давайте взглянем на нашу анимацию до этого момента. Она выглядит хорошо, но чего-то не хватает. Мяч выглядит плоским.

Шаг 6

Чтобы придать нашему прыгающему мячу немного упругости, мы можем добавить немного сжатый кадр мяча сразу после позиции № 2. Я оставил немного светлый образ позиции № 2, так что вы сможете увидеть сжатый образ мяча по отношению к позиции № 2. Убедитесь, что вы не меняете вес мяча - когда мяч давит вниз, он становится немного толще по бокам, таким образом, сохраняя свою массу.

Так гораздо лучше! Добавив еще один кадр сжатого мяча, он стал визуально более подвижным.

Шаг 7

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

Теперь наш мяч выглядит более подвижным и больше похож на эластичный резиновый мяч. Отлично!

Посмотрите на результат. Я дал название позиции № 1 и № 2 и обвел мячи посередине зеленым цветом.

Шаг 8

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

Шаг 9

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

Я дал название позиции № 1 и № 2 и выделил промежуточные рисунки зеленым, а два последних - синим.

А теперь давайте посмотрим на нашу анимацию. Это великолепный прыгающий мяч! Я думаю, что мы почти закончили! Но сначала…

Подправьте и раскрасьте свою анимацию

Шаг 1

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

Хорошо! Посмотрите на все наши рисунки вместе. Теперь это симпатичная кучка ровных мячей!

Вот наша анимация. Она выглядит здорово! Отличная работа! Остался последний штрих …

Шаг 2

Давайте раскрасим наш мяч! Раскрасьте все изображения мячей. Синий - мой любимый цвет, но вы можете выбрать любой цвет, какой захотите. Действуйте!

Отлично! Продолжайте, пока все мячи не будут окрашены.

Отличная работа!! Хорошая Анимация!

Это большой прыгающий мяч! Он выглядит потрясающе! За короткое время вы создали анимационный прыгающий мяч, который имеет вес и массу. Надувной мяч, которым вы можете гордиться. Продолжайте делать анимации - нет предела совершенству!

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

Скрытые возможности и анимация CSS3

Это 4-й урок, посвященный 3D преобразованиям и анимации CSS. Обязательно посмотрите и изучите предыдущие три урока:

Прыгающий мяч CSS — Реальный пример

Мяч, с произвольной траекторией полета смотрите ниже:

Мяч двигается по траектории, которая меняется время от времени.

Как обычно для тех у кого анимация не поддерживается браузером следующее видео:

Структура HTML

Смотрим из чего состоит структура этой анимации:

Что у нас есть:

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

Всемогущий CSS

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

Задаем движение по горизонтали. Для этого мы создали в HTML структуре блок с идентификатором traveler :

Я задал что мяч будет двигаться с отступом в 21px слева. То есть он не будет касаться края и будет создаваться впечатление, будто он касается стены. Таким же образом он не будет доходить до конца, потому что мы ему задали 530px , а это на 70px меньше всей ширины сцены (но это еще с учетом размеров самого изображения с мячом). Таким образом вот его область, в которой он будет двигаться по горизонтали:

Сейчас мяч может двигаться только вправо и влево, и только по горизонтали. Как на примере ниже:

Анимация не воспроизводится? Смотрите короткий ролик ниже того, о чем я говорю:

А сейчас пришло время заставить мяч двигаться еще и по вертикали. Вот так выглядят ключевые кадры:

Вы уже могли заметить, что когда мяч поднимается и опускается скорость то повышается, то уменьшается. И в обоих случая по-разному. За это отвечают свойства animation-timing-function . Данное свойство может принимать следующие параметры: linear , ease , ease-in , ease-out и ease-in-out . Я перечислил не все, а лишь самые простые. Вы можете поэкспериментировать с ними самостоятельно и увидеть как изменяется скорость движения мяча.

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