时间戳

首页 > 解决方案 > 我有 SVG 文件，我想在其中无限期地循环动画。我不明白我怎么能做到这一点

vue.js - 我有 SVG 文件，我想在其中无限期地循环动画。我不明白我怎么能做到这一点

问题描述

这是 SVG - 我想要做的是在 VueJs 的加载期间将此 svg 放入。但问题是它仅在第一次尝试时运行，感谢任何帮助。我以前认为我可以每次都重新加载特定的组件，但这似乎也不起作用。

<svg width="100%" height="100%" viewBox="0 0 1920 1080" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
                        <g>
                            <g transform="matrix(0.923077,0,0,1.03448,6.15385,-13.7931)">
                                <rect x="210" y="110" width="650" height="870" style="fill:rgb(223,222,220);stroke:black;stroke-width:1.48px;" />
                            </g>
                            <path d="M300,240L510,240" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
                            <path d="M540,320L720,320" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
                            <path d="M360,380L560,380" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
                            <path d="M300,500L600,500" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
                            <path d="M405,600L580,600" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
                            <path d="M500,700L700,700" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
                            <path d="M600,200L700,200" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
                            <path d="M300,800L500,800" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
                            <path d="M400,900L700,900" style="fill:none;stroke:rgb(7,7,7);stroke-width:14.69px;" />
                        </g>
                        <g transform="matrix(1,0,0,1,900,-5.68434e-14)">
                            <g transform="matrix(0.923077,0,0,1.03448,6.15385,-13.7931)">
                                <rect x="210" y="110" width="650" height="870" style="fill:rgb(223,222,220);stroke:black;stroke-width:1.48px;" />
                            </g>
                            <path d="M300,240L510,240" style="fill:none;stroke:rgb(255,100,0);stroke-width:0px;">
                                <animateMotion path="M-900,0L0,0" begin="1.5s" dur="1s" fill="freeze" />
                                <animate attributeName="stroke-width" from="0px" to="15px" begin="1.5s" dur="1s" fill="freeze" />
                            </path>
                            <path d="M540,320L720,320" style="fill:none;stroke:rgb(206,59,59);stroke-width:0px;">
                                <animateMotion path="M-900,0L0,0" begin="0s" dur="1s" fill="freeze" />
                                <animate attributeName="stroke-width" from="0px" to="15px" begin="0s" dur="1s" fill="freeze" />
                            </path>
                            <path d="M360,380L560,380" style="fill:none;stroke:rgb(0,255,95);stroke-width:0px;">
                                <animateMotion path="M-900,0L0,0" begin="2.5s" dur="1s" fill="freeze" />
                                <animate attributeName="stroke-width" from="0px" to="15px" begin="2.5s" dur="1s" fill="freeze" />
                            </path>
                            <path d="M300,500L600,500" style="fill:none;stroke:rgb(255,183,0);stroke-width:0px;">
                                <animateMotion path="M-900,0L0,0" begin="2s" dur="1s" fill="freeze" />
                                <animate attributeName="stroke-width" from="0px" to="15px" begin="2s" dur="1s" fill="freeze" />
                            </path>
                            <path d="M405,600L580,600" style="fill:none;stroke:rgb(189,255,0);stroke-width:0px;">
                                <animateMotion path="M-900,0L0,0" begin="4s" dur="1s" fill="freeze" />
                                <animate attributeName="stroke-width" from="0px" to="15px" begin="4s" dur="1s" fill="freeze" />
                            </path>
                            <path d="M500,700L700,700" style="fill:none;stroke:rgb(255,6,0);stroke-width:0px;">
                                <animateMotion path="M-900,0L0,0" begin="3.5s" dur="1s" fill="freeze" />
                                <animate attributeName="stroke-width" from="0px" to="15px" begin="3.5s" dur="1s" fill="freeze" />
                            </path>
                            <path d="M600,200L700,200" style="fill:none;stroke:rgb(47,0,255);stroke-width:0px;">
                                <animateMotion path="M-900,0L0,0" begin="0.5s" dur="1s" fill="freeze" />
                                <animate attributeName="stroke-width" from="0px" to="15px" begin="0.5s" dur="1s" fill="freeze" />
                            </path>
                            <path d="M300,800L500,800" style="fill:none;stroke:rgb(0,205,255);stroke-width:0px;">
                                <animateMotion path="M-900,0L0,0" begin="4.5s" dur="1s" fill="freeze" />
                                <animate attributeName="stroke-width" from="0px" to="15px" begin="4.5s" dur="1s" fill="freeze" />
                            </path>
                            <path d="M400,900L700,900" style="fill:none;stroke:rgb(161,133,77);stroke-width:0px;">
                                <animateMotion path="M-900,0L0,0" begin="5.5s" dur="1s" fill="freeze" />
                                <animate attributeName="stroke-width" from="0px" to="15px" begin="5.5s" dur="1s" fill="freeze" />
                            </path>
                        </g>
                        <g transform="matrix(0.5,0,0,1,95,0)">
                            <path d="M250,67.5C250,63.361 243.279,60 235,60L205,60C196.721,60 190,63.361 190,67.5L190,1042.5C190,1046.64 196.721,1050 205,1050L235,1050C243.279,1050 250,1046.64 250,1042.5L250,67.5Z" style="fill:rgb(79,227,43);stroke:black;stroke-width:1.26px;" />
                            <animateMotion path="M0,0L600,0L0,0" begin="0s" dur="5s" repeatCount="indefinite" />
                        </g>
                        <g transform="matrix(1,0,0,1,0,-60)">
                            <path d="M820,613.75L820,596.25L1055,596.25L1055,580L1080,605L1055,630L1055,613.75L820,613.75Z" style="fill:rgb(64,67,211);stroke:rgb(30,82,211);stroke-width:1px;" />
                        </g>
                 
                    </svg>

标签： vue.jssvg

解决方案

以下是解决此问题的方法：

  1. 为了让动画连续运行而不是只运行一次，请在里面设置以下内容animateMotion：
repeatCount="indefinite"
  1. 您希望动画前后移动：
    • 在 t0（动画循环开始），元素应该在初始位置
    • 在动画的中间时间，元素应该在最终位置
    • 在 t1（动画循环结束），元素应该回到初始位置。

这可以用keyPoints和来控制keyTimes。

再次在里面animateMotion，下面对应上面描述的动画循环。

keyPoints="0;1;0" keyTimes="0;.5;1"

下面的代码片段显示了问题中共享的示例代码中的一个动画矩形中的解决方案。

请注意，动画持续时间必须加倍以保持与问题中相同的移动速度，因为现在移动长度增加了两倍（前后）而不是单向）。

另请阅读：这个答案。

<svg width="100%" height="100%" viewBox="0 0 1920 1080" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">

    <g transform="matrix(1,0,0,1,900,-5.68434e-14)">

        <path d="M300,240L510,240" style="fill:none;stroke:rgb(255,100,0);stroke-width:0px;">
            <animateMotion path="M-900,0L0,0" begin="0.5s" dur="2s" fill="freeze" keyPoints="0;1;0" keyTimes="0;.5;1" repeatCount="indefinite"/>
            <animate attributeName="stroke-width" from="0px" to="15px" begin="0.5s" dur="1s" fill="freeze" />
        </path>
     </g>
</svg>

推荐阅读