1

введите сюда описание изображения

Всем привет. Хочу анимировать полукруги, на css и js чтобы его элементы вращались в разных плоскостях. Если с z осью все понятно, то я с X не могу ничего придумать. Помогите, пожалуйста.

1 ответ 1

5

Решение на svg.

  1. Кольцо в горизонтальной плоскости релизовано через <ellipse> с анимацией stroke-dashoffset.
  2. Кольцо в профильной плоскости анимируется через scale. Есть нюанс с transform-origin для svg: вроде в Safari не работает.
  3. Вырез у фронтального и профильного колец на 1/4 сделан при помощи clip-path

<svg width="320" height="320" version="1.1" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg" fill="none">
    <clipPath id="myClip">
    <rect x="50%" y="0" width="50%" height="100%" fill="black"/>
    <rect x="0" y="50%" width="100%" height="50%" fill="black"/>
  </clipPath>
    <circle cx="160" cy="160" r="100" stroke="black" stroke-width="1" clip-path="url(#myClip)" style="transform-box: fill-box;transform-origin:center;">
        <animateTransform attributeName="transform" type="scale" begin="0" dur="2s" values="1 1;-1 1;1 1" repeatCount="indefinite" />
    </circle>
    <circle cx="160" cy="160" r="80" stroke="black" stroke-width="1" clip-path="url(#myClip)">
        <animateTransform attributeName="transform" type="rotate" begin="0" dur="2s" values="0 160 160;360 160 160" repeatCount="indefinite" />
    </circle>
    <ellipse cx="160" cy="160" rx="150" ry="42" stroke="black" stroke-width="3" stroke-dasharray="500 151.62">
        <animate attributeName="stroke-dashoffset" begin="0" dur="2s" values="0;-651.62"  repeatCount="indefinite" />
    </ellipse>
    <circle cx="160" cy="160" r="32" fill="orange" />
</svg>

Усложнённый вариант:

<svg width="320" height="320" version="1.1" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg" fill="none">
    <defs>
        <clipPath id="myClip">
            <rect x="50%" y="0" width="50%" height="100%" fill="black"/>
            <rect x="0" y="50%" width="100%" height="50%" fill="black"/>
        </clipPath>
        
        <!--маска для сокрытия кольца в горизонтальной плоскости-->
        <mask id="xmask" maskUnits="userSpaceOnUse">
            <rect width="100%" height="100%" fill="white"/>
            <circle cx="160" cy="160" r="32" fill="black" />
            <ellipse cx="160" cy="192" rx="150" ry="32" fill="white"/>
            <!-- Верстикальный радиус ry маскировочного эллипса по высоте круга. Смещение от центра на один радиус круга вниз. Так обеспечивается максимальное покрытие возможных значений ry маскируемого эллипса. -->
        </mask>
        
        <!--Динамическая обрезка кольца в профильной плоскости по контурам центрального круга -->
        <mask id="zmask" maskUnits="userSpaceOnUse">
            <rect width="100%" height="100%" fill="white"/>
            <circle cx="160" cy="160" r="32" fill="black">
                <animate attributeName="cx" begin="0" dur="8s" values="160;60;160;260;160"  repeatCount="indefinite" />
            </circle>
        </mask>
    </defs>
    
    
    <line x1="160" y1="40" x2="160" y2="60" stroke="black" />
    
    <circle cx="160" cy="160" r="32" fill="orange" />
    
    <circle cx="160" cy="160" r="100" stroke="black" stroke-width="1" clip-path="url(#myClip)" style="transform-box: fill-box;transform-origin:center;" mask="url(#zmask)">
        <animateTransform attributeName="transform" type="scale" begin="0" dur="8s" values="1 1;-1 1;1 1" repeatCount="indefinite" />
    </circle>
    <circle cx="160" cy="160" r="80" stroke="black" stroke-width="1" clip-path="url(#myClip)">
        <animateTransform attributeName="transform" type="rotate" begin="0" dur="8s" values="0 160 160;360 160 160" repeatCount="indefinite" />
    </circle>
    
    <ellipse cx="160" cy="160" rx="150" ry="20" stroke="black" stroke-width="3" stroke-dasharray="460 155.304" mask="url(#xmask)">
        <animate attributeName="stroke-dashoffset" begin="0" dur="8s" values="0;-615.304"  repeatCount="indefinite" />
        <!-- 615.304 - это длина обводки эллипса. Можно вычислить js-методом domNode.getTotalLength(); -->
    </ellipse>
    
</svg>

Предложу решение на css как более присспособленное для 3d-трансормаций и в данном случае более кроссбраузерное.

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

@keyframes rotateY {
  from {
    transform: rotate3d(0, 1, 0, 0)
  }
  to {
    transform: rotate3d(0, 1, 0, 360deg)
  }
}

.planet {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  margin: 10px auto;
  background: radial-gradient(circle at center, orange 30%, transparent 0);
}

.planet:before,
.planet:after {
  content: '';
  display: block;
  position: absolute;
  border-radius: 50%;
  border: 1px solid black;
  clip-path: polygon(0 50%, 50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}

.planet:before {
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  animation: rotate 2s linear infinite;
}

.planet:after {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: rotateY 2s linear infinite;
}

.planet__ring {
  position: absolute;
  width: 150%;
  height: 150%;
  left: -25%;
  top: -25%;
  transform: rotate3d(1, 0, 0, 70deg);
}

.planet__ring:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid black;
  border-top-color: transparent;
  animation: rotate 2s linear infinite;
}
<div class="planet">
  <div class="planet__ring"></div>
</div>

8
  • Отличные решения Геннадий! Плюс уже отдал за первое твоё решение CSS, За SVG не могу, может оформишь его отдельным ответом? Когда смотрел этот вопрос два дня назад, решил в голове его точно также как ты. Остановило, что отвечал на другие вопросы и scale() для вертикального кольца мне показалось, что не подходит, так как анимация дискретная, получается, что кольцо качается влево-вправо. Разрывы в кольцах я думал сделать с stroke-dasharray - длинная черта, пробел А вращать stroke-dashoffset 30 сен 2021 в 17:07
  • Согласен, наверное со stroke-dasharray для тонких колец было бы получше. Единообразнее что-ли. scale - это об безвыходности, других способов реализовать 3d в svg не знаю, а так получилась типа проекция вращения на фронтальную плоскость. В других плоскостях вращать его нельзя с учётом верхней палки/ветки в вопросе.
    – zhurof
    30 сен 2021 в 18:12
  • @Alexandr_TT , как разминку для ума предлагаю задачку: сделать, чтобы кольца при вращении были не строго впереди/позади оранжевого шарика, а совсем уж имитацию 3d. Чтобы ядро перекрывало заднюю часть орбитали, не знаю как лучше сформулировать.
    – zhurof
    30 сен 2021 в 18:16
  • Делал уже, помню, что пришлось попотеть:) Вращение земли вокруг солнца 30 сен 2021 в 18:27
  • Круто, ёлки-палки. Плюсую
    – zhurof
    30 сен 2021 в 18:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.