SVG 和 VelocityJS 动画问题

Question

出于某种原因，我下面代码中的 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

>

Answer 1

现在您可以使用

解决这个问题

<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 和 VelocityJS 动画问题

SVG & VelocityJS Animation Issue

jquery

animation

svg

velocity.js

stroke-dasharray