Анимация путей по окружности с помощью CSS3

Анимация путей по окружности с помощью CSS3

От автора: Долгое время я предполагал, что нельзя применять CSS Transitions или анимацию для передвижения объектов DOM каким-либо другим образом, кроме движения по прямой. Конечно, разработчик мог бы применить множество ключевых кадров для создания списка прямых путей и симулировать кривую, но не думал, что можно определить кривую с помощью всего двух ключевых кадров или простого CSS transition. Я ошибался.

Вышеприведенный пример анимирован с помощью всего двух ключевых кадров анимации CSS3! Хотя вы могли применить для этого jQuery.animate() или requestAnimationFrame, лучше взять CSS3 вместо JavaScript’а — полученная анимация всегда гарантированно будет глаже (особенно на мобильных устройствах) плюс может сэкономить энергию батареи. В данной статье приведен рецепт CSS выполнения этого трюка во всех браузерах с включенной анимацией CSS3 с тщательным описанием примененной математики, а также альтернативный вариант для старых версий IE, не поддерживающих анимацию CSS3.

Дайте мне CSS!

Единственная причина, почему CSS здесь такой длинный – повторение кода префикса для браузеров:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Самый интересный участок кода– это ключевой внизу. Значение translateX() должно быть равно радиусу окружности (т.е. диаметру, поделенному на два). Функции rotate() в правилах должны быть установлены на начальный и конечный углы анимации. Обратите внимание, что здесь два вызова rotate() — второй должен быть отрицательным значением первого.

Как же все это работает?

Чтобы понять, почему это работает, позвольте мне пошагово объяснить математику, генерирующую кадр, где Сатурн обернулся на 45 градусов вокруг Солнца. От этой точки мы рассмотрим, как это применяется к полной анимации.

Шаг 1: Поместите объект в центр

Поместите объект в центр окружности, по которой он должен двигаться. В вышеприведенном примере Солнце (которое является всего лишь анимированным GIF’ом) находится в центре, так что передвинем Сатурн так, чтобы тот был прямо на нем:

Шаг 2: Используйте translateX() для определения радиуса окружности

Далее нам нужно передвинуть объект на край окружности. Для этого примера диаметр окружности составляет, скажем, 300px. Мы устанавливаем свойство CSS3 transform на transformX(150px) (где 150px – половина от 300px).

Шаг 3: Вставьте в сюда один или два rotate().

Если в свойство transform вставить rotate() перед translateX(), то можно использовать его для управления путем по окружности. Чтобы продемонстрировать это, давайте вставим один из 45deg:

Шаг 4: Примените код анимации

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

Затем добавляем ключевые кадры в CSS, чтобы сказать браузеру, что анимация должна вращаться вокруг Солнца (т.е. от 0 до 360 градусов):

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вот так! Мы закончили. Плесните себе мартини — вы его заслужили!

Взгляните на результат

Что насчет IE?

IE10 – единственная разновидность Internet Explorer’а, поддерживающая анимацию CSS3. Поскольку в диких местах IE7 и 8 все еще широко применяются, было бы хорошо использовать некую альтернативу. Применяя условные комментарии, вы могли бы включить JavaScript, предназначенный только для IE, который сделал бы это для вас с помощью jQuery.aniamte() или requestAnimationFrame() Пола Айриша (Paul Irish). Так как большая часть устройств, вероятно, все равно использует jQuery, вышеприведенный пример использует этот код для создания анимации в IE. Делает он это, включая код JS исключительно для IE:

(Обратите внимание на условные комментарии для IE9 и ниже!) transition-circle-ie.js содержит код, который делает анимацию с помощью jquery.animate():

Взгляните на подробные комментарии того, как работает код. В JavaScript’е используются радианы вместо градусов при расчете значений sin() и cos() — если вы не знакомы с радианами, на PurpleMath есть статья, которая вам поможет.

Взгляните на результат

Вариации этой техники

А если бы вместо планеты, скажем, вам нужен был космический корабль, вращающийся вокруг Солнца. Вот «классический» пример:

Обратите внимание, что корабль всегда смотрит в ту сторону, в которую летит. Это можно сделать с тем же CSS, что и выше, за исключением того, что вы удалили бы вторую rotate() в свойстве transform:

Для IE JavaScript придется изменить — так как корабль на самом деле вращается, для ответственной работы я использовал здесь cssSandpaper.

Взгляните на результат

Псевдо 3D?

Мы также можем сделать псевдо 3D-анимацию планеты, врезающейся в Солнце. Я предоставлю читателям в качестве упражнения возможность рассмотреть CSS и специальный JavaScript для IE, чтобы вычислить, как это работает (если вы понимаете приведенные выше примеры, то сможете разобраться).

Дальнейшее изучение?

Сразу после написания этого текста я наткнулся на великолепную статью в Smashing Magazine – Руководство по анимации CSS: принципы и примеры (The Guide To CSS Animation: Principles and Example) Тома Уотерхауса (Tom Waterhouse). В ней есть отличные примеры, включающие продвинутую анимацию CSS3, сочетание анимации двух вложенных объектов DOM для произведения эффекта скачущего мяча. Я уверен, что с их помощью можно сделать гораздо более интересные техники, и определенно продолжу исследовать анимацию CSS3 в будущем. Если можете поделиться подобными статьями, я (и, уверен, другие читатели этой статьи) хотели бы о них прочесть.

Автор: Dammit Jim

Источник: http://www.useragentman.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Ринат

    Очень эффектно, спасибо за уроки по CSS, обожаю такие спецэффекты, не могли бы вы рассказать, как работает следующая технология: сервис анализирует ваш аккаунт в соцсети, вытаскивает оттуда фотографии, в итоге создается небольшой ролик, в котором вы как бы главный герой, вернее, в ролике показываются ваши фотографии?
    Не помню ссылку, но дам ссылку на другой похожий проект:
    wantedinoslo.no/

  2. Сергей

    Эффектно. ИЕ как всегда портит картину. Вопрос, если все равно приходится использовать js, то не проще ли ограничиться им?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree