5

Как реализовать анимацию, чтобы кружок плавно нарисовал линию по окружности и затем остановился?

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

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

2 ответа 2

8

Вопрос хороший, а ответа нет. Будем исправлять ситуацию!

Решение CSS

Вращение по часовой стрелке:

var btn = document.getElementsByClassName('button__click');
var div__one = document.getElementsByClassName('div__one__click');
var div__two = document.getElementsByClassName('div__two__click');
var div__three = document.getElementsByClassName('div__three__click');
var wrapper = document.getElementsByClassName('wrapper__click');
var circle__one = document.getElementsByClassName('circle__one__click');
var circle__two = document.getElementsByClassName('circle__two__click');
var s_circle = document.getElementsByClassName('s_circle__click');
btn[0].onclick = function() {
  div__one[0].classList.add('div__one__click__active');
  div__two[0].classList.add('div__two__click__active');
  div__three[0].classList.add('div__three__click__active');
  wrapper[0].classList.add('wrapper__click__active');
  circle__one[0].classList.add('circle__one__click__active');
  circle__two[0].classList.add('circle__two__click__active');
  s_circle[0].classList.add('s_circle__click__active');
}
btn[1].onclick = function() {
  div__one[0].classList.remove('div__one__click__active');
  div__two[0].classList.remove('div__two__click__active');
  div__three[0].classList.remove('div__three__click__active');
  wrapper[0].classList.remove('wrapper__click__active');
  circle__one[0].classList.remove('circle__one__click__active');
  circle__two[0].classList.remove('circle__two__click__active');
  s_circle[0].classList.remove('s_circle__click__active');
}
#box .box__circle,
#box__click .box__circle {
  position: relative;
  display: flex;
  float: left;
  align-items: center;
  flex-direction: column;
}

#box .box__none,
#box .box,
#box__click .box__click {
  display: block;
  position: relative;
  width: 170px;
  height: 170px;
  margin: 5px;
}

#box .box:before,
#box__click .box__click:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 160px;
  border: 5px solid #eee;
  border-radius: 50%;
}

#box .wrapper,
#box__click .wrapper__click {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  clip: rect(0px, 170px, 170px, 85px);
}

#box .circle,
#box__click .circle__one__click,
#box__click .circle__two__click {
  width: 160px;
  height: 160px;
  border: 5px solid limegreen;
  border-radius: 50%;
  position: absolute;
  clip: rect(0px, 85px, 170px, 0px);
}

#box .div[data-anim~=base],
#box__click .div__one__click__active[data-anim~=base],
#box__click .div__two__click__active[data-anim~=base],
#box__click .div__three__click__active[data-anim~=base] {
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

#box .wrapper[data-anim~=wrapper],
#box__click .wrapper__click__active[data-anim~=wrapper] {
  animation-duration: 0.01s;
  animation-delay: 1s;
  animation-name: close-wrapper;
}

#box .circle[data-anim~=left],
#box__click .circle__one__click__active[data-anim~=left],
#box__click .circle__two__click__active[data-anim~=left] {
  animation-duration: 2s;
  animation-name: left-spin;
}

#box .circle[data-anim~=right],
#box__click .circle__one__click__active[data-anim~=right],
#box__click .circle__two__click__active[data-anim~=right] {
  animation-duration: 1s;
  animation-name: right-spin;
}

@keyframes right-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

@keyframes left-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes close-wrapper {
  to {
    clip: rect(auto, auto, auto, auto);
  }
}

#box .box__s_circle,
#box__click .box__s_circle {
  position: relative;
  top: 0;
  left: 0;
  width: 160px;
  height: 160px;
  border-radius: 100%;
  border: 5px solid rgba(0, 0, 0, 0.0)
}

#box .box__s_circle span,
#box__click .box__s_circle span {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  display: block;
  background-color: limegreen;
  position: absolute;
  left: 70px;
  top: -12px;
}

#box .s_circle,
#box__click .s_circle__click__active {
  transform-origin: 50% 92px;
  animation: rotate-circle 2s linear;
}

@keyframes rotate-circle {
  100% {
    transform: rotate(360deg);
  }
}

.buttons {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  bottom: 0;
}

.buttons button {
  display: block;
  margin: 10px auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box">
  <div class="box__circle">
    <div class="box__none">
      <div class="div wrapper" data-anim="base wrapper">
        <div class="div circle" data-anim="base left"></div>
        <div class="div circle" data-anim="base right"></div>
      </div>
      <div class="box__s_circle">
        <span class="s_circle"></span>
      </div>
    </div>
  </div>
</div>
<div id="box">
  <div class="box__circle">
    <div class="box">
      <div class="div wrapper" data-anim="base wrapper">
        <div class="div circle" data-anim="base left"></div>
        <div class="div circle" data-anim="base right"></div>
      </div>
      <div class="box__s_circle">
        <span class="s_circle"></span>
      </div>
    </div>
  </div>
</div>
<div id="box__click">
  <div class="box__circle">
    <div class="box__click">
      <div class="div__one__click wrapper__click" data-anim="base wrapper">
        <div class="div__two__click circle__one__click" data-anim="base left"></div>
        <div class="div__three__click circle__two__click" data-anim="base right"></div>
      </div>
      <div class="box__s_circle">
        <span class="s_circle__click"></span>
      </div>
      <div class="buttons"><button class="button__click">Запустить</button><button class="button__click">Сбросить</button></div>
    </div>
  </div>
</div>

Вращение против часовой стрелки:

var btn = document.getElementsByClassName('button__click');
var div__one = document.getElementsByClassName('div__one__click');
var div__two = document.getElementsByClassName('div__two__click');
var div__three = document.getElementsByClassName('div__three__click');
var wrapper = document.getElementsByClassName('wrapper__click');
var circle__one = document.getElementsByClassName('circle__one__click');
var circle__two = document.getElementsByClassName('circle__two__click');
var s_circle = document.getElementsByClassName('s_circle__click');
btn[0].onclick = function() {
  div__one[0].classList.add('div__one__click__active');
  div__two[0].classList.add('div__two__click__active');
  div__three[0].classList.add('div__three__click__active');
  wrapper[0].classList.add('wrapper__click__active');
  circle__one[0].classList.add('circle__one__click__active');
  circle__two[0].classList.add('circle__two__click__active');
  s_circle[0].classList.add('s_circle__click__active');
}
btn[1].onclick = function() {
  div__one[0].classList.remove('div__one__click__active');
  div__two[0].classList.remove('div__two__click__active');
  div__three[0].classList.remove('div__three__click__active');
  wrapper[0].classList.remove('wrapper__click__active');
  circle__one[0].classList.remove('circle__one__click__active');
  circle__two[0].classList.remove('circle__two__click__active');
  s_circle[0].classList.remove('s_circle__click__active');
}
#box .box__circle,
#box__click .box__circle {
  position: relative;
  display: flex;
  float: left;
  align-items: center;
  flex-direction: column;
}

#box .box__none,
#box .box,
#box__click .box__click {
  display: block;
  position: relative;
  width: 170px;
  height: 170px;
  margin: 5px;
}

#box .box:before,
#box__click .box__click:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 160px;
  border: 5px solid #eee;
  border-radius: 50%;
}

#box .wrapper,
#box__click .wrapper__click {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  clip: rect(0px, 85px, 170px, 0px);
}

#box .circle,
#box__click .circle__one__click,
#box__click .circle__two__click {
  width: 160px;
  height: 160px;
  border: 5px solid limegreen;
  border-radius: 50%;
  position: absolute;
  clip: rect(0px, 170px, 170px, 85px);
}

#box .div[data-anim~=base],
#box__click .div__one__click__active[data-anim~=base],
#box__click .div__two__click__active[data-anim~=base],
#box__click .div__three__click__active[data-anim~=base] {
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

#box .wrapper[data-anim~=wrapper],
#box__click .wrapper__click__active[data-anim~=wrapper] {
  animation-duration: 0.01s;
  animation-delay: 1s;
  animation-name: close-wrapper;
}

