主页 / 问题 / 1104249
Accepted
DarkRou
Asked:2020-04-02 14:48:51 +0800 CST2020-04-02 14:48:51 +0800 CST

SVG中动画重复之间的延迟

  • 772

我学会了如何制作 SVG 动画，一切顺利。我想要一个循环动画，在迭代之间有几秒钟的延迟。我得到了固定，但没有延迟。

 .logoPath {
        fill: none;
        stroke-width: 35;
        stroke-linecap: round;
        stroke-miterlimit: 10;
    }

    .logoColor {
        stroke: #5db3e6;
     }
<?xml-stylesheet type="text/css" href="/css/style.css"?>
<svg version="1.1" id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 2739.1 3607.7" style="enable-background:new 0 0 2739.1 3607.7;" xml:space="preserve">
	<path class="logoPath logoColor" d="M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z">
		<animate
				attributeName="d"
				begin="0.5s"
				dur="0.5s"
				repeatCount="indefinite"
				fill="remove"
				values="M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z;
				 M1389.9,899.5c0,0,81.5,26.4,129.5,50.4s134.5,87.6,134.5,87.6S1473.9,881.5,1389.9,899.5z;
				 M1389.9,899.5c0,0,81.5,26.4,129.5,50.4s134.5,87.6,134.5,87.6S1473.9,881.5,1389.9,899.5z;
				 M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z"
		/>
	</path>
	<path class="logoPath logoColor" d="M680.7,2597.5c-72,420,195,594,195,594c-31.5-182.1,147-496,147-496c4,488,400,552,400,552
	c-204-196-116-690-116-690c272,304,248,952,248,952c336-644,74-1153,74-1153c236,188,252,568,252,568
	c248.7-313.5,152.1-630.7,63.4-803.5c-35.7-69.6-91.8-126.6-160.9-163.4c-282.5-150.2-309.6-366.7-309.6-366.7
	c196.9,132.3,616.7,193.8,771.5,212.6c81.6,9.9,164.4-7.9,233.8-51.8c170.8-108.1,186.6-321,186.6-321c-180-150-725.3-409-725.3-409
	S1758.7,481,1204.7,421.5c0,0-19.5-204.9,26-390c-11.5,4.4-274.6,75.2-378.9,341.9c-21.8,55.7-62,109.8-120.3,122.8
	C498.3,548.5,76.4,841.6,53.7,1257.5c0,0,162-134,214-146c0,0-354,617-214,906c0,0,63.9-163,194-240c0,0-230,588-54,932
	c0,0,78-224,166-276c0,0-105,454,247,1038C606.7,3471.5,498.7,3011.5,680.7,2597.5z"/>
	<path class="logoPath logoColor" d="M2505,1321c0,0,72.9,259.2,114.3,269.1"/>
	<path class="logoPath logoColor" d="M1204.7,213.5c0,0,36-128,158-174c0,0-50,339,47,430"/>
</svg>

xml

1 个回答

  1. Best Answer

    我想要一个循环动画，在迭代之间有几秒钟的延迟。

    可以通过添加第二个动画来获得眼睑眨眼动画之间的暂停 - 一个什么都不做的暂停（等待：），dur="2s"并且在这个暂停动画的持续时间结束后，第一个眼睑眨眼动画再次开始。

    暂停 

    <animate id="pause"
                attributeName="d"
                begin=an1.end"
                dur="2s"
                repeatCount="1"
                fill="freeze"
                values=""
        />

    其中begin=an1.end"- 表示暂停动画的开始，在第一个动画结束之后id="an1"

    眨眼动画循环

    begin="svg1.click;pause.end"

    这个条件告诉我们，第一次运行动画将在单击 SVG 画布后开始，而相同的动画将在暂停动画结束后再次开始。

    .logoPath {
        fill: none;
        stroke-width: 35;
        stroke-linecap: round;
        stroke-miterlimit: 10;
    }

    .logoColor {
        stroke: #5db3e6;
     }
    <?xml-stylesheet type="text/css" href="/css/style.css"?>
<svg id="svg1" version="1.1" id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30%" height="30%"
	 viewBox="0 0 2739.1 3607.7" style="enable-background:new 0 0 2739.1 3607.7;" xml:space="preserve">
	<path fill="gold" class="logoPath logoColor" d="M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z">
		<animate
				attributeName="d" id="an1"
				begin="svg1.click;pause.end"
				dur="0.5s"
				repeatCount="3"
				fill="freeze"
        restart="whenNotActive"
				values="M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z;
				 M1389.9,899.5c0,0,81.5,26.4,129.5,50.4s134.5,87.6,134.5,87.6S1473.9,881.5,1389.9,899.5z;
				 M1389.9,899.5c0,0,81.5,26.4,129.5,50.4s134.5,87.6,134.5,87.6S1473.9,881.5,1389.9,899.5z;
				 M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z"
		/>  
		<animate
				<animate id="pause"
				attributeName="d"
				begin="an1.end"
				dur="2s"
				repeatCount="1"
				fill="freeze"
        restart="whenNotActive"
				values="M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z"
		/>
		
	</path>
	<path class="logoPath logoColor" d="M680.7,2597.5c-72,420,195,594,195,594c-31.5-182.1,147-496,147-496c4,488,400,552,400,552
	c-204-196-116-690-116-690c272,304,248,952,248,952c336-644,74-1153,74-1153c236,188,252,568,252,568
	c248.7-313.5,152.1-630.7,63.4-803.5c-35.7-69.6-91.8-126.6-160.9-163.4c-282.5-150.2-309.6-366.7-309.6-366.7
	c196.9,132.3,616.7,193.8,771.5,212.6c81.6,9.9,164.4-7.9,233.8-51.8c170.8-108.1,186.6-321,186.6-321c-180-150-725.3-409-725.3-409
	S1758.7,481,1204.7,421.5c0,0-19.5-204.9,26-390c-11.5,4.4-274.6,75.2-378.9,341.9c-21.8,55.7-62,109.8-120.3,122.8
	C498.3,548.5,76.4,841.6,53.7,1257.5c0,0,162-134,214-146c0,0-354,617-214,906c0,0,63.9-163,194-240c0,0-230,588-54,932
	c0,0,78-224,166-276c0,0-105,454,247,1038C606.7,3471.5,498.7,3011.5,680.7,2597.5z"/>
	<path class="logoPath logoColor" d="M2505,1321c0,0,72.9,259.2,114.3,269.1"/>
	<path class="logoPath logoColor" d="M1204.7,213.5c0,0,36-128,158-174c0,0-50,339,47,430"/>
</svg>

    • 3

相关问题