Как анимировать SVG Signature

Автор оригинала: Silvestar Bistrović.

Давайте посмотрим, как анимировать SVG-сигнатуру с небольшим количеством JavaScript и CSS. В этой демонстрировании я покажут вам, как использовать функцию JavaScript для расчета длины пути SVG и анимации CSS, чтобы анимировать штрихов SVG. Вы могли бы увидеть окончательный результат на О странице или Кодепен Отказ

SVG Signature

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

Он содержит восемь разных путей для разных путей подписи. Например, один путь представляет букву «S», один путь представляет точку и так далее.

Как только я экспортировал SVG из эскиза, я переубил пути таким образом, что они появляются, как я хочу, чтобы они анимировали: сначала буква “, то точка, то буква” B “и так далее. Кроме того, я добавил Автограф и Автограф __Path Классы для облегчения JavaScript Manipution и стиль. Вот окончательный файл:

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

Расчет JavaScript

Чтобы рассчитать длину хода, мы могли бы использовать ручной метод угадывания приблизительной длины. Мы должны использовать две атрибуты Dash в этом случае:

• HIND-DASHARRAY , что делает удар разбитым, а
• Инсульт-Tashoffset , что подталкивает положение инсульта из видимого пути.

Эти два свойства должны быть равны, чтобы он работал. Теперь мы могли бы попытаться догадаться, как долго длится ход. Но мы программисты, и нам не нужно догадаться: мы могли бы сделать это программно. Вот концепция того, как она должна работать:

• Во-первых, мы устанавливаем общую желаемую продолжительность анимации.
• Далее мы используем GetTollength () Функция для расчета общей длины пути в сочетании.
• Далее мы рассчитываем продолжительность и задержки анимации для каждого пути с соотношением общего пути пути.
• Далее мы устанавливаем HIND-DASHARRAY и Инсульт-Tashoffset который позиционирует пунктирное удаление за пределами видимого пути.
• Наконец, мы начинаем анимацию, добавив класс Анимированные к телу документа.

Вот вся функция JavaScript (с комментариями для облегчения понимания):

const calcPaths = (totalDur) => {
  // unset 'animated' class to body which will reset the animation
  document.body.classList.add('animated')

  // get all SVG elements - lines and dots
  const paths = document.querySelectorAll('.autograph__path')

  // prepare path length variable
  let len = 0

  // prepare animation delay length variable
  let delay = 0

  // escape if no elements found
  if (!paths.length) {
    return false
  }

  // set duration in seconds of animation to default if not set
  const totalDuration = totalDur || 7

  // calculate the full path length
  paths.forEach((path) => {
    const totalLen = path.getTotalLength()
    len += totalLen
  })

  paths.forEach((path) => {
    const pathElem = path

    // get current path length
    const totalLen = path.getTotalLength()

    // calculate current animation duration
    const duration = totalLen / len * totalDuration

    // set animation duration and delay
    pathElem.style.animationDuration = `${duration < 0.2 ? 0.2 : duration}s`
    pathElem.style.animationDelay = `${delay}s`

    // set dash array and offset to path length - this is how you hide the line
    pathElem.setAttribute('stroke-dasharray', totalLen)
    pathElem.setAttribute('stroke-dashoffset', totalLen)

    // set delay for the next path - added .2 seconds to make it more realistic
    delay += duration + 0.2
  })

  // set 'animated' class to body which will start the animation
  document.body.classList.add('animated')
  return true
}
calcPaths(5)

Обязательно проверьте Совместимость браузера Прежде чем использовать эту технику.

CSS анимация

Анимация CSS состоит из установки окончательного Инсульт-Tashoffset вернуться к нулю.

Я использовал линейный для Функция анимации-синхронизации и вперед для Режим анимации-заполнения Отказ Первый атрибут делает анимацию линейной, что казалось самым естественным для меня. Второй говорит анимацию, чтобы остаться в 100% государстве.

.autograph__path {
  opacity: 0;
  animation-timing-function: linear;
  animation-fill-mode: forwards;

  .animated & {
    opacity: 1;
    animation-name: line;
  }
}

@keyframes line {
  100% {
    stroke-dashoffset: 0;
  }
}

Я использовал непрозрачность, чтобы предотвратить Flick во время загрузки. Он работает лучше при использовании в сочетании с критическими CSS.

Заключение

Там у вас есть, анимированная сигнатура SVG. С небольшим количеством SVG, JavaScript и CSS знания, вы можете создать привлекательный анимацию рисования. Я нашел более пару плагинов, которые обрабатывают анимацию, как этот, но я всегда предпочитаю, используя меньше кода. Я сделал эту демонстрацию менее чем за 100 строк кода. Смотрите полную демонстрацию здесь: