我看到this SVG animation,我想知道如何改变线条被删除的方向;当前线从它绘制的最后一点缩回,但我想要反过来;从第一次开始绘制的点开始擦除自己的行(这样看起来更像是一个加载动画)。
我看到.path上的动画属性值为无穷大,但我不确定如何指定方向。
HTML
<div class="bg">
<svg xmlns="http://www.w3.org/2000/svg" width="670" height="236" viewBox="0 0 670 236">
<path class="path" stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M343.6 75.9v20.3l23.1 21.8-23.1 21.8v20.3l44.6-42.1zM326.4 139.8l-23.1-21.8 23.1-21.8v-20.3l-44.6 42.1 44.6 42.1z"/>
<path class="path" stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M335 38.9c-43.7 0-79.1 35.4-79.1 79.1s35.4 79.1 79.1 79.1 79.1-35.4 79.1-79.1-35.4-79.1-79.1-79.1zM335 182.9c-35.8 0-64.9-29.1-64.9-64.9s29.1-64.9 64.9-64.9 64.9 29.1 64.9 64.9-29.1 64.9-64.9 64.9z"/>
</svg>
</div>
CSS是
body {
background-color: #fff;
}
.bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.path {
animation: draw 3.5s infinite;
}
@keyframes draw {
50% {
stroke-dashoffset: 0;
}
}
答案 0 :(得分:5)
我喜欢你想把它变成一个加载动画:
现在我做了什么:
更改了动画开始停止点
@keyframes draw {
100% {
stroke-dashoffset: -500;
}
}
为什么-500?
因为这是破折号数组的值
这在&lt; svg&gt; 中定义:dasharray="500"
在最里面的路径中更改了此值。它只有300
我添加了线性动画
animation: draw 5s infinite linear;
默认是轻松。我发现动画与线性动画的一致性更好。
注意强>
dashoffset=500
&lt; - 使动画开始时没有破折号/笔画
答案 1 :(得分:2)
stroke-dasharray可以是以空格分隔的破折号和间隙的列表,因此您可以执行以下操作:
var svgPath = document.getElementById('svgPath');
var pathLength = svgPath.getTotalLength();
var offset = 0;
function offsetPath() {
requestAnimationFrame(offsetPath);
offset += 0.1;
var dasharray = 0 + ' ' + offset + ' ' + (pathLength - offset);
svgPath.setAttribute('stroke-dasharray', dasharray);
}
requestAnimationFrame(offsetPath);
<svg xmlns="http://www.w3.org/2000/svg" width="670" height="236" viewBox="0 0 670 236">
<path id="svgPath" class="path" stroke="#4CADC1" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="100 100 100" fill="none" d="M343.6 75.9v20.3l23.1 21.8-23.1 21.8v20.3l44.6-42.1zM326.4 139.8l-23.1-21.8 23.1-21.8v-20.3l-44.6 42.1 44.6 42.1z"
/>
</svg>
答案 2 :(得分:1)
我使用了Persijn推荐的stroke-dashoffset
的负值。这在Chrome和FF中运行良好,但在Safari中无法正常工作。
我发现如果你在Illustrator中打开SVG,你可以通过打开“属性”面板来反转路径的方向(你可能需要点击右上角的“显示更多”)然后点击“反向路径”按钮。
答案 3 :(得分:0)
改变SVG线条动画方向
为两个方向添加关键帧和类:
.dash {
stroke-dasharray : 10 5;
animation : dash 4s linear infinite;
}
.dash_reverse {
stroke-dasharray : 10 5;
animation : dash_reverse 4s linear infinite;
}
@keyframes dash {
to {
stroke-dashoffset: 100;
}
}
@keyframes dash_reverse {
to {
stroke-dashoffset: -100;
}
}
使用 JavaScript 切换动画:
function animate_line_forward(id) {
$("#" + id).removeClass("dash_reverse");
$("#" + id).addClass("dash");
}
function animate_line_reverse(id) {
$("#" + id).removeClass("dash");
$("#" + id).addClass("dash_reverse");
}
根据需要调用函数(将 SVG 行 id 传递给上述函数:
调用animate_line_forward:
调用animate_line_reverse: