이퀄라이저 시작 버튼을 올바르게 작동시키는 방법은 무엇입니까?
Nov 19 2020
나는 오디오 주파수의 변화를 보여주는 측면에서 이퀄라이저의 작동을 시뮬레이션하는 애플리케이션을 개발했습니다.
"시작"버튼을 다시 누르면 애니메이션 문제가 발생합니다.
애니메이션 결과가 재설정되고 처음부터 다시 시작됩니다.
물론 애니메이션이 활성화되어있는 동안 반복되는 클릭에 대한 보호 기능을 설정하면이를 방지 할 수 있습니다.
restart =" whenNotactive "
그러나 이것은 문제에 대한 불완전한 해결책입니다.
begin ="start.click""시작"버튼과
"일시 중지"버튼에 이벤트 를 중단하려고했습니다.end ="pause.click"
내 코드는 다음과 같습니다.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 400 150" preserveAspectRatio="xMinYMin meet" >
<defs>
<!-- Mask for forming the display of a part of the active line (with stroke = "white") -->
<mask id="msk">
<rect width="100%" height="100%" fill="black" />
<rect x="15" y="0" width="60" height="160" fill="white" stroke="white" />
</mask>
</defs>
<!-- Black background -->
<rect width="22%" height="100%" fill="black" />
<!-- Colored line markers to show equalizer frequency levels -->
<polyline points="10,0 10,139" stroke="#4C4C50" />
<polyline points="80,0 80,139" stroke="#4C4C50" />
<polyline id="grey" points="20,0 20,139" stroke="#2A2A2C" />
<use xlink:href="#grey" x="10" />
<use xlink:href="#grey" x="20" />
<use xlink:href="#grey" x="30" />
<use xlink:href="#grey" x="40" />
<use xlink:href="#grey" x="50" />
<polyline points="15,2 74,2" stroke-width="2" stroke="#2A2A2C" />
<polyline points="15,19 74,19" stroke="red" />
<polyline points="15,44 74,44" stroke="green" />
<polyline points="15,69 74,69" stroke="dodgerblue" />
<polyline points="15,94 74,94" stroke="green" />
<polyline points="15,119 74,119" stroke="gold" />
<polyline points="15,139 74,139" stroke-width="2" stroke="#2A2A2C" />
<!-- Frequency labeling text -->
<text x="12" y="15" font-size="6px" fill="yellow">16K</text>
<text x="12" y="40" font-size="6px" fill="yellow">6K</text>
<text x="12" y="67" font-size="6px" fill="yellow">1K</text>
<text x="12" y="92" font-size="6px" fill="yellow">310</text>
<text x="12" y="117" font-size="6px" fill="yellow">170</text>
<!-- Button to start animation -->
<g id="start" transform="translate(60,0)" cursor="pointer">
<text x="2" y="147" font-size="8px" fill="yellow">Start</text>
<circle cx="23" cy="145" r="3" fill="greenyellow" />
</g>
<g id="pause" transform="translate(10,0)" cursor="pointer">
<text x="2" y="147" font-size="8px" fill="yellow">Pause</text>
<circle cx="25" cy="145" r="3" fill="red" />
</g>
<!-- Trajectory of line movement showing audio frequency -->
<g stroke-linecap="round" stroke-linejoin="round" mask="url(#msk)">
<path id="trace" transform="translate(348, 0)"
fill="none" stroke="cyan" stroke-width="1.5" d="m-246 68.4c0 0 32.6 0 47.8 0 9.2 0 12.9-30.8 16.4-22.3 4.8 11.5 6 43.3 6 43.3l7.9-26.6 5 35.9 8.9-63.5 3.7 80.9 5.2-93.7 4.8 108.2 6.6-125.2 2.6 84 4.8-31.8 5 23.3 2-18.1 5.5 12.1 4-12.1 2.8 26.6 3.3-31.8 3.6 43.1 5.5-55.5 2.2 70.8 6.5-80.9 3.2 95.4 6-112.9 2.7 125.7 7-131.5 2.6 131.5 5.9-131.6 5.1 118.8 8.7-108.2 5 93.7 10.1-87.9 3.4 76.1 11.8-69.2 3.1 54.3L-5.6 44.1 0 74.9 4 57.7 8.6 74.9 13.7 51l4.3 23.9 4.7-35.2 8.2 53.5 6.3-58.1 5.7 54.3 9-54.3 5.9 54.3 6.2-54.3 8.6 54.3 5.9-67.1 8.6 81.9 7.3-89.6 5.5 95.4 6.6-100.6 6.2 115.5 6.9-115.1 4.1 128.6 7.3-127.6 2.8 132.4 8.3-133.8 4.1 121 4.8-108.2 4.8 101.7 4.8-96.5 5.9 94.4 2.8-86.8 4.8 73 4.1-62.9 6.9 59.1 2.8-50.1 4.8 42.2 2.4-37.7 4.1 27 2.1-22.8 2.4 20.4 1.7-24.9 2.4 22.5 2.4-21.4 1.7 15.6 3.1-12.1 2.8 67.8 3.8-95.4 2.8 89.9 9.7-102.7 4.1 102 6.2-102 4.1 93.7 4.8-80.9 4.8 69.2 4.5-61.2 3.8 53.9 4.1-41.1 3.8 27.7 3.1-20.7 4.1 12.1 2.8-12.1 3.5 12.1 2.4-12.1 4.5 26.6 2.4-42.1 6.6 57 4.8-69.2 7.3 80.9 5.5-93.7 10.4 108.2 2.1-114.5 8 127.2 2.8-130.7 8 122.4 4.8-124.5 8 114.5 3.5-98.2 7.3 83 5.5-79.5 4.8 68.8 6.9-53.1V80.8l4.5-18 5.2 17.2 3-22.4 3.4 27 5.1-27 2.4 46.7 7.5-69.2 2.9 76.5c0 0 2.8-66.4 7.3-84.8 5.3-21.4 6.6 103.7 6.6 103.7l7-116.8 10 129.6 3.2-112.6 8.8 112.6 2.8-94.6 8 48.3 1.9-44 2.9 29.7 3.6-25 4.7 21.5 3.6-16.3 3.1 14.8 6.5-64.2 5.2 102.7 7.5-101.1 5.6 101.1 6.2-97.9 5.9 92.8 5.5-82.9 5.2 80.7 4.3-70.7 2.7 66.3 6-54.4 4.1 46 6.2-83.1 6.9 117.8 4.6-116.1 10 101.6 0.4-78.3 8 60.5c0 0 3.1-34.2 6.8-51 2.7-12.1 2 16.9 8.2 21.1 4.2 2.9 15.4 0.1 15.4 0.1h19.7" >
<!-- Equalizer line animation -->
<animateTransform
id="at1"
attributeName="transform"
type="translate"
begin="start.click"
end="pause.click"
dur="22s"
values="250 0;-650 0"
fill="freeze"
repeatCount="3" />
</path>
</g>
</svg> 그러나 이것은 당신에게 필요한 것이 아닙니다. Start버튼 을 누르면 처음부터 애니메이션이 다시 시작됩니다 .
나는 때 필요한 Pause버튼을 누르면, 애니메이션이 정지하고 때 Start버튼을 다시 누르면, 그것은 정지 지점부터 시작됩니다.
질문:
Start버튼을 다시 누를 때 이전 애니메이션이 멈춘 곳에서 애니메이션을 시작하는 방법은 무엇입니까?
순전히 SVG에서는이 작업이 불가능합니다. 따라서 CSS 및 JS 솔루션이 도움이 될 것입니다.
답변
2 Alexandr_TT Nov 19 2020 at 13:31
옵션 JS 솔루션
Javascript 메소드가 사용됩니다.
SVGRoot.animationsPaused ()
SVGRoot.unpauseAnimations ()
function Init(evt)
{
SVGDocument = evt.target.ownerDocument;
SVGRoot = SVGDocument.getElementById('SVGRoot');
pauseButton = SVGDocument.getElementById('pause1');
playButton = SVGDocument.getElementById('start1');
equalizer = SVGDocument.getElementById('equalizer');
};
function Pause()
{
SVGRoot.pauseAnimations();
};
function Start()
{
if(SVGRoot.animationsPaused()){
SVGRoot.unpauseAnimations();
}
else{
equalizer.beginElement();
}
};text.yellow {
fill:yellow;
font-size:6px;
}
g#gr1 {
stroke-linecap:round;
stroke-linejoin:round;
mask:url(#msk);
transform:translate(348, 0);
}
#trace{
fill:none;
stroke:cyan;
stroke-width:1.5;
}<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 400 150" preserveAspectRatio="xMinYMin meet"
onload='Init(evt)' id = "SVGRoot" >
<defs>
<!-- Mask for forming the display of a part of the active line (with stroke = "white") -->
<mask id="msk">
<rect width="100%" height="100%" fill="black" />
<rect x="15" y="0" width="60" height="160" fill="white" stroke="white" />
</mask>
</defs>
<!-- Black background -->
<rect width="22%" height="100%" fill="black" />
<!-- Colored line markers to show equalizer frequency levels -->
<polyline points="10,0 10,139" stroke="#4C4C50" />
<polyline points="80,0 80,139" stroke="#4C4C50" />
<polyline id="grey" points="20,0 20,139" stroke="#2A2A2C" />
<use xlink:href="#grey" x="10" />
<use xlink:href="#grey" x="20" />
<use xlink:href="#grey" x="30" />
<use xlink:href="#grey" x="40" />
<use xlink:href="#grey" x="50" />
<polyline points="15,2 74,2" stroke-width="2" stroke="#2A2A2C" />
<polyline points="15,19 74,19" stroke="red" />
<polyline points="15,44 74,44" stroke="green" />
<polyline points="15,69 74,69" stroke="dodgerblue" />
<polyline points="15,94 74,94" stroke="green" />
<polyline points="15,119 74,119" stroke="gold" />
<polyline points="15,139 74,139" stroke-width="2" stroke="#2A2A2C" />
<!-- Frequency labeling text -->
<text class="yellow" x="12" y="15" >16K</text>
<text class="yellow" x="12" y="40" >6K</text>
<text class="yellow" x="12" y="67" >1K</text>
<text class="yellow" x="12" y="92" >310</text>
<text class="yellow" x="12" y="117" >170</text>
<!-- Button to start animation -->
<g id="start1" transform="translate(60,0)" cursor="pointer" onclick='Start()'>
<text x="2" y="147" font-size="8px" fill="yellow">Start</text>
<circle cx="23" cy="145" r="3" fill="greenyellow" />
</g>
<g id="pause1" transform="translate(10,0)" cursor="pointer" onclick='Pause()'>
<text x="2" y="147" font-size="8px" fill="yellow">Pause</text>
<circle cx="25" cy="145" r="3" fill="red" />
</g>
<!-- Trajectory of line movement showing audio frequency -->
<g id="gr1">
<path id="trace" transform="translate(348, 0)"
fill="none" stroke="cyan" stroke-width="1.5" d="m-246 68.4c0 0 32.6 0 47.8 0 9.2 0 12.9-30.8 16.4-22.3 4.8 11.5 6 43.3 6 43.3l7.9-26.6 5 35.9 8.9-63.5 3.7 80.9 5.2-93.7 4.8 108.2 6.6-125.2 2.6 84 4.8-31.8 5 23.3 2-18.1 5.5 12.1 4-12.1 2.8 26.6 3.3-31.8 3.6 43.1 5.5-55.5 2.2 70.8 6.5-80.9 3.2 95.4 6-112.9 2.7 125.7 7-131.5 2.6 131.5 5.9-131.6 5.1 118.8 8.7-108.2 5 93.7 10.1-87.9 3.4 76.1 11.8-69.2 3.1 54.3L-5.6 44.1 0 74.9 4 57.7 8.6 74.9 13.7 51l4.3 23.9 4.7-35.2 8.2 53.5 6.3-58.1 5.7 54.3 9-54.3 5.9 54.3 6.2-54.3 8.6 54.3 5.9-67.1 8.6 81.9 7.3-89.6 5.5 95.4 6.6-100.6 6.2 115.5 6.9-115.1 4.1 128.6 7.3-127.6 2.8 132.4 8.3-133.8 4.1 121 4.8-108.2 4.8 101.7 4.8-96.5 5.9 94.4 2.8-86.8 4.8 73 4.1-62.9 6.9 59.1 2.8-50.1 4.8 42.2 2.4-37.7 4.1 27 2.1-22.8 2.4 20.4 1.7-24.9 2.4 22.5 2.4-21.4 1.7 15.6 3.1-12.1 2.8 67.8 3.8-95.4 2.8 89.9 9.7-102.7 4.1 102 6.2-102 4.1 93.7 4.8-80.9 4.8 69.2 4.5-61.2 3.8 53.9 4.1-41.1 3.8 27.7 3.1-20.7 4.1 12.1 2.8-12.1 3.5 12.1 2.4-12.1 4.5 26.6 2.4-42.1 6.6 57 4.8-69.2 7.3 80.9 5.5-93.7 10.4 108.2 2.1-114.5 8 127.2 2.8-130.7 8 122.4 4.8-124.5 8 114.5 3.5-98.2 7.3 83 5.5-79.5 4.8 68.8 6.9-53.1V80.8l4.5-18 5.2 17.2 3-22.4 3.4 27 5.1-27 2.4 46.7 7.5-69.2 2.9 76.5c0 0 2.8-66.4 7.3-84.8 5.3-21.4 6.6 103.7 6.6 103.7l7-116.8 10 129.6 3.2-112.6 8.8 112.6 2.8-94.6 8 48.3 1.9-44 2.9 29.7 3.6-25 4.7 21.5 3.6-16.3 3.1 14.8 6.5-64.2 5.2 102.7 7.5-101.1 5.6 101.1 6.2-97.9 5.9 92.8 5.5-82.9 5.2 80.7 4.3-70.7 2.7 66.3 6-54.4 4.1 46 6.2-83.1 6.9 117.8 4.6-116.1 10 101.6 0.4-78.3 8 60.5c0 0 3.1-34.2 6.8-51 2.7-12.1 2 16.9 8.2 21.1 4.2 2.9 15.4 0.1 15.4 0.1h19.7" >
<!-- Equalizer line animation -->
<animateTransform
id="equalizer"
attributeName="transform"
type="translate"
dur="22s"
values="250 0;-650 0"
fill="freeze"
repeatCount="indefinite"
restart="whenNotActive"
/>
</path>
</g>
</svg> 최신 정보
라이브 데모