#box .circle[data-anim~=left],
#box__click .circle__one__click__active[data-anim~=left],
#box__click .circle__two__click__active[data-anim~=left] {
  animation-duration: 2s;
  animation-name: left-spin;
}

#box .circle[data-anim~=right],
#box__click .circle__one__click__active[data-anim~=right],
#box__click .circle__two__click__active[data-anim~=right] {
  animation-duration: 1s;
  animation-name: right-spin;
}

@keyframes right-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-180deg);
  }
}

@keyframes left-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes close-wrapper {
  to {
    clip: rect(auto, auto, auto, auto);
  }
}

#box .box__s_circle,
#box__click .box__s_circle {
  position: relative;
  top: 0;
  left: 0;
  width: 160px;
  height: 160px;
  border-radius: 100%;
  border: 5px solid rgba(0, 0, 0, 0.0)
}

#box .box__s_circle span,
#box__click .box__s_circle span {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  display: block;
  background-color: limegreen;
  position: absolute;
  left: 70px;
  top: -12px;
}

#box .s_circle,
#box__click .s_circle__click__active {
  transform-origin: 50% 92px;
  animation: rotate-circle 2s linear;
}

@keyframes rotate-circle {
  100% {
    transform: rotate(-360deg);
  }
}

.buttons {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  bottom: 0;
}

.buttons button {
  display: block;
  margin: 10px auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box">
  <div class="box__circle">
    <div class="box__none">
      <div class="div wrapper" data-anim="base wrapper">
        <div class="div circle" data-anim="base left"></div>
        <div class="div circle" data-anim="base right"></div>
      </div>
      <div class="box__s_circle">
        <span class="s_circle"></span>
      </div>
    </div>
  </div>
</div>
<div id="box">
  <div class="box__circle">
    <div class="box">
      <div class="div wrapper" data-anim="base wrapper">
        <div class="div circle" data-anim="base left"></div>
        <div class="div circle" data-anim="base right"></div>
      </div>
      <div class="box__s_circle">
        <span class="s_circle"></span>
      </div>
    </div>
  </div>
</div>
<div id="box__click">
  <div class="box__circle">
    <div class="box__click">
      <div class="div__one__click wrapper__click" data-anim="base wrapper">
        <div class="div__two__click circle__one__click" data-anim="base left"></div>
        <div class="div__three__click circle__two__click" data-anim="base right"></div>
      </div>
      <div class="box__s_circle">
        <span class="s_circle__click"></span>
      </div>
      <div class="buttons"><button class="button__click">Запустить</button><button class="button__click">Сбросить</button></div>
    </div>
  </div>
</div>

Вращение вперёд-назад:

var btn = document.getElementsByClassName('button');
var box = document.getElementsByClassName('box');
var wrapper = document.getElementsByClassName('wrapper');
var circle__one = document.getElementsByClassName('circle__one');
var circle__two = document.getElementsByClassName('circle__two');
var s_circle = document.getElementsByClassName('s_circle');
btn[0].onclick = function() {
  box[0].classList.remove('box__back');
  box[0].classList.add('box__active');
  wrapper[0].classList.remove('wrapper__back');
  wrapper[0].classList.add('wrapper__active');
  circle__one[0].classList.remove('circle__one__back');
  circle__one[0].classList.add('circle__one__active');
  circle__two[0].classList.remove('circle__two__back');
  circle__two[0].classList.add('circle__two__active');
  s_circle[0].classList.remove('s_circle__back');
  s_circle[0].classList.add('s_circle__active');
}
btn[1].onclick = function() {
  box[0].classList.remove('box__active');
  box[0].classList.add('box__back');
  wrapper[0].classList.remove('wrapper__active');
  wrapper[0].classList.add('wrapper__back');
  circle__one[0].classList.remove('circle__one__active');
  circle__one[0].classList.add('circle__one__back');
  circle__two[0].classList.remove('circle__two__active');
  circle__two[0].classList.add('circle__two__back');
  s_circle[0].classList.remove('s_circle__active');
  s_circle[0].classList.add('s_circle__back');
}
.box__circle {
  position: relative;
  display: flex;
  float: left;
  align-items: center;
  flex-direction: column;
}

.box__active,
.box__back {
  display: block;
  position: relative;
  width: 170px;
  height: 170px;
  margin: 5px;
}

.box__active:before,
.box__back:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 160px;
  border-radius: 50%;
}

