SVG 和 VelocityJS 动画问题
SVG & VelocityJS Animation Issue
出于某种原因,我下面代码中的 svg 动画无法正确完成。我正在为 stroke-dashoffset
制作动画,但是当动画完成时,外圈仍然缺少一块。虽然我将 stroke-dashoffset
设置回零,但它似乎仍然在完成动画设置。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.path {
stroke-dasharray: 400;
}
</style>
</head>
<body>
<svg id="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 144 144" style="enable-background:new 0 0 144 144;" xml:space="preserve">
<g id="Layer_1">
<path class="path"
fill="none"
stroke="#009FD4"
stroke-width="1"
stroke-miterlimit="10"
d="M142.2,72.6c0,38.6-31.3,69.9-69.9,69.9S2.5,111.2,2.5,72.6S33.8,2.8,72.4,2.8S142.2,34,142.2,72.6z M81,128.1
c12.6-1.9,23.9-8,32.4-16.8 M123,98c4.1-7.8,6.4-16.7,6.4-26.2c0-31.5-25.5-57-57-57s-57,25.5-57,57c0,7.8,1.6,15.3,4.5,22.1
M31.3,111.3C39.6,119.9,50.6,126,63,128 M88.4,50.7h8.2v-10h-8.2V50.7z M46.9,50.7H55v-10h-8.1V50.7z M95.8,39L71.7,22.8L47.3,39
M94.5,40.8h-6v25.8 M91.9,39L71.7,25.4L51.5,39 M55,66.7V40.8h-6.1 M19.9,68.6v42.7h93.6h9.5V98V68.6 M19.9,64 M102.8,104.3h9.6
V84.5h-9.6V104.3z M103,90h9.4 M103,94.9h9.4 M103,99.8h9.4 M107.4,104.3V84.5 M99.7,104.3h3.1V84.5h-3.1V104.3z M99.7,97.2h1.7
M101.4,92.1h-1.7 M101.4,87h-1.7 M99.7,102.3h1.7 M113.8,97.2h1.7 M115.5,92.1h-1.7 M115.5,87h-1.7 M113.8,102.3h1.7 M112.4,104.3
h4.5V84.5h-4.5V104.3z M31.4,104.3h9.6V84.5h-9.6V104.3z M31.7,90h9.4 M31.7,94.9h9.4 M31.7,99.8h9.4 M36.1,84.5v19.8 M26.9,104.3
h4.5V84.5h-4.5V104.3z M28.3,97.2H30 M30,92.1h-1.7 M30,87h-1.7 M28.3,102.3H30 M42.5,97.2h1.7 M44.2,92.1h-1.7 M44.2,87h-1.7
M42.5,102.3h1.7 M41.1,104.3h3.2V84.5h-3.2V104.3z M67.1,62.7l4.6-1.5l5,1.7V43.9h-9.6V62.7z M76.8,49.4h-9.4 M76.8,54.3h-9.4
M76.8,59.2h-9.4 M71.8,43.9v17.3 M62.6,63.7l1.4,0l3.1-0.9V43.9h-4.5V63.7z M65.7,56.5H64 M64,51.5h1.7 M64,46.4h1.7 M65.7,61.6
H64 M79.9,56.5h-1.7 M78.2,51.5h1.7 M78.2,46.4h1.7 M79.9,61.6h-1.7 M79.4,63.7h1.9V43.9h-4.5v18.9L79.4,63.7z M99.7,75.2H44.3
v36.1h55.4V75.2z M94.5,68.6H125l0.7-4.8H88.4 M55,63.8H17.5l0.7,4.8h31.1 M78.4,80.5H65.5v30.8h12.9V80.5z M51.4,106.7h7V80.5h-7
V106.7z M58.4,89.1h-6.8 M58.4,98h-6.8 M84.7,106.7h7V80.5h-7V106.7z M91.7,89.1H85 M91.7,98H85 M71,95.7h-3.4v12.3H71V95.7z
M76.4,95.7H73v12.3h3.4V95.7z M76.4,89.4H73v3.3h3.4V89.4z M76.4,83.4H73v3.3h3.4V83.4z M71,89.4h-3.4v3.3H71V89.4z M71,83.4h-3.4
v3.3H71V83.4z M103.8,71.7l-9.3-3.1l-22.6-7.5l-22.9,7.5l-9,3 M89.9,69.8l-18.3-6.1l-18.4,6.1H89.9z M103.8,72H39.9l0.7,3.2h62.5
L103.8,72z M76.1,37c-0.4-2.2-2.1-3.9-4.1-3.9c-2.1,0-3.8,1.7-4.1,3.9H76.1z M77.8,39.4H66.2l0.7,1.1h10.3L77.8,39.4z M57.9,39
H45.6l0.7,1.7h10.9L57.9,39z M98,39H85.7l0.7,1.7h10.9L98,39z M92.3,51.2 M123.9,63.6l-15.3-12.9H88.9 M54.5,50.7H34.8L19.5,63.6
M83.1,141.7l-4.7-30.4H65.5L61,141.6"/>
</g>
</svg>
<!-- scripts -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/velocity/velocity.js"></script>
<script src="bower_components/velocity/velocity.ui.js"></script>
<script>
window.onload = function() {
function animate() {
$('.path')
.velocity({ 'stroke-dashoffset': 400 }, {duration: 0})
.velocity({ 'stroke-dashoffset': 0 }, { duration: 1500, delay: 10 });
}
animate();
};
</script>
</body>
</html
>
现在您可以使用
解决这个问题
<style>
.path {
stroke-dasharray: 500;
}
</style>
和
function animate() {
$('.path')
.velocity({ 'stroke-dashoffset': 500 }, {duration: 0})
.velocity({ 'stroke-dashoffset': 0 }, {duration: 1500, delay: 10});
}
我不太清楚为什么会修复它,但可能有了新信息和这个网站 (https://css-tricks.com/svg-line-animation-works/),您应该能够弄明白。
[编辑@Corey]
这其实并不奇怪,500 是一个随机猜测,但显然您的路径组包含 439 "dashes"。
使用数字,您会发现需要将数字设置为正好 439 才能加载组中的所有路径。
[/编辑]
出于某种原因,我下面代码中的 svg 动画无法正确完成。我正在为 stroke-dashoffset
制作动画,但是当动画完成时,外圈仍然缺少一块。虽然我将 stroke-dashoffset
设置回零,但它似乎仍然在完成动画设置。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.path {
stroke-dasharray: 400;
}
</style>
</head>
<body>
<svg id="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 144 144" style="enable-background:new 0 0 144 144;" xml:space="preserve">
<g id="Layer_1">
<path class="path"
fill="none"
stroke="#009FD4"
stroke-width="1"
stroke-miterlimit="10"
d="M142.2,72.6c0,38.6-31.3,69.9-69.9,69.9S2.5,111.2,2.5,72.6S33.8,2.8,72.4,2.8S142.2,34,142.2,72.6z M81,128.1
c12.6-1.9,23.9-8,32.4-16.8 M123,98c4.1-7.8,6.4-16.7,6.4-26.2c0-31.5-25.5-57-57-57s-57,25.5-57,57c0,7.8,1.6,15.3,4.5,22.1
M31.3,111.3C39.6,119.9,50.6,126,63,128 M88.4,50.7h8.2v-10h-8.2V50.7z M46.9,50.7H55v-10h-8.1V50.7z M95.8,39L71.7,22.8L47.3,39
M94.5,40.8h-6v25.8 M91.9,39L71.7,25.4L51.5,39 M55,66.7V40.8h-6.1 M19.9,68.6v42.7h93.6h9.5V98V68.6 M19.9,64 M102.8,104.3h9.6
V84.5h-9.6V104.3z M103,90h9.4 M103,94.9h9.4 M103,99.8h9.4 M107.4,104.3V84.5 M99.7,104.3h3.1V84.5h-3.1V104.3z M99.7,97.2h1.7
M101.4,92.1h-1.7 M101.4,87h-1.7 M99.7,102.3h1.7 M113.8,97.2h1.7 M115.5,92.1h-1.7 M115.5,87h-1.7 M113.8,102.3h1.7 M112.4,104.3
h4.5V84.5h-4.5V104.3z M31.4,104.3h9.6V84.5h-9.6V104.3z M31.7,90h9.4 M31.7,94.9h9.4 M31.7,99.8h9.4 M36.1,84.5v19.8 M26.9,104.3
h4.5V84.5h-4.5V104.3z M28.3,97.2H30 M30,92.1h-1.7 M30,87h-1.7 M28.3,102.3H30 M42.5,97.2h1.7 M44.2,92.1h-1.7 M44.2,87h-1.7
M42.5,102.3h1.7 M41.1,104.3h3.2V84.5h-3.2V104.3z M67.1,62.7l4.6-1.5l5,1.7V43.9h-9.6V62.7z M76.8,49.4h-9.4 M76.8,54.3h-9.4
M76.8,59.2h-9.4 M71.8,43.9v17.3 M62.6,63.7l1.4,0l3.1-0.9V43.9h-4.5V63.7z M65.7,56.5H64 M64,51.5h1.7 M64,46.4h1.7 M65.7,61.6
H64 M79.9,56.5h-1.7 M78.2,51.5h1.7 M78.2,46.4h1.7 M79.9,61.6h-1.7 M79.4,63.7h1.9V43.9h-4.5v18.9L79.4,63.7z M99.7,75.2H44.3
v36.1h55.4V75.2z M94.5,68.6H125l0.7-4.8H88.4 M55,63.8H17.5l0.7,4.8h31.1 M78.4,80.5H65.5v30.8h12.9V80.5z M51.4,106.7h7V80.5h-7
V106.7z M58.4,89.1h-6.8 M58.4,98h-6.8 M84.7,106.7h7V80.5h-7V106.7z M91.7,89.1H85 M91.7,98H85 M71,95.7h-3.4v12.3H71V95.7z
M76.4,95.7H73v12.3h3.4V95.7z M76.4,89.4H73v3.3h3.4V89.4z M76.4,83.4H73v3.3h3.4V83.4z M71,89.4h-3.4v3.3H71V89.4z M71,83.4h-3.4
v3.3H71V83.4z M103.8,71.7l-9.3-3.1l-22.6-7.5l-22.9,7.5l-9,3 M89.9,69.8l-18.3-6.1l-18.4,6.1H89.9z M103.8,72H39.9l0.7,3.2h62.5
L103.8,72z M76.1,37c-0.4-2.2-2.1-3.9-4.1-3.9c-2.1,0-3.8,1.7-4.1,3.9H76.1z M77.8,39.4H66.2l0.7,1.1h10.3L77.8,39.4z M57.9,39
H45.6l0.7,1.7h10.9L57.9,39z M98,39H85.7l0.7,1.7h10.9L98,39z M92.3,51.2 M123.9,63.6l-15.3-12.9H88.9 M54.5,50.7H34.8L19.5,63.6
M83.1,141.7l-4.7-30.4H65.5L61,141.6"/>
</g>
</svg>
<!-- scripts -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/velocity/velocity.js"></script>
<script src="bower_components/velocity/velocity.ui.js"></script>
<script>
window.onload = function() {
function animate() {
$('.path')
.velocity({ 'stroke-dashoffset': 400 }, {duration: 0})
.velocity({ 'stroke-dashoffset': 0 }, { duration: 1500, delay: 10 });
}
animate();
};
</script>
</body>
</html
>
现在您可以使用
解决这个问题<style>
.path {
stroke-dasharray: 500;
}
</style>
和
function animate() {
$('.path')
.velocity({ 'stroke-dashoffset': 500 }, {duration: 0})
.velocity({ 'stroke-dashoffset': 0 }, {duration: 1500, delay: 10});
}
我不太清楚为什么会修复它,但可能有了新信息和这个网站 (https://css-tricks.com/svg-line-animation-works/),您应该能够弄明白。
[编辑@Corey] 这其实并不奇怪,500 是一个随机猜测,但显然您的路径组包含 439 "dashes"。 使用数字,您会发现需要将数字设置为正好 439 才能加载组中的所有路径。 [/编辑]