как поменять этот круг анимации? - PullRequest
Новая
       29

как поменять этот круг анимации?

0 голосов
/ 14 мая 2018

Я нашел этот фрагмент кода в сети и пытаюсь повернуть его вспять, чтобы круг переместился из полностью белого в градиентный круг от 0% до 100%, а затем остановил анимацию. Тем не менее, я не могу понять, с обратной стороны. Я попытался поиграться со значениями, но не могу добиться желаемого эффекта. Также было бы хорошо избавиться от небольшого контура, который сохраняется, когда градиентная часть не отображается. ура 

#circle-loader-wrap {
  overflow: hidden;
  position: relative;
  margin-top: -10px;
  width: 200px;
  height: 200px;

  background: linear-gradient(90deg, #fdbd39,#ee6723,#E06387);
  border-radius: 200px;

  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}

#circle-loader-wrap:after {
  content: '';
  position: absolute;
  left: 15px;
  top: 15px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background-color: white;

}

#circle-loader-wrap div {
  overflow: hidden;
  position: absolute;
  width: 50%;
  height: 100%;
}

#circle-loader-wrap .loader {
  position: absolute;
  left: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 1000px;
  background-color: white;
}

#circle-loader-wrap .left-wrap {
  left: 0;
}

#circle-loader-wrap .left-wrap .loader {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  transform-origin: 0 50% 0;
  -webkit-transform-origin: 0 50% 0;
  animation: loading-left 10s infinite linear;
  -webkit-animation: loading-left 10s infinite linear;
}

#circle-loader-wrap .right-wrap {
  left: 50%;
}

#circle-loader-wrap .right-wrap .loader {
  left: -100%;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  transform-origin: 100% 50% 0;
  -webkit-transform-origin: 100% 50% 0;
  animation: loading-right 10s infinite linear;
  -webkit-animation: loading-right 10s infinite linear;
}

@keyframes loading-left {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
  }
}

@-webkit-keyframes loading-left {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
  }
}

@keyframes loading-right {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
    100% {
    -webkit-transform: rotate(180deg);
  }

}

@-webkit-keyframes loading-right {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
  }

}
        <div class="container mt-5">
            <div class="row">
              <div class="col-3">
                <div id="circle-loader-wrap">
                  <div class="left-wrap">
                    <div class="loader"></div>
                  </div>
                  <div class="right-wrap">
                    <div class="loader"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

Ответы [ 3 ]

0 голосов
/ 14 мая 2018
Свойство

CSS Animation поможет вам повернуть ту же анимацию в обратном направлении.

//dont care about this code, its just to get the length of shapes to set the dash offset
let shape = document.querySelector('.circle');
let shapeLength= shape.getTotalLength();
console.log(shapeLength);
#circle { 
   width: 300px;
   height:300px;
   background: #fcfcfc;
}
.text{
   fill: red;
   text-anchor: middle;
}
#circle{
   animation: circleMove 5s ease-out infinite both alternate;
}
.circle{
   fill: none;
   stroke: red;
   stroke-width: 5px;
   stroke-dasharray:251;
   animation: circleMove 5s ease-in 1  alternate;
}
@keyframes circleMove{
   from{
      stroke-dashoffset: 251;
   }
   to{
      stroke-dashoffset: 0;
   }
}
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle -->

<div id="circle">
   <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <circle class='circle' cx="50" cy="50" r="40"/>
      <text class='text' x="50" y="50" font-family="Verdana" font-size="11" ></text>
   </svg>
</div>
0 голосов
/ 14 мая 2018

@keyframes CSS - сложная часть этой анимации загрузки.

Вы можете использовать инструменты разработчика для проверки этих двух элементов, .left-wrap>.loader и .right-wrap>.loader. Как только элемент .loader перекрывается с его контейнером (.left-wrap или .left-wrap), он скрывает градиентный круг.

Ключевой точкой этой анимации является ключевой кадр и степень вращения этих двух элементов загрузчика.

Возьмите левый полукруг и следующий код, например, в этом случае видимость левого полукруга контролируется .right-wrap и .right-wrap>.loader. Когда угол поворота .right-wrap>.loader составляет 180 градусов, он не перекрывается со своим контейнером, и видна вся левая половина. loading animate description

Пока мы уменьшаем вращение, перекрывающаяся часть .right-wrap>.loader и ее контейнер увеличиваются, что скрывает часть круга. loading animate description

Кроме того, для контроля времени вращения (какая часть круга, левая или правая, выполняет вращение первым), ключевой кадр делится на 2 части: 0% -50% (первая часть) и 50%. -100% (вторая часть).