.box__active:before {
  border: 5px solid #eee;
}

.box__back:before {
  border: 5px solid limegreen;
}

.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
}

.wrapper__active {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  clip: rect(0px, 170px, 170px, 85px);
}

.wrapper__back {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  clip: rect(0px, 85px, 170px, 0px);
}

.circle__one__active,
.circle__two__active {
  width: 160px;
  height: 160px;
  border: 5px solid limegreen;
  border-radius: 50%;
  position: absolute;
  clip: rect(0px, 85px, 170px, 0px);
}

.circle__one__back,
.circle__two__back {
  width: 160px;
  height: 160px;
  border: 5px solid #eee;
  border-radius: 50%;
  position: absolute;
  clip: rect(0px, 170px, 170px, 85px);
}

.div__one[data-anim~=base],
.div__two[data-anim~=base],
.div__three[data-anim~=base] {
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

.wrapper__active[data-anim~=wrapper] {
  animation-duration: 0.01s;
  animation-delay: 1s;
  animation-name: close-wrapper;
}

.wrapper__back[data-anim~=wrapper-back] {
  animation-duration: 0.01s;
  animation-delay: 1s;
  animation-name: close-wrapper-back;
}

.circle__one__active[data-anim~=left],
.circle__two__active[data-anim~=left] {
  animation-duration: 2s;
  animation-name: left-spin;
}

.circle__one__back[data-anim~=left-back],
.circle__two__back[data-anim~=left-back] {
  animation-duration: 2s;
  animation-name: left-spin-back;
}

.circle__one__active[data-anim~=right],
.circle__two__active[data-anim~=right] {
  animation-duration: 1s;
  animation-name: right-spin;
}

.circle__one__back[data-anim~=right-back],
.circle__two__back[data-anim~=right-back] {
  animation-duration: 1s;
  animation-name: right-spin-back;
}

@keyframes right-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

@keyframes left-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes right-spin-back {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-180deg);
  }
}

