5

Я пытаюсь анимировать текст, который я создал и сохранил как SVG. До сих пор мне удавалось только оживить stroke, но это не то, что я хочу получить.
Вот ссылка на пример, что мне нужно:

SE7ENSKY Frontend studio

Handwriting: SVG animation

Я буду очень признателен, если кто-нибудь сможет объяснить, как я могу это реализовать.

1

1 ответ 1

5

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

Стандартная техника анимации dash работает следующим образом, - вы берете стандартную линию:

<svg>
  <path d="M 10,75 L 290,75" stroke="red" stroke-width="50"/>
</svg>

Затем вы добавляете к стандартной линии dash pattern и анимируете его положение изменением stroke-dashoffset.

.pen {
  stroke-dasharray: 280 280;
  stroke-dashoffset: 280;
  animation-duration: 2s;
  animation-name: draw;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes draw {
  from {
    stroke-dashoffset: 280;
  }

  to {
    stroke-dashoffset: 0;
  }
}
<svg>
  <path class="pen" d="M 10,75 L 290,75" stroke="red" stroke-width="50"/>
</svg>

Наконец, чтобы получить необычную переменную ширину обводки примера Se7ensky, вы окружаете эту линию контуром вашего логотипа.

Итак, давайте представим, что этот простой path ниже обрисовывает ваш логотип:

<svg>
  <path stroke="black" stroke-width="1" fill="lightgrey"
        d="M 40,50
           C 110,55 195,60, 265,55
           C 290,55 290,85 265,85
           C 195,85 110,85 40,100
           C 0,100 0,50 40,50 Z"/>
</svg>

Мы превращаем это в элемент clipPath и используем его, чтобы обрезать нашу анимированную строку по форме логотипа:

.pen {
  stroke-dasharray: 280 280;
  stroke-dashoffset: 280;
  animation-duration: 2s;
  animation-name: draw;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes draw {
  from {
    stroke-dashoffset: 280;
  }

  to {
    stroke-dashoffset: 0;
  }
}
 <svg>
  <clipPath id="logo">
    <path d="M 40,50
             C 110,55 195,60, 265,55
             C 290,55 290,85 265,85
             C 195,85 110,85 40,100
             C 0,100 0,50 40,50 Z"/>
  </clipPath>
  

 <path class="pen" d="M 10,75 L 290,75" stroke="red" stroke-width="50" clip-path="url(#logo)"/>
</svg>

Таким образом, чтобы повторить пример, указанный по ссылке, вам нужно добавить непрерывный path в SVG, который представляет путь, который выберет перо, как будто оно будет писать буквы в вашем логотипе.

Затем анимируйте этот путь, используя технику dashoffset, обрезая его своим оригинальным логотипом.

.pen {
  fill: none;
  stroke: red;
  stroke-width: 18;
  stroke-linecap: round;
  clip-path: url(#logo);

  stroke-dasharray: 206 206;
  stroke-dashoffset: 206;
  animation-duration: 2s;
  animation-name: draw;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes draw {
  from {
    stroke-dashoffset: 206;
  }

  to {
    stroke-dashoffset: 0;
  }
}
<svg>
  <defs>
    <clipPath id="logo">
      <path d="m85.77 49.77c-10.59 8.017-27.38 21.95-41.58 21.95-6.396 0-12.99-2.481-12.39-9.735l0.3998-4.199c38.38-12.03 48.17-26.15 48.17-35.5 0-7.635-7.995-9.162-14.39-9.162-25.98-0.1909-54.97 25.39-54.17 50.39 0.3998 12.6 7.196 25.01 21.79 25.01 19.79 0 41.78-17.94 53.97-31.5zm-52.37-1.336c5.397-12.6 16.99-21.76 26.98-24.24 1.399-0.3818 2.399 0.7635 2.399 2.1 0.1999 3.245-11.79 16.42-29.38 22.14z"/>
    </clipPath>
  </defs>
  
  <path d="m39.02 51.1c5.361-1.771 10.04-4.182 15.98-7.857 6.019-3.933 9.841-7.728 12.77-10.71 1.403-1.369 12.03-15.97-7.857-13.93-9.824 1.01-19.62 8.3-26.16 14.91-6.538 6.61-10.42 14.51-11.96 22.23-2.559 12.76 1.807 26.19 21.07 23.48 13.96-1.965 32.59-14.55 43.66-25.54" class="pen"/>
</svg>

8
  • Интересно, как раз недавно один пользователь задавал подобный вопрос, но там кроме анимированной картинки ничего небыло (закрыли, само-собой). Я ещё тогда подумал, вопрос то в целом интересный, как же всё-таки сделать такое. И вот, как обычно Александр удивил. Спасибо! Беру на вооружение.
    – user262779
    5 фев 2019 в 18:41
  • @L.F.C. Благодарю. А ссылку укажешь на тот пост. Я бы ответил с удовольствием. Это действительно очень интересная и полезная техника 5 фев 2019 в 18:45
  • Я сейчас пересмотрю закрытые вопросы, уан момент
    – user262779
    5 фев 2019 в 18:47
  • 1
    @L.F.C. Я вопрос доработаю и поставлю в очередь на открытие 5 фев 2019 в 18:47
  • @L.F.C. вот ещё одна интересная техника анимации рукописного письма, видимо прошла мимо вас :) ru.stackoverflow.com/a/940395/28748 5 фев 2019 в 18:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.