主页 / 问题 / 919069
Accepted
Arthur
Asked:2020-12-12 21:58:32 +0000 UTC2020-12-12 21:58:32 +0000 UTC

制作麦克风图标的反向 SVG 动画

  • 772

单击元素时会出现动画，但是再次单击时是否可以将元素返回到其原始状态。（制作反向动画）

const btn = document.querySelector('div[role="button"]');
const micro = document.querySelectorAll('.micro');
btn.onclick = () => {
  micro.forEach((e) => {
    e.beginElement();
  });
}
div[role="button"] {
  border: 0.0625rem solid;
  width: 68px;
  font-size: 0;
}
<div role="button">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="68" height="68" viewBox="0 0 24 24">
    <g>
    <rect id="top-part" x="9" y="3.5" width="6" height="12" rx="3" fill="#5A8CF6"/>
      <animate class="micro" xlink:href="#top-part" attributeName="height" from="12" to="6" dur="400ms" begin="indefinite" fill="freeze" />
      <animate class="micro" id="drill" xlink:href="#top-part" attributeName="y" from="3.5" to="9" begin="indefinite" dur="400ms" fill="freeze" />
    </g>
    <g stroke="#5A8CF6" fill="none">
      <g>
        <circle id="baloon" cx="12" cy="12" r="6" stroke-width="1.5" stroke-dasharray="37.7" stroke-dashoffset="18.8"/>
        <animate xlink:href="#baloon" attributeName="stroke-dashoffset" from="18.8" to="0" dur="300ms" begin="drill.end" fill="freeze"/>
      </g>
      <g>
        <rect id="leg" x="11" y="18" width="2" height="4" fill="#5A8CF6" stroke="none" transform-origin="top"/>
        <animate class="micro" xlink:href="#leg" attributeName="height" from="4" to="0" dur="400ms" begin="indefinite"  fill="freeze" />
      </g>
    </g>
  </svg>
</div>

javascript

2 个回答

    • 绿色按钮具有 id="play"从单选按钮到麦克风图标的启动动画 红色按钮具有 id="stop"从麦克风图标到单选按钮的启动动画
    • <polyline>我用一个属性 替换了矩形，stroke-linecap="round"这样就可以删除不必要的动画。
    • 如果动画在 svg 元素标签内，那么当动画在被动画元素之外xlink:href时，不需要编写此重定向 。

    <style>
  div[role="button"] {
    border: 0.0625rem solid;
    width: 68px;
    font-size: 0;
  }
</style>
<div role="button">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="68" height="68" viewBox="0 0 24 24">
    <polyline points="12,12 12,3.5" stroke="#5A8CF6" stroke-width="6" stroke-linecap="round">
      <animate attributeName="points" values="12,12 12,3.5;12,12 12,12" begin="stop.click" dur="0.4s" fill="freeze"/>
      <animate attributeName="points" values="12,12 12,12;12,12 12,3.5" begin="play.click" dur="0.4s" fill="freeze"/>  
    </polyline>
    <circle id="baloon" cx="12" cy="12" r="6" stroke-width="1.5" stroke="#5A8CF6" fill="none" stroke-dasharray="37.7" stroke-dashoffset="18.8">
      <animate attributeName="stroke-dashoffset" from="18.8" to="0" begin="stop.click" dur="0.3s" fill="freeze"/>
      <animate attributeName="stroke-dashoffset" from="0" to="18.8" begin="play.click" dur="0.3s" fill="freeze"/>
    </circle>
    <rect id="leg" x="11" y="18" width="2" height="4" fill="#5A8CF6" stroke="none">
      <animate attributeName="height" from="4" to="0" begin="stop.click" dur="0.3s" fill="freeze"/>
      <animate attributeName="height" from="0" to="4" begin="play.click" dur="0.3s" fill="freeze"/>
    </rect> 
    <g id="play">
      <circle  cx="4" cy="20" r="3" fill="yellowgreen"/>
    </g>
    <g id="stop">
      <circle  cx="20" cy="20" r="3" fill="crimson"/>
    </g>
  </svg>
</div>

    • 3
  2. Best Answer

    稍微调整了 SVG 并添加了一些 JS。确实，为了追求最小的变化，动画略有变化（我不知道这有多关键）：

    const btn = document.querySelector('div[role="button"]');
const micro = document.querySelectorAll('.micro');
btn.onclick = () => {
  micro.forEach((e) => {
    let sTemp = e.getAttribute('from');
    e.setAttribute('from', e.getAttribute('to'));
    e.setAttribute('to', sTemp);
    e.beginElement();
  });
}
    div[role="button"] {
  border: 0.0625rem solid;
  width: 68px;
  font-size: 0;
}
    <div role="button">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="68" height="68" viewBox="0 0 24 24">
    <g>
      <rect id="top-part" x="9" y="3.5" width="6" height="12" rx="3" fill="#5A8CF6"/>
      <animate class="micro" xlink:href="#top-part" attributeName="height" from="6" to="12" dur="400ms" begin="indefinite" fill="freeze" />
      <animate class="micro" id="drill" xlink:href="#top-part" attributeName="y" from="9" to="3.5" begin="indefinite" dur="400ms" fill="freeze" />
    </g>
    <g stroke="#5A8CF6" fill="none">
      <g>
        <circle id="baloon" cx="12" cy="12" r="6" stroke-width="1.5" stroke-dasharray="37.7" stroke-dashoffset="18.8"/>
        <animate class="micro" xlink:href="#baloon" attributeName="stroke-dashoffset" from="0" to="18.8" dur="400ms" begin="indefinite" fill="freeze"/>
      </g>
      <g>
        <rect id="leg" x="11" y="18" width="2" height="4" fill="#5A8CF6" stroke="none" transform-origin="top"/>
        <animate class="micro" xlink:href="#leg" attributeName="height" from="0" to="4" dur="400ms" begin="indefinite"  fill="freeze" />
      </g>
    </g>
  </svg>
</div>

    • 3

相关问题