@keyframes left-spin-back {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes close-wrapper {
  to {
    clip: rect(0px, 170px, 170px, 0px);
  }
}

@keyframes close-wrapper-back {
  to {
    clip: rect(0px, 170px, 170px, 0px);
  }
}

.box__s_circle {
  position: relative;
  top: 0;
  left: 0;
  width: 160px;
  height: 160px;
  border-radius: 100%;
  border: 5px solid rgba(0, 0, 0, 0.0)
}

.box__s_circle span {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  display: block;
  background-color: limegreen;
  position: absolute;
  left: 70px;
  top: -12px;
}

.s_circle__active {
  transform-origin: 50% 92px;
  animation: rotate-circle 2s linear;
}

.s_circle__back {
  transform-origin: 50% 92px;
  animation: rotate-circle-back 2s linear;
}

@keyframes rotate-circle {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-circle-back {
  100% {
    transform: rotate(-360deg);
  }
}

.buttons {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  bottom: 0;
}

.buttons button {
  display: block;
  margin: 10px auto;
}
<div class="box__circle">
  <div class="box box__active">
    <div class="div__one wrapper" data-anim="base wrapper wrapper-back">
      <div class="div__two circle__one" data-anim="base left left-back"></div>
      <div class="div__three circle__two" data-anim="base right right-back"></div>
    </div>
    <div class="box__s_circle">
      <span class="s_circle"></span>
    </div>
    <div class="buttons"><button class="button">Вперёд</button><button class="button">Назад</button></div>
  </div>
</div>

Вращение вперёд-назад с маркером:

var btn = document.getElementsByClassName('button');
var box = document.getElementsByClassName('box');
var wrapper = document.getElementsByClassName('wrapper');
var circle__one = document.getElementsByClassName('circle__one');
var circle__two = document.getElementsByClassName('circle__two');
var s_circle = document.getElementsByClassName('s_circle');
btn[0].onclick = function() {
  box[0].classList.remove('box__back');
  box[0].classList.add('box__active');
  wrapper[0].classList.remove('wrapper__back');
  wrapper[0].classList.add('wrapper__active');
  circle__one[0].classList.remove('circle__one__back');
  circle__one[0].classList.add('circle__one__active');
  circle__two[0].classList.remove('circle__two__back');
  circle__two[0].classList.add('circle__two__active');
  s_circle[0].classList.remove('s_circle__back');
  s_circle[0].classList.add('s_circle__active');
}
btn[1].onclick = function() {
  box[0].classList.remove('box__active');
  box[0].classList.add('box__back');
  wrapper[0].classList.remove('wrapper__active');
  wrapper[0].classList.add('wrapper__back');
  circle__one[0].classList.remove('circle__one__active');
  circle__one[0].classList.add('circle__one__back');
  circle__two[0].classList.remove('circle__two__active');
  circle__two[0].classList.add('circle__two__back');
  s_circle[0].classList.remove('s_circle__active');
  s_circle[0].classList.add('s_circle__back');
}
.box__circle {
  position: relative;
  display: flex;
  float: left;
  align-items: center;
  flex-direction: column;
}

.box__active,
.box__back {
  display: block;
  position: relative;
  width: 170px;
  height: 170px;
  margin: 5px;
}

.box__active:before,
.box__back:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 160px;
  border-radius: 50%;
}

.box__active:before {
  border: 5px solid #eee;
}

.box__back:before {
  border: 5px solid limegreen;
}

.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
}

.wrapper__active {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  clip: rect(0px, 170px, 170px, 85px);
}

.wrapper__back {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  clip: rect(0px, 85px, 170px, 0px);
}

.circle__one__active,
.circle__two__active {
  width: 160px;
  height: 160px;
  border: 5px solid limegreen;
  border-radius: 50%;
  position: absolute;
  clip: rect(0px, 85px, 170px, 0px);
}

.circle__one__back,
.circle__two__back {
  width: 160px;
  height: 160px;
  border: 5px solid #eee;
  border-radius: 50%;
  position: absolute;
  clip: rect(0px, 170px, 170px, 85px);
}

.div__one[data-anim~=base],
.div__two[data-anim~=base],
.div__three[data-anim~=base] {
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

.wrapper__active[data-anim~=wrapper] {
  animation-duration: 0.01s;
  animation-delay: 1s;
  animation-name: close-wrapper;
}

.wrapper__back[data-anim~=wrapper-back] {
  animation-duration: 0.01s;
  animation-delay: 1s;
  animation-name: close-wrapper-back;
}

.circle__one__active[data-anim~=left],
.circle__two__active[data-anim~=left] {
  animation-duration: 2s;
  animation-name: left-spin;
}

.circle__one__back[data-anim~=left-back],
.circle__two__back[data-anim~=left-back] {
  animation-duration: 2s;
  animation-name: left-spin-back;
}

.circle__one__active[data-anim~=right],
.circle__two__active[data-anim~=right] {
  animation-duration: 1s;
  animation-name: right-spin;
}

.circle__one__back[data-anim~=right-back],
.circle__two__back[data-anim~=right-back] {
  animation-duration: 1s;
  animation-name: right-spin-back;
}

@keyframes right-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

@keyframes left-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes right-spin-back {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-180deg);
  }
}

