Как заанимировать эквалайзер

158

22 мая 2022, 12:40

Есть задача заанимировать такой эквалайзер https://prnt.sc/vki1ks.

Он должен просто попрыгать в течении некоторого времени и превратиться в линию (без музыки). Пробовал сделать в canvas с помощью библиотеки paper.js, но линии вышли нечёткие из-за скругления, есть ещё решения, может не через канвас, а просто свгшку можно?

Answer 1

Он должен просто попрыгать в течении некоторого времени и превратиться в линию (без музыки).

Как видно из векторной картинки прямые участки линии выходят за область видимости документа SVG (черный прямоугольник) поэтому они будут не видны.

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="160" viewBox="0 0 400 160" preserveAspectRatio="xMinYMin meet" style="border:1px solid">
   <path d="m694.5 68.6c0 0-65.5-2.8-95.9-0.8-17.7 1.2-38.6-0.8-53.3-1.4-16.5-0.7-33.7 2.3-49.3 0.2-14.2-1.9-29.6 6.2-41.3 2.8-9.7-2.8-24-4-35.8 1-3.7 1.6-9.6-0.6-11.9-1.9-2.2-1.1-4.7 2.3-7.1 1.9-2.4-0.4-3.6-4.5-6.1-4.3-3.1 0.2-3.8 5.9-6.9 6.4-3 0.5-5.9-1.9-8.4-3.6-3.3-2.3-4.6-9-8.6-8.5-6.1 0.7-7.6 18.6-10 15.5-3.1-3.9-1.9-7.1-3.4-13.2-0.4-1.5-3.8-2.3-4.4-1-4 8.4-6.2 17.9-9.8 28.9-0.5 1.6-4.4 0.6-4.9-1-3.8-13-3.9-23.8-8.3-41.1-0.4-1.6-4.5-1.6-4.9 0-2.9 11.4-4.7 21.2-8.8 32.8-0.4 1.2-3.2 1.1-3.9 0-3.9-6.1-3.6-12.4-7.3-21.5-0.7-1.7-4.9-0.3-5.4 1.5-4.3 15.5-6.1 25.8-11.2 41.6-0.5 1.4-4 1.9-4.4 0.5-5.1-19.6-5.8-35.3-9.3-56.2-0.3-2-5.4-1-5.9 1-4.8 21.9-5.7 38.8-10.3 61.1-0.4 1.9-5.1-0.1-5.4-2-3.4-24.3-5.5-49.2-9.3-72.9-0.3-2-5.6-0.5-5.9 1.5-3.5 22.9-6.3 42.2-9.8 60.1-0.3 1.8-5 0.8-5.4-1-2.8-12.3-3.5-20.3-8.8-40.1-0.4-1.6-4.6-1.6-4.9 0-5.7 29.9-6.8 47.4-12.7 74.3-0.3 1.5-4.4 0.5-4.5-0.6C187.8 90.2 186.6 50 182.9 6.9 182.7 4.9 177.4 3.5 177 5.5 171.1 37.4 172.7 79.6 166.3 110.1c-0.3 1.4-4.2 1.9-4.4 0.5-5.6-32.9-6.7-72.3-11.2-99.3-0.4-2.1-5.7-2.2-6-0.2-2.9 20.8-4.5 56.5-9.2 78-0.5 2.1-5.9 0.7-6.4-1.5-2.2-9.8-2.8-22.6-5.9-34.2-1.2-4.8-6.6-3.7-7.3 0.5-2.6 15-4.8 33.9-10.4 51.1-0.5 1.7-4.2 0.9-4.7-0.8C95.5 85.7 95 61.8 89.5 41.2 88.8 38.4 86.2 37.5 84.6 40.2c-1.6 2.8-1.7 6.3-2.4 9.5-1.6 6.9-2.5 14-4.4 20.9-1.5 5.2-0.6 12.1-5.4 15.2-1.2 0.8-3-1.1-3.4-2.4-0.8-2.8-1.6-5.2-2.4-7.8-2-6-4.1-14.8-5.9-18.1-0.8-1.5-4.2-1.9-5.2-0.4-2.9 4.2-3.9 9-5.6 13.6-1.7 4.5-2.8 9-4.9 13.8-0.7 1.7-2.5 3.5-4.4 3.4-1.2-0.1-1.8-1.5-2.4-2.4C33.8 78 33.4 68.5 28 62.2 27.1 61.1 25 62.6 24 63.7 18.4 69.2 16.7 78 9.8 81.8 8.5 82.5 8 79.3 6.8 78.3 2.3 74.5-8.5 69.3-8.5 69.3c0 0-23.1 5.6-33-0.7-18.2-11.7-43.3 6.4-65 0-14.4-4.2-30 6.4-45 0-15.7-6.7-34.1 0-51.2 0-16.1 0-48.4 0-48.4 0" style="fill:none;stroke-width:2;stroke:#e11e1e"/>
