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 that you have read and understand our privacy policy and code of conduct.

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