主页 / 问题 / 813981
Accepted
Daniil Dubchenko
Asked:2020-04-14 03:45:54 +0000 UTC2020-04-14 03:45:54 +0000 UTC

通过删除 animateTransform 重新启动 SVG 动画

  • 772

大家好。svg动画有问题。我需要js停止圆形动画（为此我删除了标签<animateTransform>），然后恢复它（返回标签），动画要么从头开始，要么更好地从它停止的地方开始。

但是当标签返回时，如果我没有删除动画，动画将从圆圈所在的位置继续。真正的问题是我做错了什么。

提前致谢！

const circle = document.getElementsByTagName('circle')[0],
  animate = `<animateTransform  
          attributeName="transform" 
          type="translate" 
          values="0;460;0"
          dur="3s"
          repeatCount="indefinite"/>`;
let b = true;
setInterval(() => {
  b ? circle.innerHTML = '' : circle.innerHTML = animate;
  b = !b
}, 1000);
<svg width="500" height="500">
    <circle r="20" cy="20" cx="20" fill="#ce3400">
          <animateTransform  
          attributeName="transform" 
          type="translate" 
          values="0;460;0"
          dur="3s"
          repeatCount="indefinite"/>
    </circle>
</svg>

javascript

2 个回答

  1. Best Answer
    • 添加“GO”和“STOP”按钮来启动和停止动画。我们挂事件onclick='start()'和 onclick='pause()'

    <svg width="500" height="500">
 <g transform="translate(-10,80)">
      <g id="gO1" onclick='start()'>
        <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 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>
</svg>

    • begin="gO1.click"单击带有标识符的按钮时向动画添加启动命令id="gO1"
    • 我们添加一个脚本来管理停止动画并从停止的地方重新启动它。

    以下是完整的应用程序代码： 

    let flag = 0,
    svg = document.querySelector('svg');

// Необходимо поймать второй клик (если на первом удалить атрибуты, анимация не начнётся), потом подменяем функцию на вызов по "разморозке" анимации
let start = function(){
  if(flag === 1){
    // Убираем у animateTransform триггер, чтобы не сбрасывалась анимация на ноль
    Array.from(svg.querySelectorAll('animateTransform')).forEach(e => e.removeAttribute('begin'));
    start = _ => svg.unpauseAnimations();
    start();
  }
  flag++;
}

const pause = function(){
  svg.pauseAnimations();
}  
    <svg width="500" height="500">
    <circle r="20" cy="20" cx="20" fill="#ce3400">
          <animateTransform  
          attributeName="transform" 
          type="translate" 
          values="0;460;0" 
		  begin="gO1.click"
          dur="3s"
          repeatCount="indefinite"/> 
    </circle> 
	
	  <g transform="translate(-10,60)">
      <g id="gO1" onclick='start()'>
        <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 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>
</svg>

    脚本和对它的评论不是我的。特别感谢曾经在网上找到的@Other。

    绘制螺旋的动画第二个例子 

    let flag = 0,
    svg = document.querySelector('svg');
let start = function(){
  if(flag === 1){
    Array.from(svg.querySelectorAll('animateMotion')).forEach(e => e.removeAttribute('begin'));
    start = _ => svg.unpauseAnimations();
    start();
  }
  flag++;
}
const pause = function(){
  svg.pauseAnimations();
}  
     <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="70%" heihgt="70%" viewBox="0 150 744 1052" id="svg2" version="1">
 <path id="spiral" stroke-dashoffset="6265" stroke-dasharray="6265"  d="m351 487c0 8-11 4-14-1-6-11 4-24 15-27 19-5 37 11 40 30 4 27-18 50-44 53-35 4-64-25-66-59-3-42 32-77 73-79 50-3 90 39 92 88 2 57-46 104-102 105-65 2-117-53-119-117-1-72 60-131 131-132 80-1 144 67 145 146 1 87-74 158-160 158-95 0-171-81-171-175 0-102 88-185 190-184 110 1 198 95 197 204C557 615 456 709 340 708 215 706 115 598 117 475 119 342 233 236 364 238 504 240 616 361 614 500 611 648 484 766 337 763 182 760 58 626 61 472 65 309 206 179 367 183c170 4 306 151 302 320-4 178-158 319-335 315" fill="none" stroke="grey" stroke-width="3">
 <animate attributeName="stroke-dashoffset" values="6265;0" begin="gO1.click" dur="20s" fill="freeze" restart="whenNotActive" /> 
 </path>

<circle cx="0" cy="0" r="15" fill="red" >
 <animateMotion id="an" dur="20s" repeatCount="indefinite" rotate="auto-reverse" begin="gO1.click" fill="freeze" restart="whenNotActive">
                    <mpath xlink:href="#spiral"/>
            </animateMotion>