</svg>

Но, если сдвинуть с помощью transform="translate()" допустим вправо, то становится виден прямой участок

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="160" viewBox="0 0 400 160" preserveAspectRatio="xMinYMin meet" style="border:1px solid">
  <g transform="translate(200,0)">
  <path d="m694.5 68.6c0 0-65.5-2.8-95.9-0.8-17.7 1.2-38.6-0.8-53.3-1.4-16.5-0.7-33.7 2.3-49.3 0.2-14.2-1.9-29.6 6.2-41.3 2.8-9.7-2.8-24-4-35.8 1-3.7 1.6-9.6-0.6-11.9-1.9-2.2-1.1-4.7 2.3-7.1 1.9-2.4-0.4-3.6-4.5-6.1-4.3-3.1 0.2-3.8 5.9-6.9 6.4-3 0.5-5.9-1.9-8.4-3.6-3.3-2.3-4.6-9-8.6-8.5-6.1 0.7-7.6 18.6-10 15.5-3.1-3.9-1.9-7.1-3.4-13.2-0.4-1.5-3.8-2.3-4.4-1-4 8.4-6.2 17.9-9.8 28.9-0.5 1.6-4.4 0.6-4.9-1-3.8-13-3.9-23.8-8.3-41.1-0.4-1.6-4.5-1.6-4.9 0-2.9 11.4-4.7 21.2-8.8 32.8-0.4 1.2-3.2 1.1-3.9 0-3.9-6.1-3.6-12.4-7.3-21.5-0.7-1.7-4.9-0.3-5.4 1.5-4.3 15.5-6.1 25.8-11.2 41.6-0.5 1.4-4 1.9-4.4 0.5-5.1-19.6-5.8-35.3-9.3-56.2-0.3-2-5.4-1-5.9 1-4.8 21.9-5.7 38.8-10.3 61.1-0.4 1.9-5.1-0.1-5.4-2-3.4-24.3-5.5-49.2-9.3-72.9-0.3-2-5.6-0.5-5.9 1.5-3.5 22.9-6.3 42.2-9.8 60.1-0.3 1.8-5 0.8-5.4-1-2.8-12.3-3.5-20.3-8.8-40.1-0.4-1.6-4.6-1.6-4.9 0-5.7 29.9-6.8 47.4-12.7 74.3-0.3 1.5-4.4 0.5-4.5-0.6C187.8 90.2 186.6 50 182.9 6.9 182.7 4.9 177.4 3.5 177 5.5 171.1 37.4 172.7 79.6 166.3 110.1c-0.3 1.4-4.2 1.9-4.4 0.5-5.6-32.9-6.7-72.3-11.2-99.3-0.4-2.1-5.7-2.2-6-0.2-2.9 20.8-4.5 56.5-9.2 78-0.5 2.1-5.9 0.7-6.4-1.5-2.2-9.8-2.8-22.6-5.9-34.2-1.2-4.8-6.6-3.7-7.3 0.5-2.6 15-4.8 33.9-10.4 51.1-0.5 1.7-4.2 0.9-4.7-0.8C95.5 85.7 95 61.8 89.5 41.2 88.8 38.4 86.2 37.5 84.6 40.2c-1.6 2.8-1.7 6.3-2.4 9.5-1.6 6.9-2.5 14-4.4 20.9-1.5 5.2-0.6 12.1-5.4 15.2-1.2 0.8-3-1.1-3.4-2.4-0.8-2.8-1.6-5.2-2.4-7.8-2-6-4.1-14.8-5.9-18.1-0.8-1.5-4.2-1.9-5.2-0.4-2.9 4.2-3.9 9-5.6 13.6-1.7 4.5-2.8 9-4.9 13.8-0.7 1.7-2.5 3.5-4.4 3.4-1.2-0.1-1.8-1.5-2.4-2.4C33.8 78 33.4 68.5 28 62.2 27.1 61.1 25 62.6 24 63.7 18.4 69.2 16.7 78 9.8 81.8 8.5 82.5 8 79.3 6.8 78.3 2.3 74.5-8.5 69.3-8.5 69.3c0 0-23.1 5.6-33-0.7-18.2-11.7-43.3 6.4-65 0-14.4-4.2-30 6.4-45 0-15.7-6.7-34.1 0-51.2 0-16.1 0-48.4 0-48.4 0" style="fill:none;stroke-width:2;stroke:#e11e1e"/>
  </g>
