Небольшая статья о том, как двигать объект по окружности на JavaScript:
Используем( необходимое из математики):
— полярную систему координат
— функции Math.cos, Math.sin, Math.Pi
— нахождения угла: alpha = const * pi / 180
1. Определим на css/html «место событий»:
2. Теперь будем двигать их по окружности:
О песочнице
Это «Песочница» — раздел, в который попадают дебютные посты пользователей, желающих стать полноправными участниками сообщества.
Если у вас есть приглашение, отправьте его автору понравившейся публикации — тогда её смогут прочитать и обсудить все остальные пользователи Хабра.
Чтобы исключить предвзятость при оценке, все публикации анонимны, псевдонимы показываются случайным образом.
О модерации
Не надо пропускать:
- рекламные и PR-публикации
- вопросы и просьбы (для них есть Хабр Q&A);
- вакансии (используйте Хабр Карьеру)
- статьи, ранее опубликованные на других сайтах;
- статьи без правильно расставленных знаков препинания, со смайликами, с обилием восклицательных знаков, неоправданным выделением слов и предложений и другим неуместным форматированием текста;
- жалобы на компании и предоставляемые услуги;
- низкокачественные переводы;
- куски программного кода без пояснений;
- односложные статьи;
- статьи, слабо относящиеся к или не относящиеся к ней вовсе.
1 июня 2018 | Опубликовано в css | Нет комментариев »
Веб-анимация наиболее часто создается с использованием двух положений: начального и конечного состояний или расположений A и B. Движение элементов по дугам, эллипсам и окружностям используется реже, но об этом тоже важно знать.
Окружности
Окружности — наиболее простой вариант. Самое важное, от чего зависит все остальное, — задать значения свойства начала трансформации элемента. Здесь и далее весь код CSS приведен для ясности без приставок производителей, которые уже и не нужны для большинства современных версий браузеров:
Начальная точка для каждой трансформации будет располагаться в 200px правее элемента:
Элемент HTML со смещенным началом трансформации
Это означает, что вращение элемента будет происходить вокруг точки смещения начала трансформации:
Также важно изменить значение по умолчанию временной характеристики перехода: если Вам нужно, чтобы движение было бесконечным прямолинейным, используйте следующие значения:
Это создаст бесшовную анимации движения по кругу.
Lea Verou предложила другой хороший способ анимирования движения элементов по кругу.
Линейная анимация, примененная к движению по дуге, обычно будет выглядеть искусственно и неуместно. Для создания движения маятника, как в уроке о гипнотизирующей анимации логотипа, нужно применить значение временной характеристики перехода ease-in-out, при котором анимация начнется медленно, немного ускорится и закончится тоже медленно, а также ограничить область вращения:
Такой тип анимации часто используется для показа чего-то : урок «веер из фотографий с иcпользованием CSS» — это хороший пример такого применения.
Эллипсы
Самая сложная форма движения — наиболее характерное для нашей вселенной движение по эллипсу. Наиболее простой известный нам способ создать это движение — разделить анимированное движение на слои: двигать элемент вверх и вниз половину фазы, когда он двигается по кругу. Чтобы добиться этого, элемент вкладывается в контейнер:
И каждый элемент анимируется отдельно:
Движение вверх-вниз продляет круговую анимацию в эллипс, усиливая вертикальное или горизонтальное движение, определяя основные оси эллипса. Значение временной характеристики перехода ease-in-out используется, чтобы сделать движение плавным, так как иначе получится движение по закругленному ромбу, Направление анимации alternate проигрывает ключевые кадры вперед, затем назад и так по кругу и используется для того, чтобы вертикальное движение повторялось вперед-назад плавно. Обратите внимание на то, что анимация вверх-вниз происходит половину времени, в отличие от анимации по кругу.
Анимация путей по окружности с помощью CSS3
Дата публикации: 2013-05-16
От автора: Долгое время я предполагал, что нельзя применять CSS Transitions или анимацию для передвижения объектов DOM каким-либо другим образом, кроме движения по прямой. Конечно, разработчик мог бы применить множество ключевых кадров для создания списка прямых путей и симулировать кривую, но не думал, что можно определить кривую с помощью всего двух ключевых кадров или простого CSS transition. Я ошибался.
Вышеприведенный пример анимирован с помощью всего двух ключевых кадров анимации CSS3! Хотя вы могли применить для этого jQuery.animate() или requestAnimationFrame, лучше взять CSS3 вместо JavaScript’а — полученная анимация всегда гарантированно будет глаже (особенно на мобильных устройствах) плюс может сэкономить энергию батареи. В данной статье приведен рецепт CSS выполнения этого трюка во всех браузерах с включенной анимацией CSS3 с тщательным описанием примененной математики, а также альтернативный вариант для старых версий IE, не поддерживающих анимацию CSS3.
Дайте мне CSS!
Единственная причина, почему CSS здесь такой длинный – повторение кода префикса для браузеров:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3