</circle>			
 
 <g transform="translate(-42,100)">
      <g id="gO1" onclick='start();'>
        <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 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>
 
</svg>

    动画的第三个例子animateMotion 

    let flag = 0,
    svg = document.querySelector('svg');
let start = function(){
  if(flag === 1){
    Array.from(svg.querySelectorAll('animateMotion')).forEach(e => e.removeAttribute('begin'));
    start = _ => svg.unpauseAnimations();
    start();
  }
  flag++;
}
const pause = function(){
  svg.pauseAnimations();
}  
      <svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"
width="80%" height="80%" viewBox="0 80 400 400" preserveAspectRatio="xMinYMin meet"  >
<defs>
 <path id="Halifax" d="m0.59924304 90.492027c0 0 29.57819496 34.822463 50.33641496 40.748523 32.519562 9.28369 66.881642-13.94954 100.672832-12.5841 30.37494 1.2274 59.20656 14.18356 89.28721 18.57653 27.96955 4.08467 58.59856-4.1424 84.49327 7.19092 25.77547 11.28113 52.64841 30.50699 62.32127 56.92809 5.88571 16.07661 5.1424 38.46927-6.59167 50.93565-6.5515 6.96038-19.86195 10.13007-28.16442 5.39319-14.3782-8.20332-24.75614-32.23615-16.7788-46.74095 5.72157-10.40323 24.45669-13.69659 34.75609-7.79017 8.54871 4.90246 8.98864 28.16443 8.98864 28.16443"  fill="none" stroke="grey" />
 <path id="Montreal" d="m -18.644068,327.45763 c 0,0 50,-47.45763 51.694915,-80.08475 1.694916,-32.62712 46.250035,-33.90219 71.610173,-47.0339 38.40742,-19.88771 77.52234,-48.41729 120.76271,-47.45762 47.91599,1.06344 115.32666,29.09793 131.35593,58.47457 12.83212,23.51727 12.89881,61.90554 -6.77966,80.08475 -19.6086,18.11467 -60.92349,19.01095 -80.08475,0.42373 -20.18116,-19.57658 -20.69859,-63.21974 -2.11864,-84.32204 12.85378,-14.59876 40.7128,-14.749 58.05084,-5.9322 15.74146,8.00489 24.69348,28.21661 26.69493,45.76271 1.45817,12.7834 -1.19117,29.08693 -11.44068,36.86441 -15.87121,12.04331 -45.19359,15.30265 -59.74577,1.69491 -16.00262,-14.96405 -17.80904,-49.96379 -2.54237,-65.67796 10.03942,-10.3337 33.12482,-9.85517 43.22034,0.42373 12.07486,12.29419 11.35765,39.1192 -0.42373,51.69491 -6.58418,7.0281 -24.20393,10.57422 -28.81356,2.11864 -5.50315,-10.09461 -4.82155,-33.30802 20.76271,-27.54237 l 0,0"/>
 <path id="Calgary" d="m 432.65347,83.900354 c 0,0 -74.25173,59.645606 -115.05466,83.894026 -21.66047,12.87242 -47.63894,17.95673 -68.31371,32.35912 -21.32587,14.85596 -31.17874,46.00191 -55.7296,54.53112 -21.44134,7.44893 -54.97923,11.59821 -67.71446,-7.19092 -13.26989,-19.57794 -1.03144,-56.02328 19.17577,-68.3137 24.39964,-14.84034 67.47957,-5.99168 83.89403,17.37804 11.3655,16.18138 6.22235,45.4026 -8.3894,58.72582 -29.70449,27.08502 -95.53425,37.54029 -120.44785,5.99243 -31.850022,-40.33137 74.30061,-107.14247 43.1455,-148.01303 -19.35366,-25.388926 -70.767475,-18.378576 -95.761463,1.4825 -33.042095,26.25638 -55.9689527,89.22217 -30.508474,122.88136 15.856908,20.96311 57.894292,18.45707 78.813559,2.54237 22.902008,-17.4231 36.994628,-60.43224 20.338978,-83.8983 -13.30818,-18.74982 -49.918097,-20.12139 -68.644063,-6.77966 -20.814245,14.82957 -33.335737,54.28626 -17.79661,74.57627 11.684603,15.25701 42.223092,13.18501 57.627119,1.69491 14.994174,-11.18438 24.016704,-38.18846 14.406784,-54.23729 -8.201675,-13.69702 -33.749705,-20.47655 -46.610174,-11.01695 -8.098266,5.95673 -6.684637,24.51514 -2.118644,30.08476" style="fill:none;stroke:#000"/>   
 
  <path id="Quebec" stroke="none" fill="none" d="m 220.42163,347.7509 c 0,0 -0.44851,-49.0351 -2.0989,-98.86386 -1.431,-43.2052 3.88643,-88.98322 28.73097,-109.31338 29.64266,-24.25645 88.68863,-15.47783 114.64736,12.6168 21.62469,23.40398 24.57964,72.52926 2.1231,95.15172 -24.18791,24.36664 -79.01745,23.54947 -103.50109,-0.5257 -20.34152,-20.00217 -21.20458,-64.96515 -1.06155,-85.16342 20.63883,-20.69541 67.19752,-20.42552 88.10862,0 18.14151,17.72023 18.6938,57.48329 1.06155,75.70082 -17.27018,17.84344 -56.71261,19.09249 -74.83925,2.10279 -14.39783,-13.49477 -15.23376,-44.63362 -1.59232,-58.87841 14.00659,-14.62607 42.20404,-9.29016 61.0391,-1.57709 3.68065,1.50725 7.26981,4.74047 8.28579,8.58583 2.15892,8.17126 -6.29754,24.56042 -6.29754,24.56042"  />
  
  <path id="Saskatoon" d="m195.55354 343.27329c0 0-2.07051-68.55749-0.42012-118.38625 1.431-43.2052-3.88643-88.98322-28.73097-109.31338-29.64266-24.25645-88.68863-15.47783-114.64736 12.6168-21.62469 23.40398-24.57964 72.52926-2.1231 95.15172 24.18791 24.36664 79.01745 23.54947 103.50109-0.5257 20.34152-20.00217 21.20458-64.96515 1.06155-85.16342-20.63883-20.69541-67.19752-20.42552-88.10862 0-18.14151 17.72023-18.6938 57.48329-1.06155 75.70082 17.27018 17.84344 56.71261 19.09249 74.83925 2.10279 14.39783-13.49477 15.23376-44.63362 1.59232-58.87841-14.00659-14.62607-46.53727-15.72177-61.0391-1.57709-11.72426 11.43551-13.739284 41.01741 0.53077 48.89011 11.222462 6.19136 32.74723-20.15214 32.74723-20.15214" class="s0"/>
 
 </defs>


 <image width="400" height="400" xlink:href="https://isstatic.askoverflow.dev/1Yn0f.gif" /> 

