SVG анимация - растущий и уменьшающийся круг, движущийся вдоль линии - PullRequest
Новая
       5

SVG анимация - растущий и уменьшающийся круг, движущийся вдоль линии

0 голосов
/ 30 августа 2018

Я потянул себя за эту проблему с SVG, я уверен, что это атрибут или что-то, чего мне не хватает, но не могу понять

Я в основном хочу создать собственный загрузчик с кружком, который начинается слева от svg и перемещается вправо, масштабируется в середине, поэтому он начинается с малого, может быть, 0,5, увеличивается до 3, а затем в середине. сжимается до 0,5 с другой стороны, а затем повторяет это, двигаясь влево-вправо, влево-вправо

Пока что я могу заставить круг двигаться слева направо, я также могу масштабировать его, но когда я пытаюсь объединить обе анимации, он идет повсюду.

https://jsfiddle.net/0odvwna4/18/

 <svg width="800px" height="100px">

   <circle 
     cx="0" 
     cy="50" 
     r="15" 
     fill="blue" 
     stroke="black" 
     stroke-width="1" 
     transform="scale(0.0801245 0.0801245)">

     <animateTransform     
                       attributeName="transform" 
                       type="scale" 
                       begin="0s"
                       calcMode="spline" 
                       keySplines="0.3 0 0.7 1;0.3 0 0.7 1"
                       values="0;1;0" 
                       keyTimes="0;0.5;1"
                       dur="5s"
                       repeatCount="indefinite"></animateTransform>

     <animate 
              attributeName="cx" 
              from="0" 
              to="800" 
              dur="5s" 
              repeatCount="indefinite" 
              />
    </circle>
 </svg>

Ответы [ 2 ]

0 голосов
/ 31 августа 2018

Анимируя атрибут cx, вы меняете положение круга в SVG. И поскольку источник всех преобразований находится в левом верхнем углу SVG (0,0), ваш масштаб заставляет круг двигаться вперед и назад относительно источника.

В любом случае, зачем все-таки беспокоиться о преобразовании масштаба? Почему бы просто не оживить радиус? 

<svg width="800px" height="100px">

   <circle 
     cx="0" 
     cy="50" 
     r="0" 
     fill="blue" 
     stroke="black" 
     stroke-width="1">

     <animate
             attributeName="r" 
             begin="0s"
             calcMode="spline" 
             keySplines="0.3 0 0.7 1;0.3 0 0.7 1"
             values="0;15;0" 
             keyTimes="0;0.5;1"
             dur="5s"
             repeatCount="indefinite"/>

     <animate 
              attributeName="cx" 
              from="0" 
              to="800" 
              dur="5s" 
              repeatCount="indefinite"/>
    </circle>
 </svg>
0 голосов
/ 31 августа 2018

Я сделал это с помощью CSS / HTML https://jsfiddle.net/5rfgb38y/17/

но если вы знаете, что я делаю не так с SVG, пожалуйста, дайте мне знать, это будет беспокоить меня, пока я не выясню, чего мне не хватало 

<div id="container">
  <div id="dot"></div>
</div>

  #container {
  width:100%;
  border: 1px solid white;
  height: 100px;
  position: relative;
}

#dot {
  background: white;
  border-radius: 50%;
  height:10px;
  width:10px;
  top:50%;
  animation: mymove 5s infinite;
  position: absolute;
  transform: scale(0.1); 
}

@keyframes mymove {
    from {
      left: 0px;
       transform: scale(0.1);
      }
    50% {
      left: 50%; 
      transform: scale(3);
      }
    to {
      left: 100%;
        transform: scale(0.1);
      }
}

body {
  background: black;
}
...