SVG 动画 - 沿线移动的扩大和缩小圆圈答案

【问题标题】：SVG animation - growing and shrinking circle moving along lineSVG 动画 - 沿线移动的扩大和缩小圆圈
【发布时间】：2018-08-31 21:08:26
【问题描述】：

我一直在为这个 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>

【问题讨论】：

标签： html css svg svg-animate

【解决方案1】：

通过为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>

【讨论】：

太棒了，我有一种感觉，就像这样简单，谢谢你的帮助

【解决方案2】：

我已经用 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;
}

【讨论】：