SVG 3 анимационных круга - PullRequest
Новая
       22

SVG 3 анимационных круга

0 голосов
/ 06 марта 2019

Итак, я пытаюсь анимировать 3 вращающихся круга (как показано здесь https://codepen.io/mckenziedave/pen/KEapXa). Моя проблема в том, что svg движутся из стороны в сторону во время анимации.

Может кто-нибудь сказать мне исправление для этого / что я делаю не так. 

    .circle {
      position:absolute;
      z-index:3;
        width: 50px;
        -webkit-animation:spin 4s linear infinite;
        -moz-animation:spin 4s linear infinite;
        animation:spin 4s linear infinite;
    }
    
    .arrow {
      position:absolute;
      z-index:2;
      width: 45px;
      margin-top:2px;
      margin-left:3px;
        -webkit-animation:spin-reverse 4s linear infinite;
        -moz-animation:spin-reverse 4s linear infinite;
        animation:spin-reverse 4s linear infinite;
    }
    
    .triangle {
      position:absolute;
      z-index:2;
      width: 60px;
      margin-top:-5px;
      margin-left:-4px;
        -webkit-animation:spin-reverse 4s linear infinite;
        -moz-animation:spin-reverse 4s linear infinite;
        animation:spin-reverse 4s linear infinite;
    }
    
    
    @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
    @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
    @keyframes spin { 100% { -webkit-transform: rotate(3180deg); transform:rotate(360deg); } }
    
    @-moz-keyframes spin-reverse { 0% { -moz-transform: rotate(-360deg); } }
    @-webkit-keyframes spin-reverse { 0% { -webkit-transform: rotate(-360deg); } }
    @keyframes spin-reverse { 0% { -webkit-transform: rotate(-360deg); transform:rotate(360deg); } }
    
    <div style="position:absolute;top: 50%;left: 50%;">
    <div class="circle">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.95 93.95"><defs cx="0" cy="0"><style>.cls{fill:none;stroke:#231f20;stroke-miterlimit:10;stroke-width:6px;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls" d="M8.87,25A44,44,0,0,1,47,3c1.19,0,2.38,0,3.55.14"/><path class="cls" d="M24.37,84.71A44,44,0,0,1,3,47c0-.64,0-1.27,0-1.89"/><path class="cls" d="M86.51,66.27A44,44,0,0,1,47,91a44.68,44.68,0,0,1-4.65-.24"/><path class="cls" d="M66.73,7.68A44,44,0,0,1,91,47c0,.76,0,1.52,0,2.27"/></g></g></svg>
    </div>
    <div class="arrow">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><defs cx="0"><style>.cls-1{fill:none;stroke:#f7ad4f;stroke-miterlimit:10;stroke-width:6px;}.cls-2{fill:#f7ad4f;}</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><circle class="cls-1" cx="39.67" cy="39.67" r="36.67"/><polygon class="cls-2" points="27.22 19.24 19.24 9.21 10.14 22.93 27.22 19.24"/></g></g></svg>
    </div>
     <div class="triangle">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.1 111.2"><defs cx="0"><style>.cls-a{fill:#3385c2;}</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon class="cls-a" points="40.03 0 38.98 12.77 55 9 40.03 0"/><polygon class="cls-a" points="110.1 40.84 97.42 39.03 100.22 55.25 110.1 40.84"/><polygon class="cls-a" points="67.78 111.2 69.6 98.51 53.38 101.3 67.78 111.2"/><polygon class="cls-a" points="0 70.63 12.8 71.07 8.29 55.25 0 70.63"/></g></g></svg>
      </div>
    </div>

Ответы [ 2 ]

0 голосов
/ 07 марта 2019

Завершение SVG в div приводит к автоматическому вычислению источника преобразования. Так что, если вы просто переместите эти классы из div-оберток в SVG, источник-преобразование вычисляется правильно.

Обратите внимание, что у вас не было круга со стрелкой в ​​центре SVG (должно быть на 40,40) - так что исправьте это. И запас слева тоже был немного не в порядке. 

.circle {
      position:absolute;
      z-index:3;
        width: 50px;
        -webkit-animation:spin 4s linear infinite;
        -moz-animation:spin 4s linear infinite;
        animation:spin 4s linear infinite;
    }
    
    .arrow {
      position:absolute;
      z-index:2;
      width: 45px;
      margin-top:2px;
      margin-left:2px;
        -webkit-animation:spin-reverse 4s linear infinite;
        -moz-animation:spin-reverse 4s linear infinite;
        animation:spin-reverse 4s linear infinite;
    }
    
    .triangle {
      position:absolute;
      z-index:2;
      width: 60px;
      margin-top:-5px;
      margin-left:-4px;
        -webkit-animation:spin-reverse 4s linear infinite;
        -moz-animation:spin-reverse 4s linear infinite;
        animation:spin-reverse 4s linear infinite;
    }
    
    
    @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
    @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
    @keyframes spin { 100% { -webkit-transform: rotate(3180deg); transform:rotate(360deg); } }
    
    @-moz-keyframes spin-reverse { 0% { -moz-transform: rotate(-360deg); } }
    @-webkit-keyframes spin-reverse { 0% { -webkit-transform: rotate(-360deg); } }
    @keyframes spin-reverse { 0% { -webkit-transform: rotate(-360deg); transform:rotate(360deg); } }
    <div style="position:absolute;top: 50%;left: 50%;">

    <svg class="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.95 93.95"><defs cx="0" cy="0"><style>.cls{fill:none;stroke:#231f20;stroke-miterlimit:10;stroke-width:6px;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls" d="M8.87,25A44,44,0,0,1,47,3c1.19,0,2.38,0,3.55.14"/><path class="cls" d="M24.37,84.71A44,44,0,0,1,3,47c0-.64,0-1.27,0-1.89"/><path class="cls" d="M86.51,66.27A44,44,0,0,1,47,91a44.68,44.68,0,0,1-4.65-.24"/><path class="cls" d="M66.73,7.68A44,44,0,0,1,91,47c0,.76,0,1.52,0,2.27"/></g></g></svg>


      <svg class="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
      <defs cx="0"><style>.cls-1{fill:none;stroke:#f7ad4f;stroke-miterlimit:10;stroke-width:6px;}.cls-2{fill:#f7ad4f;}</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><circle class="cls-1" cx="39.67" cy="39.67" r="36.67"/><polygon class="cls-2" points="27.22 19.24 19.24 9.21 10.14 22.93 27.22 19.24"/></g></g></svg>


       <svg class="triangle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.1 111.2"><defs cx="0"><style>.cls-a{fill:#3385c2;}</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon class="cls-a" points="40.03 0 38.98 12.77 55 9 40.03 0"/><polygon class="cls-a" points="110.1 40.84 97.42 39.03 100.22 55.25 110.1 40.84"/><polygon class="cls-a" points="67.78 111.2 69.6 98.51 53.38 101.3 67.78 111.2"/><polygon class="cls-a" points="0 70.63 12.8 71.07 8.29 55.25 0 70.63"/></g></g></svg>

    </div>
0 голосов
/ 06 марта 2019

Вам необходимо добавить теги transform-origin к вашему css, чтобы они вращались вокруг центра, который вы определяете: 

.circle {
  position:absolute;
  z-index:3;
    width: 50px;
    transform-origin: 25px 25px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

.arrow {
  position:absolute;
  z-index:2;
  width: 45px;
  margin-top:2px;
  margin-left:3px;
    transform-origin: 22.5px 22.5px;
    -webkit-animation:spin-reverse 4s linear infinite;
    -moz-animation:spin-reverse 4s linear infinite;
    animation:spin-reverse 4s linear infinite;
}

.triangle {
  position:absolute;
  z-index:2;
  width: 60px;
  margin-top:-5px;
  margin-left:-4px;
    transform-origin: 30px 30px;
    -webkit-animation:spin-reverse 4s linear infinite;
    -moz-animation:spin-reverse 4s linear infinite;
    animation:spin-reverse 4s linear infinite;
}

Рабочая скрипка: https://jsfiddle.net/osj9ay64/

...