</svg>

На этой технике построена вся анимация.

С помощью команды анимации протаскивается вся линия, создавая иллюзию работы эквалайзера в разных режимах: без музыки ровные участки, с музыкой анимация волн.

 <animateTransform id="at1" attributeName="transform" type="translate" begin="0s;at1.end+0.5s" dur="12s" values="350 0;-750 0" fill="freeze" repeatCount="1"/>

Осталось только зациклить анимацию begin="0s;at1.end+0.5s"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="80%" height="80%" viewBox="0 0 400 200" preserveAspectRatio="xMinYMin meet" >  
 <defs>
   <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>
      <rect width="22%" height="100%" fill="black" /> 
 <g mask="url(#msk)"> 
 <path transform="translate(350, 0)" 
     fill="none" stroke="cyan" stroke-width="2" d="m694.5 68.6c0 0-65.5-2.8-95.9-0.8-17.7 1.2-38.6-0.8-53.3-1.4-16.5-0.7-33.7 2.3-49.3 0.2-14.2-1.9-29.6 6.2-41.3 2.8-9.7-2.8-24-4-35.8 1-3.7 1.6-9.6-0.6-11.9-1.9-2.2-1.1-4.7 2.3-7.1 1.9-2.4-0.4-3.6-4.5-6.1-4.3-3.1 0.2-3.8 5.9-6.9 6.4-3 0.5-5.9-1.9-8.4-3.6-3.3-2.3-4.6-9-8.6-8.5-6.1 0.7-7.6 18.6-10 15.5-3.1-3.9-1.9-7.1-3.4-13.2-0.4-1.5-3.8-2.3-4.4-1-4 8.4-6.2 17.9-9.8 28.9-0.5 1.6-4.4 0.6-4.9-1-3.8-13-3.9-23.8-8.3-41.1-0.4-1.6-4.5-1.6-4.9 0-2.9 11.4-4.7 21.2-8.8 32.8-0.4 1.2-3.2 1.1-3.9 0-3.9-6.1-3.6-12.4-7.3-21.5-0.7-1.7-4.9-0.3-5.4 1.5-4.3 15.5-6.1 25.8-11.2 41.6-0.5 1.4-4 1.9-4.4 0.5-5.1-19.6-5.8-35.3-9.3-56.2-0.3-2-5.4-1-5.9 1-4.8 21.9-5.7 38.8-10.3 61.1-0.4 1.9-5.1-0.1-5.4-2-3.4-24.3-5.5-49.2-9.3-72.9-0.3-2-5.6-0.5-5.9 1.5-3.5 22.9-6.3 42.2-9.8 60.1-0.3 1.8-5 0.8-5.4-1-2.8-12.3-3.5-20.3-8.8-40.1-0.4-1.6-4.6-1.6-4.9 0-5.7 29.9-6.8 47.4-12.7 74.3-0.3 1.5-4.4 0.5-4.5-0.6C187.8 90.2 186.6 50 182.9 6.9 182.7 4.9 177.4 3.5 177 5.5 171.1 37.4 172.7 79.6 166.3 110.1c-0.3 1.4-4.2 1.9-4.4 0.5-5.6-32.9-6.7-72.3-11.2-99.3-0.4-2.1-5.7-2.2-6-0.2-2.9 20.8-4.5 56.5-9.2 78-0.5 2.1-5.9 0.7-6.4-1.5-2.2-9.8-2.8-22.6-5.9-34.2-1.2-4.8-6.6-3.7-7.3 0.5-2.6 15-4.8 33.9-10.4 51.1-0.5 1.7-4.2 0.9-4.7-0.8C95.5 85.7 95 61.8 89.5 41.2 88.8 38.4 86.2 37.5 84.6 40.2c-1.6 2.8-1.7 6.3-2.4 9.5-1.6 6.9-2.5 14-4.4 20.9-1.5 5.2-0.6 12.1-5.4 15.2-1.2 0.8-3-1.1-3.4-2.4-0.8-2.8-1.6-5.2-2.4-7.8-2-6-4.1-14.8-5.9-18.1-0.8-1.5-4.2-1.9-5.2-0.4-2.9 4.2-3.9 9-5.6 13.6-1.7 4.5-2.8 9-4.9 13.8-0.7 1.7-2.5 3.5-4.4 3.4-1.2-0.1-1.8-1.5-2.4-2.4C33.8 78 33.4 68.5 28 62.2 27.1 61.1 25 62.6 24 63.7 18.4 69.2 16.7 78 9.8 81.8 8.5 82.5 8 79.3 6.8 78.3 2.3 74.5-8.5 69.3-8.5 69.3c0 0-23.1 5.6-33-0.7-18.2-11.7-43.3 6.4-65 0-14.4-4.2-30 6.4-45 0-15.7-6.7-34.1 0-51.2 0-16.1 0-48.4 0-48.4 0" >
       <animateTransform id="at1" attributeName="transform" type="translate" begin="0s;at1.end+0.5s" dur="12s" values="350 0;-750 0" fill="freeze" repeatCount="1"/>
 </path> 
  </g>   
