SVG动画-沿着直线移动的增大和缩小的圆
SVG动画-沿着直线移动的增大和缩小的圆
提问于 2018-08-31 02:23:24
我一直在纠结这个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
Stack Overflow用户
回答已采纳
发布于 2018-08-31 21:08:26
通过设置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>
Stack Overflow用户
发布于 2018-08-31 05:40:46
我已经用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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52103234
复制相关文章
相似问题