Если мы установим одинаковое вращение в ключевых кадрах 0% и 50%, элемент не будет вращаться в первой части анимации. Исходя из этой концепции, вы также можете сказать, что если 50% и 100% остаются в одном и том же вращении, то во второй части анимации вращение не представлено.

Чтобы управлять по часовой стрелке или против часовой стрелки, важно знать, в какой степени вращение начинается и в какой степени вращение заканчивается. Для анимации по часовой стрелке вращение должно начинаться с 180 градусов и заканчиваться на 360 градусов, а для против часовой стрелки - с 180 градусов и заканчиваться на 0 градусов. 

#circle-loader-wrap {
  overflow: hidden;
  position: relative;
  margin-top: -10px;
  width: 200px;
  height: 200px;

  background: linear-gradient(90deg, #fdbd39,#ee6723,#E06387);
  border-radius: 200px;

  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}

#circle-loader-wrap:after {
  content: '';
  position: absolute;
  left: 15px;
  top: 15px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background-color: white;

}

#circle-loader-wrap div {
  overflow: hidden;
  position: absolute;
  width: 50%;
  height: 100%;
}

#circle-loader-wrap .loader {
  position: absolute;
  left: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 1000px;
  background-color: white;
}

#circle-loader-wrap .left-wrap {
  left: 0;
}

#circle-loader-wrap .left-wrap .loader {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  transform-origin: 0 50% 0;
  -webkit-transform-origin: 0 50% 0;
  animation: loading-left 10s infinite linear;
  -webkit-animation: loading-left 10s infinite linear;
}

#circle-loader-wrap .right-wrap {
  left: 50%;
}

#circle-loader-wrap .right-wrap .loader {
  left: -100%;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  transform-origin: 100% 50% 0;
  -webkit-transform-origin: 100% 50% 0;
  animation: loading-right 10s infinite linear;
  -webkit-animation: loading-right 10s infinite linear;
}

@keyframes loading-left {
  0% {
    -webkit-transform: rotate(180deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes loading-left {
  0% {
    -webkit-transform: rotate(180deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes loading-right {
  0% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(360deg);
  }
    100% {
    -webkit-transform: rotate(360deg);
  }

}

@-webkit-keyframes loading-right {
  0% {
    -webkit-transform: rotate(180deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }

}
        <div class="container mt-5">
            <div class="row">
              <div class="col-3">
                <div id="circle-loader-wrap">
                  <div class="left-wrap">
                    <div class="loader"></div>
                  </div>
                  <div class="right-wrap">
                    <div class="loader"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
0 голосов
/ 14 мая 2018

Один из способов - настроить параметры для transform: rotate() в анимации: 

#circle-loader-wrap {
  overflow: hidden;
  position: relative;
  margin-top: -10px;
  width: 200px;
  height: 200px;
  background: linear-gradient(90deg, #fdbd39, #ee6723, #E06387);
  border-radius: 200px;
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}

#circle-loader-wrap:after {
  content: '';
  position: absolute;
  left: 15px;
  top: 15px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background-color: white;
}

#circle-loader-wrap div {
  overflow: hidden;
  position: absolute;
  width: 50%;
  height: 100%;
}

#circle-loader-wrap .loader {
  position: absolute;
  left: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 1000px;
  background-color: white;
}

#circle-loader-wrap .left-wrap {
  left: 0;
}

#circle-loader-wrap .left-wrap .loader {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  transform-origin: 0 50% 0;
  -webkit-transform-origin: 0 50% 0;
  animation: loading-left 10s infinite linear;
  -webkit-animation: loading-left 10s infinite linear;
}

#circle-loader-wrap .right-wrap {
  left: 50%;
}

#circle-loader-wrap .right-wrap .loader {
  left: -100%;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  transform-origin: 100% 50% 0;
  -webkit-transform-origin: 100% 50% 0;
  animation: loading-right 10s infinite linear;
  -webkit-animation: loading-right 10s infinite linear;
}

@keyframes loading-left {
  0% {
    -webkit-transform: rotate(-180deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

@-webkit-keyframes loading-left {
  0% {
    -webkit-transform: rotate(-180deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

@keyframes loading-right {
  0% {
    transform: rotate(-180deg);
  }
  50% {
    transform: rotate(-180deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

@-webkit-keyframes loading-right {
  0% {
    -webkit-transform: rotate(-180deg);
  }
  50% {
    -webkit-transform: rotate(-180deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
<div class="container mt-5">
  <div class="row">
    <div class="col-3">
      <div id="circle-loader-wrap">
        <div class="left-wrap">
          <div class="loader"></div>
        </div>
        <div class="right-wrap">
          <div class="loader"></div>
        </div>
      </div>
    </div>
  </div>
</div>
...