</svg>

Answer 2

Принцип действия анимации тот же, что и в первом ответе.

Немного другой дизайн
Добавлены линии показывающие уровни частот.
Добавлена кнопка запускающая анимацию.
Смотрите комментарии в коде, постарался закомментировать основные моменты.

<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>  
     <!-- Маска для формирования показа части активной линии (при 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>  
       <!-- Чёрный фон -->
      <rect width="22%" height="100%" fill="black" /> 
   <!-- Разметка цветных линий для уровней частот  -->
 <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" />
       <!-- Текст для маркировки уровней частот -->
    <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> 
           <!-- Кнопка для запуска анимации -->
        <g id="btn" transform="translate(60,0)">
          <text x="2" y="147" font-size="8px" fill="yellow">Start</text> 
          <circle cx="23" cy="145" r="3" fill="red" />
        </g>
        <!-- Траетория движения линии -->
 <g mask="url(#msk)"> 
 <path transform="translate(348, 0)" 
     fill="none" stroke="cyan" stroke-width="2" d="m694.5 68.6c0 0-65.5-2.8-95.9-0.8-17.7 1.2-38.6-0.8-53.3-1.4-16.5-0.7-33.7 2.3-49.3 0.2-14.2-1.9-29.6 6.2-41.3 2.8-9.7-2.8-24-4-35.8 1-3.7 1.6-9.6-0.6-11.9-1.9-2.2-1.1-4.7 2.3-7.1 1.9-2.4-0.4-3.6-4.5-6.1-4.3-3.1 0.2-3.8 5.9-6.9 6.4-3 0.5-5.9-1.9-8.4-3.6-3.3-2.3-4.6-9-8.6-8.5-6.1 0.7-7.6 18.6-10 15.5-3.1-3.9-1.9-7.1-3.4-13.2-0.4-1.5-3.8-2.3-4.4-1-4 8.4-6.2 17.9-9.8 28.9-0.5 1.6-4.4 0.6-4.9-1-3.8-13-3.9-23.8-8.3-41.1-0.4-1.6-4.5-1.6-4.9 0-2.9 11.4-4.7 21.2-8.8 32.8-0.4 1.2-3.2 1.1-3.9 0-3.9-6.1-3.6-12.4-7.3-21.5-0.7-1.7-4.9-0.3-5.4 1.5-4.3 15.5-6.1 25.8-11.2 41.6-0.5 1.4-4 1.9-4.4 0.5-5.1-19.6-5.8-35.3-9.3-56.2-0.3-2-5.4-1-5.9 1-4.8 21.9-5.7 38.8-10.3 61.1-0.4 1.9-5.1-0.1-5.4-2-3.4-24.3-5.5-49.2-9.3-72.9-0.3-2-5.6-0.5-5.9 1.5-3.5 22.9-6.3 42.2-9.8 60.1-0.3 1.8-5 0.8-5.4-1-2.8-12.3-3.5-20.3-8.8-40.1-0.4-1.6-4.6-1.6-4.9 0-5.7 29.9-6.8 47.4-12.7 74.3-0.3 1.5-4.4 0.5-4.5-0.6C187.8 90.2 186.6 50 182.9 6.9 182.7 4.9 177.4 3.5 177 5.5 171.1 37.4 172.7 79.6 166.3 110.1c-0.3 1.4-4.2 1.9-4.4 0.5-5.6-32.9-6.7-72.3-11.2-99.3-0.4-2.1-5.7-2.2-6-0.2-2.9 20.8-4.5 56.5-9.2 78-0.5 2.1-5.9 0.7-6.4-1.5-2.2-9.8-2.8-22.6-5.9-34.2-1.2-4.8-6.6-3.7-7.3 0.5-2.6 15-4.8 33.9-10.4 51.1-0.5 1.7-4.2 0.9-4.7-0.8C95.5 85.7 95 61.8 89.5 41.2 88.8 38.4 86.2 37.5 84.6 40.2c-1.6 2.8-1.7 6.3-2.4 9.5-1.6 6.9-2.5 14-4.4 20.9-1.5 5.2-0.6 12.1-5.4 15.2-1.2 0.8-3-1.1-3.4-2.4-0.8-2.8-1.6-5.2-2.4-7.8-2-6-4.1-14.8-5.9-18.1-0.8-1.5-4.2-1.9-5.2-0.4-2.9 4.2-3.9 9-5.6 13.6-1.7 4.5-2.8 9-4.9 13.8-0.7 1.7-2.5 3.5-4.4 3.4-1.2-0.1-1.8-1.5-2.4-2.4C33.8 78 33.4 68.5 28 62.2 27.1 61.1 25 62.6 24 63.7 18.4 69.2 16.7 78 9.8 81.8 8.5 82.5 8 79.3 6.8 78.3 2.3 74.5-8.5 69.3-8.5 69.3c0 0-23.1 5.6-33-0.7-18.2-11.7-43.3 6.4-65 0-14.4-4.2-30 6.4-45 0-15.7-6.7-34.1 0-51.2 0-16.1 0-48.4 0-48.4 0" > 
         <!-- Анимация линии эквалайзера -->
       <animateTransform id="at1" attributeName="transform" type="translate" begin="btn.click;at1.end+0.5s" dur="10s" values="350 0;-750 0" fill="freeze" repeatCount="5" restart="whenNotActive"/>
 </path> 
  </g>   
</svg>