TransWikia.com

Анимация SVG стрелки

Stack Overflow на русском Asked on November 27, 2021

Ниже представлен SVG

 <?xml version="1.0" encoding="utf-8"?>
    <svg version="1.1" id="OBJECTS" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 210.2 89.4" style="enable-background:new 0 0 210.2 89.4;" xml:space="preserve" width="214" height="90">
    <style type="text/css">
        .st0{fill:#009EE2;}
        .st1{fill:none;stroke:#009EE2;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
    </style>
    <path class="st0" d="M181.2,86.9c1.8-2,3.7-3.9,5.6-5.8c1.9-1.9,3.8-3.7,5.9-5.5c2-1.8,4.1-3.5,6.2-5.2c2.1-1.7,4.3-3.4,6.5-4.9
        l0.3,4.3c-2.3-0.7-4.5-1.5-6.8-2.4c-2.2-0.9-4.4-1.8-6.6-2.8c-2.2-1-4.3-2.2-6.3-3.5c-2-1.3-4-2.7-5.7-4.5c-0.5-0.5-0.5-1.4,0-1.9
        c0.3-0.3,0.8-0.4,1.2-0.4c2.4,0.5,4.7,1.2,6.9,2c2.2,0.8,4.4,1.7,6.5,2.7c2.1,1,4.2,2,6.3,3l6.3,3.1l0.3,0.2c1.1,0.6,1.6,2,1,3.1
        c-0.2,0.5-0.6,0.8-1.1,1.1c-2.3,1.1-4.6,2.3-6.9,3.6c-2.2,1.3-4.4,2.8-6.5,4.4c-2.1,1.6-4.1,3.3-5.9,5.1c-1.9,1.8-3.7,3.7-5.3,5.8
        c-0.4,0.6-1.2,0.7-1.8,0.2S180.6,87.6,181.2,86.9C181.1,87,181.1,87,181.2,86.9z"/>
    <path class="st1" d="M4.5,2.9c0,0,63.1,96,179,69.3"/>
 </svg>

Нужно чтобы стрелка беспрерывно вырисовывалась слева на право.

One Answer

Вариант #1

При решении использована техника совместного применения маски и анимации патча, входящего в маску. Если закрасить этот патч в белый цвет, то маска становится прозрачной в границах этого патча.

Изначально линия изогнутой стрелки не видна, так как ей маскирует маска, но когда маска начинает двигаться вдоль этой линии, то линия становится постепенно видна, так как происходит совмещение прозрачной части маски и линии стрелки.

Обязательным условием является совпадение формул патча маски и маскируемой линии.

<mask id="mask1" maskUnits="userSpaceOnUse">
      <path fill="none" stroke="white" stroke-width="6" stroke-dasharray="204" stroke-dashoffset="204" d="M4.5,2.9c0,0,63.1,96,179,69.3" >
      <animate id="an1" attributeName="stroke-dashoffset" begin="0s;an2.end"  dur="1s" values="204;0" fill="freeze"  />
      </path> 
  </mask>   

Для второго участника анимации - наконечника стрелки, применяется та же техника, - открытие скрытых линий с помощью анимации маски.

Ниже полный код

<?xml version="1.0" encoding="utf-8"?>
    <svg version="1.1" id="OBJECTS" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 210.2 89.4" style="enable-background:new 0 0 210.2 89.4;" xml:space="preserve" width="214" height="90">
    <style type="text/css">
       
        #arrow{fill:#00FFFF;}
        #curveLine{fill:none;stroke:#00FFE7;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
    </style> 
    
    <defs>
    <mask id="mask1" maskUnits="userSpaceOnUse">
      <path fill="none" stroke="white" stroke-width="6" stroke-dasharray="204" stroke-dashoffset="204" d="M4.5,2.9c0,0,63.1,96,179,69.3" >
      <animate id="an1" attributeName="stroke-dashoffset" begin="0s;an2.end"  dur="1s" values="204;0" fill="freeze"  />
      </path> 
  </mask> 
  <mask id="mask2" maskUnits="userSpaceOnUse">
         
     <path fill="none" stroke="white" stroke-width="6" stroke-dasharray="204" stroke-dashoffset="204" d="M181.2,86.9c1.8-2,3.7-3.9,5.6-5.8c1.9-1.9,3.8-3.7,5.9-5.5c2-1.8,4.1-3.5,6.2-5.2c2.1-1.7,4.3-3.4,6.5-4.9
        l0.3,4.3c-2.3-0.7-4.5-1.5-6.8-2.4c-2.2-0.9-4.4-1.8-6.6-2.8c-2.2-1-4.3-2.2-6.3-3.5c-2-1.3-4-2.7-5.7-4.5c-0.5-0.5-0.5-1.4,0-1.9
        c0.3-0.3,0.8-0.4,1.2-0.4c2.4,0.5,4.7,1.2,6.9,2c2.2,0.8,4.4,1.7,6.5,2.7c2.1,1,4.2,2,6.3,3l6.3,3.1l0.3,0.2c1.1,0.6,1.6,2,1,3.1
        c-0.2,0.5-0.6,0.8-1.1,1.1c-2.3,1.1-4.6,2.3-6.9,3.6c-2.2,1.3-4.4,2.8-6.5,4.4c-2.1,1.6-4.1,3.3-5.9,5.1c-1.9,1.8-3.7,3.7-5.3,5.8
        c-0.4,0.6-1.2,0.7-1.8,0.2S180.6,87.6,181.2,86.9C181.1,87,181.1,87,181.2,86.9z" >
      <animate id="an2" attributeName="stroke-dashoffset"  dur="1s" begin="an1.end" values="204;0"  />
      </path> 
  </mask> 
  
  </defs>
  <rect width="100%" height="100%" fill="#000" />
    <path id="curveLine"  d="M4.5,2.9c0,0,63.1,96,179,69.3"  mask="url(#mask1)"/>   
  
  <path id="arrow" d="M181.2,86.9c1.8-2,3.7-3.9,5.6-5.8c1.9-1.9,3.8-3.7,5.9-5.5c2-1.8,4.1-3.5,6.2-5.2c2.1-1.7,4.3-3.4,6.5-4.9
        l0.3,4.3c-2.3-0.7-4.5-1.5-6.8-2.4c-2.2-0.9-4.4-1.8-6.6-2.8c-2.2-1-4.3-2.2-6.3-3.5c-2-1.3-4-2.7-5.7-4.5c-0.5-0.5-0.5-1.4,0-1.9
        c0.3-0.3,0.8-0.4,1.2-0.4c2.4,0.5,4.7,1.2,6.9,2c2.2,0.8,4.4,1.7,6.5,2.7c2.1,1,4.2,2,6.3,3l6.3,3.1l0.3,0.2c1.1,0.6,1.6,2,1,3.1
        c-0.2,0.5-0.6,0.8-1.1,1.1c-2.3,1.1-4.6,2.3-6.9,3.6c-2.2,1.3-4.4,2.8-6.5,4.4c-2.1,1.6-4.1,3.3-5.9,5.1c-1.9,1.8-3.7,3.7-5.3,5.8
        c-0.4,0.6-1.2,0.7-1.8,0.2S180.6,87.6,181.2,86.9C181.1,87,181.1,87,181.2,86.9z" mask="url(#mask2)"/>
   
 </svg>

begin="an1.end" - условие запуска анимации наконечника стрелки. Начало её после окончания первой анимации id="an1" рисования линии стрелки.

begin="0s;an2.end" - условие запуска анимации стрелки - первый запуск немедленно, повторный запуск после окончания анимации наконечника стрелки.

Вариант #2

Одновременная анимация рисования линии стрелки и движение наконечника стрелки

В этом варианте первая часть анимации - рисование линии стрелки точно такая же как в первом варианте решения.

Вторая часть анимации - движение наконечника реализуется с помощью animateMotion:

<use  xlink:href="#arrow" transform="translate(-180 -72)">
  <animateMotion id="an2"  dur="2s" repeatCount="indefinite">
    <mpath xlink:href="#curveLine"/>
  </animateMotion>
</use>

mpath - путь вдоль, которого движется наконечник стрелки

Ниже полный код

<?xml version="1.0" encoding="utf-8"?>
    <svg version="1.1" id="OBJECTS" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 210.2 89.4" style="enable-background:new 0 0 210.2 89.4;" xml:space="preserve" width="214" height="90">
    <style type="text/css">
       
        #arrow{fill:#00FFFF;}
        #curveLine{fill:none;stroke:#00FFE7;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
    </style> 
    
    <defs>
    <mask id="mask1" maskUnits="userSpaceOnUse">
      <path  fill="none" stroke="white" stroke-width="6" stroke-dasharray="204" stroke-dashoffset="204" d="M4.5,2.9c0,0,63.1,96,179,69.3" >
      <animate id="an1" attributeName="stroke-dashoffset" begin="0s"  dur="2s" values="204;0" repeatCount="indefinite"  />
      </path> 
  </mask> 
 
     
       
     <path id="arrow" fill="none" transform="translate(0 0)"   d="M181.2,86.9c1.8-2,3.7-3.9,5.6-5.8c1.9-1.9,3.8-3.7,5.9-5.5c2-1.8,4.1-3.5,6.2-5.2c2.1-1.7,4.3-3.4,6.5-4.9
        l0.3,4.3c-2.3-0.7-4.5-1.5-6.8-2.4c-2.2-0.9-4.4-1.8-6.6-2.8c-2.2-1-4.3-2.2-6.3-3.5c-2-1.3-4-2.7-5.7-4.5c-0.5-0.5-0.5-1.4,0-1.9
        c0.3-0.3,0.8-0.4,1.2-0.4c2.4,0.5,4.7,1.2,6.9,2c2.2,0.8,4.4,1.7,6.5,2.7c2.1,1,4.2,2,6.3,3l6.3,3.1l0.3,0.2c1.1,0.6,1.6,2,1,3.1
        c-0.2,0.5-0.6,0.8-1.1,1.1c-2.3,1.1-4.6,2.3-6.9,3.6c-2.2,1.3-4.4,2.8-6.5,4.4c-2.1,1.6-4.1,3.3-5.9,5.1c-1.9,1.8-3.7,3.7-5.3,5.8
        c-0.4,0.6-1.2,0.7-1.8,0.2S180.6,87.6,181.2,86.9C181.1,87,181.1,87,181.2,86.9z" />
      
  </defs>
  <rect width="100%" height="100%" fill="#000" />
     <path id="curveLine"   d="M4.5,2.9c0,0,63.1,96,179,69.3" mask="url(#mask1)" />   
     <use  xlink:href="#arrow" transform="translate(-180 -72)">
                <animateMotion id="an2"  dur="2s" repeatCount="indefinite" rotate="auto"  >
                        <mpath xlink:href="#curveLine"/>
                </animateMotion>
            </use>  
 </svg>

Answered by Alexandr_TT on November 27, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP