题：
如何使其在单击“ Stop按钮时图像在当前状态下停止，下次按GO按钮时，动画不会从头开始，而是从锁定状态开始。
我不能这样做。
我将非常感谢任何解决方案CSS ， JS ， SVG或它们的组合。
我在代码片段中做了一些更改。 请看看，如果这是你想要的，请告诉我。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" onload='Init(evt)' id = "SVGRoot"> <title>animation planetary mechanism</title> <defs> <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20"> <rect width="14" height="10" rx="2" fill="#22211D" /> </marker> <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none; marker-end: url(#MarkerArrow); marker-start: url(#MarkerArrow); stroke:#22211D; stroke-width:6; "> </line> <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20"> <rect width="7" height="3.5" rx="2" fill="#22211D" /> </marker> <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none; marker-end: url(#MarkerArrow-s1); marker-start: url(#MarkerArrow-s); stroke:#22211D; stroke-width:2; "> </line> <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad"> <stop offset="0%" stop-color="powderblue" /> <stop offset="100%" stop-color="lightgreen" /> </linearGradient> </defs> <rect width="100%" height="100%" fill="url(#vertical)" /> <g transform="translate(90,50)"> <g id="wheel"> <g> <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="14s" id = "innerCircle" begin="click" repeatCount="indefinite" /> <use xlink:href="#line1" transform="rotate(0 100 100)" /> <use xlink:href="#line1" transform="rotate(120 100 100)" /> <use xlink:href="#line1" transform="rotate(240 100 100)" /> <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none; stroke-width: 4px;" /> <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none; stroke-width: 15px;" /> <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6; stroke-width: 10px;" /> <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " /> </g> </g> <g id="col-small"> <g> <animateTransform attributeName="transform" type="rotate" from="0 188 100" to="-360 188 100" id = "smallerCircle" begin="click" dur="3.5s" repeatCount="indefinite" /> <use xlink:href="#line-s" transform="rotate(0 188 100)" /> <use xlink:href="#line-s" transform="rotate(120 188 100)" /> <use xlink:href="#line-s" transform="rotate(240 188 100)" /> <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none; stroke-width: 4px;" /> <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none; stroke-width: 7px;" /> <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5; stroke-width: 10px;" /> <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " /> </g> </g> <g id="planetar"> <g> <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="-360 100 100" id = "outerCircle" begin="click" dur="28s" repeatCount="indefinite" /> <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5; stroke-width: 10px;" /> <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none; stroke-width: 12px;" /> <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " /> </g> </g> <g> <use xlink:href="#col-small" transform="rotate(240 100 100)" /> <use xlink:href="#col-small" transform="rotate(120 100 100)" /> </g> <g transform="translate(-10,160)"> <g id="gO1" onclick='Play()'> <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" /> <text x="62" y="102" font-size="16" fill="yellow">GO</text> </g> <g id="stop1" onclick='Pause()'> <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" /> <text x="120" y="102" font-size="16" fill="yellow">STOP</text> </g> </g> </g> </svg> <script> var SVGDocument = null; var SVGRoot = null; var pauseButton = null; var playButton = null; var innerCircle = null; var outerCircle = null; var smallerCircle = null; function Init(evt) { SVGDocument = evt.target.ownerDocument; SVGRoot = SVGDocument.getElementById('SVGRoot') pauseButton = SVGDocument.getElementById('stop1'); playButton = SVGDocument.getElementById('gO1'); innerCircle = SVGDocument.getElementById('innerCircle');; outerCircle = SVGDocument.getElementById('outerCircle');; smallerCircle = SVGDocument.getElementById('smallerCircle');; }; function Pause() { SVGRoot.pauseAnimations(); }; function Play() { if(SVGRoot.animationsPaused()){ SVGRoot.unpauseAnimations(); } else{ innerCircle.beginElement(); outerCircle.beginElement(); smallerCircle.beginElement(); } }; </script>
这是一个使用CSS的技巧/黑客。 我们的想法是依靠过渡来进行旋转，然后你用持续时间来创造冰冻的幻觉。 通过设置一个较大的值，您可以非常缓慢地进行转换，因此它将为我们停止。
您必须调整每个车轮的换算/旋转值才能达到所需的速度。 您还需要使值更大，以便用户永远不会到达转换的末尾。
$('#gO1').click(function() { $('#wheel,#col-small,#planetar').addClass('rotate').removeClass('rotate-1'); }) $('#stop1').click(function() { $('#wheel,#col-small,#planetar').addClass('rotate-1').removeClass('rotate'); })
#wheel, #col-small, #planetar{ transform-box:fill-box; transform-origin:center; } #wheel.rotate{ transform:rotate(36000deg); transition:1400s linear; } #planetar.rotate { transform:rotate(-36000deg); transition:2800s linear; } #col-small.rotate { transform:rotate(-36000deg); transition:350s linear; } #wheel.rotate-1{ transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/ transition:140000s linear; } #planetar.rotate-1 { transform:rotate(-36001deg); transition:280000s linear; } #col-small.rotate-1 { transform:rotate(-36001deg); transition:35000s linear; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" > <title>animation planetary mechanism</title> <defs> <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20"> <rect width="14" height="10" rx="2" fill="#22211D" /> </marker> <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none; marker-end: url(#MarkerArrow); marker-start: url(#MarkerArrow); stroke:#22211D; stroke-width:6; "> </line> <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20"> <rect width="7" height="3.5" rx="2" fill="#22211D" /> </marker> <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none; marker-end: url(#MarkerArrow-s1); marker-start: url(#MarkerArrow-s); stroke:#22211D; stroke-width:2; "> </line> <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad"> <stop offset="0%" stop-color="powderblue" /> <stop offset="100%" stop-color="lightgreen" /> </linearGradient> </defs> <rect width="100%" height="100%" fill="url(#vertical)" /> <g transform="translate(90,50)"> <g id="wheel"> <g> <use xlink:href="#line1" transform="rotate(0 100 100)" /> <use xlink:href="#line1" transform="rotate(120 100 100)" /> <use xlink:href="#line1" transform="rotate(240 100 100)" /> <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none; stroke-width: 4px;" /> <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none; stroke-width: 15px;" /> <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6; stroke-width: 10px;" /> <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " /> </g> </g> <g id="col-small"> <g> <use xlink:href="#line-s" transform="rotate(0 188 100)" /> <use xlink:href="#line-s" transform="rotate(120 188 100)" /> <use xlink:href="#line-s" transform="rotate(240 188 100)" /> <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none; stroke-width: 4px;" /> <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none; stroke-width: 7px;" /> <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5; stroke-width: 10px;" /> <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " /> </g> </g> <g id="planetar"> <g> <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5; stroke-width: 10px;" /> <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none; stroke-width: 12px;" /> <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " /> </g> </g> <g> <use xlink:href="#col-small" transform="rotate(240 100 100)" /> <use xlink:href="#col-small" transform="rotate(120 100 100)" /> </g> <g transform="translate(-10,160)"> <g id="gO1"> <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" /> <text x="62" y="102" font-size="16" fill="yellow">GO</text> </g> <g id="stop1"> <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" /> <text x="120" y="102" font-size="16" fill="yellow">STOP</text> </g> </g> </g> </svg>
UPDATE
上面的一个似乎只在chrome上运行正常，所以在这里另一个我必须复制小轮的代码，所以它在Firefox上工作正常：
$('#gO1').click(function() { $('#wheel,.col-small g,#planetar').addClass('rotate').removeClass('rotate-1'); }) $('#stop1').click(function() { $('#wheel,.col-small g,#planetar').addClass('rotate-1').removeClass('rotate'); })
#wheel, .col-small g, #planetar{ transform-box:fill-box; transform-origin:center; } #wheel.rotate{ transform:rotate(36000deg); /*360 x 100*/ transition:1400s linear; /*14s x 100*/ } #planetar.rotate { transform:rotate(-36000deg); transition:2800s linear; } .col-small g.rotate { transform:rotate(-36000deg); transition:350s linear; } #wheel.rotate-1{ transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/ transition:140000s linear; /*14s x 100 x 100*/ } #planetar.rotate-1 { transform:rotate(-36001deg); transition:280000s linear; } .col-small g.rotate-1 { transform:rotate(-36001deg); transition:35000s linear; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" > <title>animation planetary mechanism</title> <defs> <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20"> <rect width="14" height="10" rx="2" fill="#22211D" /> </marker> <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none; marker-end: url(#MarkerArrow); marker-start: url(#MarkerArrow); stroke:#22211D; stroke-width:6; "> </line> <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20"> <rect width="7" height="3.5" rx="2" fill="#22211D" /> </marker> <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none; marker-end: url(#MarkerArrow-s1); marker-start: url(#MarkerArrow-s); stroke:#22211D; stroke-width:2; "> </line> <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad"> <stop offset="0%" stop-color="powderblue" /> <stop offset="100%" stop-color="lightgreen" /> </linearGradient> </defs> <rect width="100%" height="100%" fill="url(#vertical)" /> <g transform="translate(90,50)"> <g id="wheel"> <g> <use xlink:href="#line1" transform="rotate(0 100 100)" /> <use xlink:href="#line1" transform="rotate(120 100 100)" /> <use xlink:href="#line1" transform="rotate(240 100 100)" /> <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none; stroke-width: 4px;" /> <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none; stroke-width: 15px;" /> <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6; stroke-width: 10px;" /> <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " /> </g> </g> <g class="col-small"> <g> <use xlink:href="#line-s" transform="rotate(0 188 100)" /> <use xlink:href="#line-s" transform="rotate(120 188 100)" /> <use xlink:href="#line-s" transform="rotate(240 188 100)" /> <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none; stroke-width: 4px;" /> <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none; stroke-width: 7px;" /> <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5; stroke-width: 10px;" /> <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " /> </g> </g> <g id="planetar"> <g> <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5; stroke-width: 10px;" /> <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none; stroke-width: 12px;" /> <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " /> </g> </g> <g class="col-small" transform="rotate(240 100 100)"> <g> <use xlink:href="#line-s" transform="rotate(0 188 100)" /> <use xlink:href="#line-s" transform="rotate(120 188 100)" /> <use xlink:href="#line-s" transform="rotate(240 188 100)" /> <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none; stroke-width: 4px;" /> <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none; stroke-width: 7px;" /> <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5; stroke-width: 10px;" /> <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " /> </g> </g> <g class="col-small" transform="rotate(120 100 100)"> <g> <use xlink:href="#line-s" transform="rotate(0 188 100)" /> <use xlink:href="#line-s" transform="rotate(120 188 100)" /> <use xlink:href="#line-s" transform="rotate(240 188 100)" /> <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none; stroke-width: 4px;" /> <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none; stroke-width: 7px;" /> <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5; stroke-width: 10px;" /> <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " /> </g> </g> <g transform="translate(-10,160)"> <g id="gO1"> <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" /> <text x="62" y="102" font-size="16" fill="yellow">GO</text> </g> <g id="stop1"> <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" /> <text x="120" y="102" font-size="16" fill="yellow">STOP</text> </g> </g> </g> </svg>
这是我的解决方案，与@Duannx解决方案非常相似。 然而，当谈到齿轮时，我希望看到它们合适。 （没有重叠的牙齿）。 所以我所做的就是试图重新计算牙齿的大小。 我希望你会喜欢。
动画开始并单击svg画布开始
c1r = 140;//the radius of the _c1 circle c1perim = 2*Math.PI * c1r;// the perimeter of the _c1 circle let sda = c1perim / 120;//sda = value for stroke-dasharray // a css variable used to set the value for stroke-dasharray cogs.style.setProperty("--foo", sda); // the perimeter of _c2. This is the smaller circle used for the 3 identical cogs c2perim = c1perim / Math.PI; c2r = c1r/4; //the radius of the c2 circle // the value of the cx attribute of the _c2 c2cx = 150 + c1r - c2r;// 150 = center.x of the cogs //the radius of the 3-rd circle, the one in the middle c3r = c1r - c2r*2 // setting attributes c1.setAttributeNS(null,"r",(c1r + sda)); _c1.setAttributeNS(null,"r",c1r); _c2.setAttributeNS(null,"cx",c2cx); c2.setAttributeNS(null,"cx",c2cx); _c2.setAttributeNS(null,"r",c2r); c2.setAttributeNS(null,"r",(c2r-sda)); g2.style.transformOrigin=`${c2cx}px 150px`; _c3.setAttributeNS(null,"r",c3r); c3.setAttributeNS(null,"r",(c3r-sda)); //event listener to toggle the class animated of the svg element cogs.addEventListener("click",()=>{cogs.classList.toggle("animated")})
svg { width: 300px; border: 1px solid; } circle { stroke-width: var(--foo); fill: none; } g { transform-origin: 150px 150px; animation: rotate 80s linear infinite; stroke: black; } .animated g{animation-play-state: paused;} #g2 { animation-duration:20s; stroke:#444; } #g3 { animation-duration:40s; animation-direction: reverse; } [id ^="_"] { stroke-dasharray: var(--foo); } #_c2 { stroke-dashoffset: var(--foo); } @keyframes rotate { to { transform: rotate(360deg); } }
<svg id="cogs" class="animated" viewBox="-20 -20 340 340"> <g id="g1"> <circle id="c1" cx="150" cy="150" r="" /> <circle id="_c1" cx="150" cy="150" r="" /> </g> <g id="g2"> <circle id="c2" cx="" cy="150" r="" /> <circle id="_c2" cx="" cy="150" r="" /> </g> <g id="g3"> <circle id="c3" cx="150" cy="150" r="" /> <circle id="_c3" cx="150" cy="150" r="" /> </g> <use xlink:href="#g2" transform="rotate(120 150 150 )" /> <use xlink:href="#g2" transform="rotate(240 150 150 )" /> </svg>
这是我创建的简单代码snipet来模拟这个想法。 所有你需要的是
animateTransform 。使用css transform properties）。 animation-play-state const runBtn = document.getElementById('runBtn') const pauseBtn = document.getElementById('pauseBtn') const circle = document.getElementById('circle') runBtn.addEventListener('click', () => { if (!circle.classList.contains('running')) { circle.classList.add('running') } }) pauseBtn.addEventListener('click', () => { circle.classList.remove('running') })
body { text-align: center; } #circle { animation: rotate 3s linear infinite; transform-origin: 200px 200px; animation-play-state: paused; } #circle.running { animation-play-state: running; } @keyframes rotate { 0% { transform: rotateZ(0) } 100% { transform: rotateZ(360deg) } }
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="200" height="200" viewBox="0 0 400 400" id="rootSvg"> <g id="circle"> <circle cx="200" cy="200" r="100" stroke-width="20" stroke="black" fill="none"/> <circle cx="200" cy="100" r="5" fill="yellow"/> </g> </svg><br> <button id="runBtn">run</button> <button id="pauseBtn">pause</button>