<text id="Airplan" fill="gold"  font-size="24" transform="rotate(180)" >  &#9992; 
<animateMotion id="MotionHal" dur="16s" begin="gO1.click" fill="freeze" rotate="auto-reverse" repeatCount="indefinite"  >
<mpath xlink:href="#Halifax" />
</animateMotion>
</text>  

<text  fill="black"  font-size="24" transform="rotate(180)" >  &#9992; 
<animateMotion dur="16s"  begin="gO1.click" fill="freeze" rotate="auto-reverse" repeatCount="indefinite"  >
<mpath xlink:href="#Montreal" />
</animateMotion>
</text>   

<text  fill="lightcyan"  font-size="24" transform="rotate(180)" >  &#9992; 
<animateMotion dur="16s"  begin="gO1.click" fill="freeze" rotate="auto-reverse" repeatCount="indefinite"  >
<mpath xlink:href="#Calgary" />
</animateMotion>
</text> 

<text  fill="#FF00AE"  font-size="24" transform="rotate(180)" >  &#9992; 
<animateMotion dur="16s"  begin="gO1.click" fill="freeze" rotate="auto-reverse" repeatCount="indefinite"  >
<mpath xlink:href="#Quebec" />
</animateMotion>
</text> 

<text  fill="#FF00AE"  font-size="24" transform="rotate(180)" >  &#9992; 
<animateMotion dur="16s"   fill="freeze" rotate="auto-reverse" begin="gO1.click" repeatCount="indefinite"  >
<mpath xlink:href="#Saskatoon" />
</animateMotion>
</text> 
  <g transform="scale(0.75) translate(360,50)">
      <g id="gO1" onclick='start();'>
        <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 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>
 
</svg>

    • 4

  2. 如果我理解正确，你可以这样做。相反，我获取<animate/>了一个属性animation并添加了一个值forwards来存储元素的位置：

    var circle = document.getElementsByTagName("circle")[0];

function func() {
  if (this.checked = true) {
    circle.classList.toggle("animate-circle");
    circle.classList.toggle("back");
  }
}
    .animate-circle {
  animation: offsetRight 1s linear 1 forwards;
}

.back {
  animation: offsetLeft 1s linear 1 forwards;
}

@keyframes offsetRight {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(460px);
  }
}

@keyframes offsetLeft {
  from {
    transform: translateX(460px);
  }
  to {
    transform: translateX(0px);
  }
}
    <svg width="500" height="50">
    <circle class="animate-circle" r="20" cy="20" cx="20" fill="#ce3400"/>
</svg>
<input type="checkbox" onchange="func()">

    • 3

相关问题