@keyframes left-spin-back {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes close-wrapper {
  to {
    clip: rect(0px, 170px, 170px, 0px);
  }
}

@keyframes close-wrapper-back {
  to {
    clip: rect(0px, 170px, 170px, 0px);
  }
}

.box__s_circle {
  position: relative;
  top: 0;
  left: 0;
  width: 160px;
  height: 160px;
  border-radius: 100%;
  border: 5px solid rgba(0, 0, 0, 0.0)
}

.box__s_circle span {
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
  left: 70px;
  top: -12px;
}

.box__s_circle span:after {
  content: '';
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  z-index: 10;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-top: -10px;
  top: 50%;
  border-left: 20px solid limegreen;
  left: auto;
  right: 0px;
}

.s_circle__active {
  transform-origin: 50% 92px;
  animation: rotate-circle 2s linear;
}

.s_circle__back {
  transform-origin: 50% 92px;
  animation: rotate-circle-back 2s linear;
}

@keyframes rotate-circle {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-circle-back {
  100% {
    transform: rotate(-360deg);
  }
}

.buttons {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  bottom: 0;
}

.buttons button {
  display: block;
  margin: 10px auto;
}
<div class="box__circle">
  <div class="box box__active">
    <div class="div__one wrapper" data-anim="base wrapper wrapper-back">
      <div class="div__two circle__one" data-anim="base left left-back"></div>
      <div class="div__three circle__two" data-anim="base right right-back"></div>
    </div>
    <div class="box__s_circle">
      <span class="s_circle"></span>
    </div>
    <div class="buttons"><button class="button">Вперёд</button><button class="button">Назад</button></div>
  </div>
</div>

1
  • 5
    Спасибо за Ваш труд! Уже не актуально конечно, но в дальнейшем возможно пригодится. 9 фев 2020 в 5:26
6

Решение SVG

Для реализации эффекта заполнения строки круга с синхронным движением шарика, можно использовать два вида анимации:

  1. Для заполнения строки используется анимация изменения параметров stroke-dasharray
  2. Для движения шарика по той же окружности используется анимация animateMotion

Вращение шарика по часовой стрелке:

<div>
    <button onclick="forward.beginElement()">Forward</button>

</div>	
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	   width="240" height="240" viewBox="5 0 120 120"  >
<g transform="rotate(-90 60 60)"> 
 <path  id="pathID" fill="none" stroke="#eeeeee" stroke-width="2"
    d="M 110,60 C 111.23115,92.42467 75.806891,118.48576 45.22399,107.76682 13.904404,99.354713 -0.5798127,57.826902 18.733219,31.767876 36.02567,4.3222361 79.975785,2.7658326 99.166345,28.919502 106.14501,37.667487 110.02784,48.811016 110,60 Z" />   
   
   <circle  cx="50%" cy="50%" r="50" fill="none" stroke-dashoffset="0" stroke-dasharray="0,314"
   stroke="#6FB58E" stroke-width="3" fill="freeze" > 
        <!-- Анимация заполнения строки по часовой стрелке -->
	   <animate  attributeName="stroke-dasharray" begin="forward.begin" dur="4s" values="0,314;314,0" fill="freeze"  />  
         	 
</circle>  	
  
	<circle id="circle2" cx="0" cy="0" r="5" fill="red"  >  
  	 <!-- Анимация движения шарика по часовой стрелке -->
	 <animateMotion
	   id="forward"
	   dur="4s"
	   begin="indefinite"
	   repeatCount="1"
	   keyPoints="0;1"
	   keyTimes="0;1"
       calcMode="linear"
	   fill="freeze"  >
		 <mpath href="#pathID" />
	 </animateMotion> 
  </circle>	 
		
  </g>		 
</svg>

Движение шарика вперёд-назад:

<div>
    <button onclick="forward.beginElement()">Вперёд</button>
    <button onclick="back.beginElement()">Назад</button>
</div>	
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	   width="240" height="240" viewBox="5 0 120 120"  >
<g transform="rotate(-90 60 60)"> 
 <path  id="pathID" fill="none" stroke="#eeeeee" stroke-width="2"
    d="M 110,60 C 111.23115,92.42467 75.806891,118.48576 45.22399,107.76682 13.904404,99.354713 -0.5798127,57.826902 18.733219,31.767876 36.02567,4.3222361 79.975785,2.7658326 99.166345,28.919502 106.14501,37.667487 110.02784,48.811016 110,60 Z" />   
   
   <circle  cx="50%" cy="50%" r="50" fill="none" stroke-dashoffset="0" stroke-dasharray="0,314"
   stroke="#6FB58E" stroke-width="3" fill="freeze" > 
        <!-- Анимация заполнения строки по часовой стрелке -->
	   <animate  attributeName="stroke-dasharray" begin="forward.begin" dur="4s" values="0,314;314,0" fill="freeze"  />  
          <!-- Анимация заполнения строки против часовой стрелки -->	    
		 <animate   attributeName="stroke-dasharray" begin="back.begin" dur="4s" values="314,0;0,314" fill="freeze"  />  
	 
</circle>  	
  
	<circle id="circle2" cx="0" cy="0" r="5" fill="red"  >  
  	 <!-- Анимация движения шарика по часовой стрелке -->
	 <animateMotion
	   id="forward"
	   dur="4s"
	   begin="indefinite"
	   repeatCount="1"
	   keyPoints="0;1"
	   keyTimes="0;1"
       calcMode="linear"
	   fill="freeze"  >
		 <mpath href="#pathID" />
	 </animateMotion> 
		<!-- Анимация движения шарика против часовой стрелки -->
		 
	       <animateMotion
		   id="back"
		   dur="4s"
		   begin="indefinite"
		   repeatCount="1"
		   keyPoints="1;0"
		   keyTimes="0;1"
		   calcMode="linear"
		   fill="freeze" >
		 <mpath href="#pathID" />
	    </animateMotion>
         </circle>
  </g>		 
</svg>

Движение маркера вперёд-назад:

<div>
    <button onclick="forward.beginElement()">Вперёд</button>
    <button onclick="back.beginElement()">Назад</button>
</div>	
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	   width="240" height="240" viewBox="5 0 120 120"  >
<g transform="rotate(-90 60 60)"> 
 <path  id="pathID" fill="none" stroke="#eeeeee" stroke-width="2"
    d="M 110,60 C 111.23115,92.42467 75.806891,118.48576 45.22399,107.76682 13.904404,99.354713 -0.5798127,57.826902 18.733219,31.767876 36.02567,4.3222361 79.975785,2.7658326 99.166345,28.919502 106.14501,37.667487 110.02784,48.811016 110,60 Z" />   
   
   <circle  cx="50%" cy="50%" r="50" fill="none" stroke-dashoffset="0" stroke-dasharray="0,314"
   stroke="#6FB58E" stroke-width="3" fill="freeze" > 
        <!-- Анимация заполнения строки по часовой стрелке -->
	   <animate  attributeName="stroke-dasharray" begin="forward.begin" dur="4s" values="0,314;314,0" fill="freeze"  />  
          <!-- Анимация заполнения строки против часовой стрелки -->	    
		 <animate   attributeName="stroke-dasharray" begin="back.begin" dur="4s" values="314,0;0,314" fill="freeze"  />  
	 
</circle>  	
  
	<polyline id="triangle" transform="translate(-12 -6)" points="12,2 20,6 12,12" stroke="#D80094" fill="#D80094" >  
  	 <!-- Анимация движения шарика по часовой стрелке -->
	 <animateMotion
	   id="forward"
	   dur="4s"
	   begin="indefinite"
	   repeatCount="1"
	   keyPoints="0;1"
	   keyTimes="0;1"
       calcMode="linear"
	   rotate="auto"
	   fill="freeze"  >
		 <mpath href="#pathID" />
	 </animateMotion> 
		<!-- Анимация движения шарика против часовой стрелки -->
		 
		   <animateMotion
		   id="back"
		   dur="4s"
		   begin="indefinite"
		   repeatCount="1"
		   keyPoints="1;0"
		   keyTimes="0;1"
		   calcMode="linear"
		   rotate="auto"
		   fill="freeze" >
		 <mpath href="#pathID" />
	    </animateMotion>
         </polyline>
  </g>		 
</svg>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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