Как я могу последовательно анимировать несколько элементов на одном орбитальном пути? - PullRequest
Новая
       14

Как я могу последовательно анимировать несколько элементов на одном орбитальном пути?

2 голосов
/ 31 мая 2019

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

Вот код, который я использую: 

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
}

.loader {
  height: 50px;
  animation: rotate 6s linear infinite;
}

.circle {
  display: inline-block;
  background-color: purple;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  transform: scale(0);
  animation: grow 1.5s linear infinite;
  margin: -20p;
}

.circle:nth-child(2) {
  background-color: palevioletred;
  transform: scale(0);
  animation-delay: 0.20s;
}

@keyframes rotate {
  to {
    transform: rotate(360deg)
  }
}

@keyframes grow {
  50% {
    transform: scale(1);
  }
}
<div class="loader">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

Ответы [ 2 ]

1 голос
/ 31 мая 2019

Я создаю полноразмерные «тарелки», которые я могу установить в начальную точку вращения.Круги заканчиваются как псевдоэлементы на пластинах (чтобы избежать дополнительной разметки).Измените начальные значения вращения, чтобы сблизить круги. 

.loader {
  width: 100px;
  height: 100px;
  animation: rotate 6s linear infinite;
  position: relative;
}

.plate {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.plate:nth-child(2) {
  transform: rotate(120deg);
}

.plate:nth-child(3) {
  transform: rotate(240deg);
}

.plate:before {
  content: '';
  position: absolute;
  background-color: red;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  transform: scale(0);
  animation: grow 1.5s linear infinite;
}

.plate:nth-child(2):before {
  background: green;
}

.plate:nth-child(3):before {
  background: blue;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes grow {
  50% {
    transform: scale(1);
  }
}

* {
  box-sizing: bordr-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Lato", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
}
<body>
  <div class="loader">
    <div class="plate"></div>
    <div class="plate"></div>
    <div class="plate"></div>
  </div>
</body>
0 голосов
/ 03 июня 2019

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

SVG Animation

Вы можете встроить все это в SVG с тех порподдерживает много крутой анимации, будучи довольно производительным.Но создавать SVG и анимировать их с нуля довольно сложно.К счастью, есть инструменты, чтобы помочь.Вот несколько примеров: Snapsvg (библиотека кодов), SVGGator (инструмент веб-анимации) или Bodymovin (рабочий процесс After Effects).

Но допустим, вы хотите придерживаться того, что можно сделать в HTML / CSS.

CSS Motion Path

К сожалению, поддержка есть, нетотлично по состоянию на лето 2019 года, но, скорее всего, будет улучшаться.Если ваша аудитория использует правильные браузеры (мобильные браузеры на базе Chrome, Opera, Edge или Chromium).Это на самом деле довольно легко использовать, но есть некоторые ошибки.Например, похоже, что сейчас работает только свойство path().Таким образом, вы не можете использовать ключевые слова формы, такие как circle() или ellipse(), хотя они находятся в спецификации . 

main {
    position: relative;
    margin: 20px;
}
main,svg {
	width: 100px;
	height: 100px;
}

path {
    stroke-width: 1px;
}
svg {
    position:absolute;
    opacity: 0.5;
}
#c1 {
    stroke: red;
}
#c2 {
    stroke: blue;
}
#c3 {
    stroke: green;
}

div[class*="c"] {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	position: absolute;
	box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.3);
}

.c1 {
	background-color: red;
	offset-path: path('M50,2 C78.2166667,2 98,22.2364005 98,50.5 C98,78.7635995 75.5694444,99 50,99 C24.4305556,99 2,76.5476997 2,50.5 C2,24.4523003 21.7833333,2 50,2 Z');
	animation: moveme 5s ease-in-out infinite;
}

.c2 {
	background-color: blue;
	offset-path: path('M55,13 C80.2774306,13 98,30.9415509 98,56 C98,81.0584491 77.9059606,99 55,99 C32.0940394,99 12,79.0938368 12,56 C12,32.9061632 29.7225694,13 55,13 Z');
	animation: moveme 5.25s linear infinite;
}
.c3{
	background-color: green;
	offset-path: path('M36.0041619,30.5873511 C61.3414991,12.7718541 90.4202796,4.99194919 98.2799065,16.2635432 C106.139533,27.5351371 85.805943,52.9370587 62.845696,69.0811471 C39.885449,85.2252355 7.31148243,93.0730731 1.30061213,84.4528052 C-4.71025818,75.8325372 10.6668246,48.4028481 36.0041619,30.5873511 Z');
	animation: moveme 5.5s linear infinite;
}

@keyframes moveme {
  100% { 
    motion-offset: 100%;
    offset-distance: 100%;
  }
}
<main>
    <!-- paths for example -->
    <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="orbit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <path d="M50,2 C78.2166667,2 98,22.2364005 98,50.5 C98,78.7635995 75.5694444,99 50,99 C24.4305556,99 2,76.5476997 2,50.5 C2,24.4523003 21.7833333,2 50,2 Z" id="c1"></path>
    <path d="M55,13 C80.2774306,13 98,30.9415509 98,56 C98,81.0584491 77.9059606,99 55,99 C32.0940394,99 12,79.0938368 12,56 C12,32.9061632 29.7225694,13 55,13 Z" id="c2"></path>
    <path d="M36.0041619,30.5873511 C61.3414991,12.7718541 90.4202796,4.99194919 98.2799065,16.2635432 C106.139533,27.5351371 85.805943,52.9370587 62.845696,69.0811471 C39.885449,85.2252355 7.31148243,93.0730731 1.30061213,84.4528052 C-4.71025818,75.8325372 10.6668246,48.4028481 36.0041619,30.5873511 Z" id="c3"></path>
</g>
</svg>

	<div class="c1"></div>
	<div class="c2"></div>
	<div class="c3"></div>
</main>
...