Блог

Главная - Вопросы по программированию - Как сделать анимацию плавной в приведенном ниже SVG?

Как сделать анимацию плавной в приведенном ниже SVG?

#svg #svg-animate

Вопрос:

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

 <svg width="8" height="243" viewBox="0 0 8 243" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 3L3 240" stroke="url(#paint0_linear)" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"/>
                <defs>
                    <linearGradient id="paint0_linear" x1="3" y1="3" x2="3" y2="240" gradientUnits="userSpaceOnUse">
                        <stop offset="0" stopColor="#E8FF00" stopOpacity="1">
                            <animate attributeName="stop-opacity" values="1;1;1;0;0;0.5;0.8;1;1;1;1;1" dur="1s" repeatCount="indefinite"  />
                        </stop>
                        <stop offset="0.3" stopColor="#E8FF00" stopOpacity="0">
                            <animate attributeName="offset" values="0.3;0.2;0.1;0;1;0.9;0.8;0.7;0.6;0.5;0.4;0.3" dur="1s" repeatCount="indefinite"  />
                        </stop>
                        <stop offset="0.4" stopColor="#E8FF00" stopOpacity="0">
                            <animate attributeName="offset" values="0.4;0.3;0.2;0.1;0;1;0.9;0.8;0.7;0.6;0.5;0.4" dur="1s" repeatCount="indefinite"  />
                        </stop>
                        <stop offset="0.5" stopColor="#E8FF00" stopOpacity="0">
                            <animate attributeName="offset" values="0.5;0.4;0.3;0.2;0.1;0;1;0.9;0.8;0.7;0.6;0.5" dur="1s" repeatCount="indefinite"  />
                        </stop>
                        <stop offset="1" stopColor="#E8FF00" stopOpacity="1">
                            <animate attributeName="stop-opacity" values="1;1;1;1;0.8;0.5;0;0;0;1;1;1" dur="1s" repeatCount="indefinite"  />
                        </stop>
                    </linearGradient>
                </defs>
            </svg>

Комментарии:

1. используйте стоп-цвет вместо стоп-цвета и стоп-непрозрачность вместо стоп-цвета и стоп-прозрачности

2. я использовал react, поэтому мне пришлось преобразовать их в способ передачи атрибутов react, чтобы избежать предупреждений. Моя ошибка заключалась в том, чтобы правильно вставить код

Ответ №1:

Рассмотрите возможность решения градиентной анимации с помощью gradientTransform

Ниже приведен код, показывающий положение белой полосы в статической версии

 <svg width="108" height="243" viewBox="0 0 108 243" fill="none" xmlns="http://www.w3.org/2000/svg">
            
     <rect x="3" y="3" width="5" rx="5" height="240" fill="url(#paint0_linear)" /> 
 <defs>
    <linearGradient id="paint0_linear" x1="0%" y1="0%" x2="0%" y2="100%"" >
                      <stop offset="0%" stop-color="grey" />
      <stop offset="43%" stop-color="grey" />
      <stop offset="50%" stop-color="white" />
      <stop offset="57%" stop-color="grey" />
      <stop offset="100%" stop-color="grey" />
                             
    </linearGradient>
 </defs>
</svg>

Добавьте команду анимации для перемещения всего градиента сверху вниз
<animateTransform attributeName="gradientTransform" ... /> 

 <svg width="108" height="243" viewBox="0 0 108 243" fill="none" xmlns="http://www.w3.org/2000/svg">
            
     <rect x="3" y="3" width="5" rx="5" height="240" fill="url(#paint0_linear)" /> 
    <defs>
    <linearGradient id="paint0_linear" x1="0%" y1="0%" x2="0%" y2="100%" >
      <stop offset="0%" stop-color="grey" />
      <stop offset="43%" stop-color="grey" />
      <stop offset="50%" stop-color="white" />
      <stop offset="57%" stop-color="grey" />
      <stop offset="100%" stop-color="grey" />
      <animateTransform attributeName="gradientTransform"
        type="translate"
        from="0 -1"
        to="0 1"
        begin="0s"
        dur="1.5s"
        repeatCount="indefinite"/>
    </linearGradient>
    </defs>
 </svg>

Обновить

@tejash jl комментарии:

animationTransform не работает на линейном пути

Я немного изменил твой путь

 <svg width="108" height="243" viewBox="0 0 108 243" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M3 3L3 240 L6 240 L6 3z" fill="url(#paint0_linear)"  stroke-linecap="round" stroke-linejoin="round"/>  
     
 <defs>
    <linearGradient id="paint0_linear" x1="0%" y1="0%" x2="0%" y2="100%" >
                      <stop offset="0%" stop-color="grey" />
      <stop offset="43%" stop-color="grey" />
      <stop offset="50%" stop-color="white" />
      <stop offset="57%" stop-color="grey" />
      <stop offset="100%" stop-color="grey" />
     <animateTransform attributeName="gradientTransform"
        type="translate"
        from="0 -1"
        to="0 1"
        begin="0s"
        dur="1.5s"
        repeatCount="indefinite"/>
                                                
    </linearGradient>
 </defs> 
    
</svg>

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

 <svg width="108" height="243" viewBox="0 0 108 243" fill="none" xmlns="http://www.w3.org/2000/svg">
        <polyline points="3,3 3,240" stroke="url(#paint0_linear)" stroke-width="5"  stroke-linecap="round" stroke-linejoin="round"/>    
     
 <defs>
    <linearGradient id="paint0_linear" x1="3" y1="3" x2="3" y2="240" gradientUnits="userSpaceOnUse" >
      <stop offset="0" stop-color="grey" />
      <stop offset=".43" stop-color="grey" />
      <stop offset=".50" stop-color="white" />
      <stop offset=".57" stop-color="grey" />
      <stop offset="1" stop-color="grey" />
     <animateTransform attributeName="gradientTransform"
        type="translate"
        from="0 -240"
        to="0 240"
        begin="0s"
        dur="1.5s"
        repeatCount="indefinite"/>
                                                
    </linearGradient>
 </defs> 
    
</svg>

Комментарии:

1. animationTransform не работает на линейном пути.

Метки: