Функция JQuery для SVG для выполнения 2-й анимации, как только завершится 1-я анимация?

Я применил технику задержки анимации, но для достижения анимации с эффектом рукописного ввода мне пришлось вырезать объект везде, где он пересекается, нарисовать путь и преобразовать его в обтравочную маску, например. буква «W» разделена на 4 части и нарисована разными путями для разных частей для сказанного выше, и анимирована, чтобы придать эффект чистого почерка, придав пути ширину штриха. Мне потребовалось намного больше времени, так как шрифт был слишком сложным .

В настоящее время я достигаю указанной анимации, используя функцию задержки анимации, функцию CSS.

CSS-код

#W2-Path {
    animation-delay: .5s
}

#W3-Path {
    animation-delay: 1s
}

#W4-Path {
    animation-delay: 1.5s
}

#O-Path {
    animation-delay: 2s
}

#R1-Path-2 {
    animation-delay: 3.5s
}

#R2-Path-2 {
    animation-delay: 4s
}

#R3-Path-2 {
    animation-delay: 4.5s
}

#L1-Path-2 {
    animation-delay: 5s
}

#L2-Path-2 {
    animation-delay: 5.5s
}

#L3-Path-2 {
    animation-delay: 6s
}

#D1-Path {
    animation-delay: 6.5s
}

#D2-Path {
    animation-delay: 7s
}

Я подумал, есть ли какой-либо другой способ, с помощью которого я могу запустить вторую анимацию по завершении первой анимации, и она просто продолжает придавать анимации более плавный эффект и идеальное время, реализуя JQuery?

CodePen: https://codepen.io/ToxifiedM/pen/MWKeERr

Исходный вопрос: Как сделать анимацию текста SVG бесшовной и точной?

Связанный вопрос 1: управлять SVG-анимацией на основе CSS с помощью Jquery?

Связанный вопрос 2: Контролировать скорость нескольких элементов SVG с помощью Jquery?


svg html jquery css svg-animate
person ToxifiedHashkey    schedule 10.06.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я отвечаю только за последнее W

Я изменил код svg, который у вас есть, потому что это можно сделать более простым способом.

Вы оборачиваете каждую строку в 2 группы. Я использую только линии. Также вы используете style="clip-path: url(#clip-path)". Я преобразовал это в презентационный атрибут следующим образом: clip-path="url(#clip-path)", потому что в javascript я хочу установить animation-delay как встроенный стиль для строк.

Еще одно изменение: я использую stroke-dasharray: 8 и stroke-dashoffset: 8, так как 8 — это длина строк для буквы W. Я знаю длину строк, потому что использовал метод getTotalLength().

stroke и stroke-width устанавливаются только один раз для группы, так как строки для буквы имеют одинаковый стиль.

JavaScript выбирает все строки в группе, а затем перебирает строки и устанавливает animation-delay:${i*1}s, где i - n-я строка. Обратите внимание, что порядок строк в группе с первой по четвертую, а не наоборот, как у вас в коде.

let Wls = document.querySelector("#W").querySelectorAll("line");//all the lines in the W group

Wls.forEach((l,i)=>{
// for each line in the W group
// set the style attribute
  l.setAttribute("style", `animation-delay:${i*1}s`)
})
body {
	background: white;
}

svg {
  width: 90vh; 
  border:solid;
}


#W line{
  stroke-dasharray: 8;
  stroke-dashoffset: 8;
  animation: letter-animation 1s linear forwards;
}


@keyframes letter-animation {
    0% {
        stroke-dashoffset: 8;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
<svg id="WOYP" viewBox="0 0 9 9">
  <defs>
    <clipPath id="clip-path-44" transform="translate(-5.561 -10.291)">
      <path id="W4" d="M11.676,16.41l.234.578c.236-.631.477-1.261.715-1.891q.222-.6.449-1.188t.409-1.063q.181-.476.308-.8c.084-.214.136-.348.156-.4s.05-.12.066-.16a.594.594,0,0,1,.061-.111.754.754,0,0,1,.086-.1.768.768,0,0,1,.151-.11h-1.03c.121.053.192.117.212.19a.481.481,0,0,1-.04.291c0,.007-.025.079-.076.216s-.118.319-.2.546-.18.483-.287.767-.216.573-.323.867Z" />
    </clipPath>
    <clipPath id="clip-path-45" transform="translate(-5.561 -10.291)">
      <path id="W3" d="M11.675,16.358Zm0,0h0l.011.029h0l.232.575c-.152.4-.311.82-.474,1.252L10.176,15.07q-.242-.6-.478-1.183t-.433-1.058q-.2-.474-.333-.793c-.09-.213-.146-.343-.166-.389a1.8,1.8,0,0,0-.176-.27.774.774,0,0,0-.348-.209h1.833a.3.3,0,0,0-.221.239.9.9,0,0,0,.03.35c0,.006.027.076.08.209s.123.308.207.524.179.464.287.744.218.562.332.848Q11.179,15.089,11.675,16.358Z" />
    </clipPath>
    <clipPath id="clip-path-46" transform="translate(-5.561 -10.291)">
      <path id="W2" d="M9.139,16.411l.234.578c.236-.632.477-1.261.715-1.891q.222-.6.45-1.189t.408-1.062c.122-.318.224-.584.308-.8s.137-.347.157-.4l.065-.16a.556.556,0,0,1,.061-.11.7.7,0,0,1,.086-.1.8.8,0,0,1,.151-.11h-1.03c.121.054.192.117.213.191a.488.488,0,0,1-.041.29c0,.007-.025.079-.076.216s-.117.319-.2.546-.179.483-.287.768-.216.573-.323.867Z" />
    </clipPath>
    <clipPath id="clip-path-47" transform="translate(-5.561 -10.291)">
      <path id="W1" d="M9.138,16.358Zm0,0h0l.012.029h0l.233.575q-.229.6-.475,1.252L7.639,15.07q-.242-.6-.478-1.183t-.433-1.058q-.2-.474-.332-.793l-.166-.389a1.8,1.8,0,0,0-.177-.27.764.764,0,0,0-.347-.209H7.539a.305.305,0,0,0-.222.239.938.938,0,0,0,.03.35c0,.006.027.076.081.209s.122.308.206.524.18.464.287.744.218.562.332.848Q8.642,15.089,9.138,16.358Z" />
    </clipPath>
  </defs>

  <g id="W" stroke="#003668" stroke-width="2">
    <line x1="0.93" y1="0.482" x2="3.873" y2="7.937" clip-path="url(#clip-path-47)" />
    <line x1="3.088" y1="7.937" x2="5.966" y2="0.482" clip-path="url(#clip-path-46)" />
    <line x1="3.481" y1="0.482" x2="6.424" y2="7.937" clip-path="url(#clip-path-45)" />
    <line x1="5.639" y1="7.937" x2="8.517" y2="0.482" clip-path="url(#clip-path-44)" />
  </g>

</svg>

ОБНОВИТЬ

ОП комментирует:

Итак, когда я на самом деле пытался его реализовать, я наткнулся на букву «О», это путь, а не строка, я попробовал ваш метод, он не отображается для пути, что можно сделать для этой подсказки?

В этом случае вам придется анимировать путь. На этот раз вам не нужна другая анимация css, а поскольку конечное значение для stroke-dashoffset равно 0, вам не нужна другая анимация. Однако вам нужно рассчитать общую длину пути, чтобы использовать ее для stroke-dasharray и stroke-dashoffse пути. В данном случае 20,4.

let Wls = document.querySelector("#W").querySelectorAll("line")

Wls.forEach((l,i)=>{
  l.setAttribute("style", `animation-delay:${i*1}s`)
})
body {
	background: white;
}
svg {
  width: 90vh; 
  border:solid;
  overflow:visible;
}
#W line{
  stroke-dasharray: 8;
  stroke-dashoffset: 8;
  animation: letter-animation 1s linear forwards;
}

#O path{
  stroke-dasharray: 20.4;
  stroke-dashoffset: 20.4;
  animation: letter-animation 1s linear forwards;
  animation-delay:4.5s
}


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

@keyframes letter-animation {
    100% {
        stroke-dashoffset: 0;
    }
}
<svg id="WOYP" viewBox="0 0 29 9">
  <defs>
    <clipPath id="clip-path-44" transform="translate(-5.561 -10.291)">
      <path id="W4" d="M11.676,16.41l.234.578c.236-.631.477-1.261.715-1.891q.222-.6.449-1.188t.409-1.063q.181-.476.308-.8c.084-.214.136-.348.156-.4s.05-.12.066-.16a.594.594,0,0,1,.061-.111.754.754,0,0,1,.086-.1.768.768,0,0,1,.151-.11h-1.03c.121.053.192.117.212.19a.481.481,0,0,1-.04.291c0,.007-.025.079-.076.216s-.118.319-.2.546-.18.483-.287.767-.216.573-.323.867Z" />
    </clipPath>
    <clipPath id="clip-path-45" transform="translate(-5.561 -10.291)">
      <path id="W3" d="M11.675,16.358Zm0,0h0l.011.029h0l.232.575c-.152.4-.311.82-.474,1.252L10.176,15.07q-.242-.6-.478-1.183t-.433-1.058q-.2-.474-.333-.793c-.09-.213-.146-.343-.166-.389a1.8,1.8,0,0,0-.176-.27.774.774,0,0,0-.348-.209h1.833a.3.3,0,0,0-.221.239.9.9,0,0,0,.03.35c0,.006.027.076.08.209s.123.308.207.524.179.464.287.744.218.562.332.848Q11.179,15.089,11.675,16.358Z" />
    </clipPath>
    <clipPath id="clip-path-46" transform="translate(-5.561 -10.291)">
      <path id="W2" d="M9.139,16.411l.234.578c.236-.632.477-1.261.715-1.891q.222-.6.45-1.189t.408-1.062c.122-.318.224-.584.308-.8s.137-.347.157-.4l.065-.16a.556.556,0,0,1,.061-.11.7.7,0,0,1,.086-.1.8.8,0,0,1,.151-.11h-1.03c.121.054.192.117.213.191a.488.488,0,0,1-.041.29c0,.007-.025.079-.076.216s-.117.319-.2.546-.179.483-.287.768-.216.573-.323.867Z" />
    </clipPath>
    <clipPath id="clip-path-47" transform="translate(-5.561 -10.291)">
      <path id="W1" d="M9.138,16.358Zm0,0h0l.012.029h0l.233.575q-.229.6-.475,1.252L7.639,15.07q-.242-.6-.478-1.183t-.433-1.058q-.2-.474-.332-.793l-.166-.389a1.8,1.8,0,0,0-.177-.27.764.764,0,0,0-.347-.209H7.539a.305.305,0,0,0-.222.239.938.938,0,0,0,.03.35c0,.006.027.076.081.209s.122.308.206.524.18.464.287.744.218.562.332.848Q8.642,15.089,9.138,16.358Z" />
    </clipPath>

    <clipPath id="clip-path-43">
      <path id="clipO" d="M22.38,14.637v.026h0v.081l0,.023a3.231,3.231,0,0,1-.367,1.385,3.556,3.556,0,0,1-.9,1.089,3.814,3.814,0,0,1-1.2.655,3.724,3.724,0,0,1-1.289.2,3.869,3.869,0,0,1-1.4-.3,3.818,3.818,0,0,1-1.169-.756,3.474,3.474,0,0,1-.791-1.133A3.228,3.228,0,0,1,15,14.763v-.119h0v-.022h0V14.6h0v-.047h0v-.024h0V14.38a3.256,3.256,0,0,1,.273-1.138,3.554,3.554,0,0,1,.756-1.109,3.749,3.749,0,0,1,2.8-1.073,4.05,4.05,0,0,1,1.265.257A3.668,3.668,0,0,1,21.241,12a3.433,3.433,0,0,1,.836,1.113,3.107,3.107,0,0,1,.3,1.237l0,.021v.131h0v.025h0v.025h0v.052h0v.025ZM21.265,14.4a3.982,3.982,0,0,0-.18-1.025,2.913,2.913,0,0,0-.529-.99,2.287,2.287,0,0,0-.821-.628,2.492,2.492,0,0,0-1.043-.218,2.667,2.667,0,0,0-1.038.2,2.42,2.42,0,0,0-.826.569,2.593,2.593,0,0,0-.549.905,3.436,3.436,0,0,0-.2,1.085v.232h0v.024h0V14.6h0v.024h0v.023h0v.025l0,.023v.027a3.52,3.52,0,0,0,.228,1.105,2.93,2.93,0,0,0,.615.98,2.5,2.5,0,0,0,1.778.762,2.549,2.549,0,0,0,1.023-.2,2.313,2.313,0,0,0,.811-.584,2.739,2.739,0,0,0,.534-.915,3.439,3.439,0,0,0,.188-1.021v-.185h0v-.044h0V14.6h0v-.022h0v-.022h0v-.022h0v-.022h0V14.4Z" />
    </clipPath>
  </defs>

  <g id="W" stroke="#003668" stroke-width="2">
    <line x1="0.93" y1="0.482" x2="3.873" y2="7.937" clip-path="url(#clip-path-47)" />
    <line x1="3.088" y1="7.937" x2="5.966" y2="0.482" clip-path="url(#clip-path-46)" />
    <line x1="3.481" y1="0.482" x2="6.424" y2="7.937" clip-path="url(#clip-path-45)" />
    <line x1="5.639" y1="7.937" x2="8.517" y2="0.482" clip-path="url(#clip-path-44)" />
  </g>

  <g id="O" stroke="#003668" stroke-width="2" fill="none">
    <path id="OPath" d="M18.657,11.3a3.1,3.1,0,0,0-2.289.981,3.448,3.448,0,0,0-.458,3.858,2.78,2.78,0,0,0,2.747,1.7,2.961,2.961,0,0,0,2.813-1.7,3.514,3.514,0,0,0-.458-3.858A3.055,3.055,0,0,0,18.657,11.3Z" transform="translate(-5.561 -10.291)" clip-path="url(#clip-path-43)" />
  </g>

</svg>

person enxaneta    schedule 10.06.2020
comment
Еще раз спасибо @enxaneta, я обязательно попробую это решение и свяжусь с вами здесь, вы действительно гений. - person ToxifiedHashkey; 10.06.2020
comment
Итак, когда я на самом деле пытался это реализовать, я наткнулся на букву O, это путь, а не линия, я попробовал ваш метод, он не появился для пути, что можно сделать для этой подсказки? - person ToxifiedHashkey; 10.06.2020
comment
‹g id=O stroke=#003668 stroke-width=2› ‹path d=M18.657,11.3a3.1,3.1,0,0,0-2.289.981,3.448,3.448,0,0,0- .458,3.858,2.78,2.78,0,0,0,2.747,1.7,2.961,2.961,0,0,0,2.813-1.7,3.514,3.514,0,0,0-.458-3.858A3.055 ,3.055,0,0,0,18.657,11.3Z transform=translate(-5.561 -10.291) clip-path=url(#clip-path-43) /› ‹/g› - person ToxifiedHashkey; 10.06.2020
comment
Привет, @enxaneta. Теперь я понял еще одну последнюю вещь: как удалить длину пути с помощью jquery, тогда я, конечно, смогу все это объединить. - person ToxifiedHashkey; 10.06.2020
comment
Я не понимаю тебя. Зачем вам нужно удалять длину пути? - person enxaneta; 10.06.2020
comment
Нет, я имел в виду, как рассчитать путь и общую длину линии. - person ToxifiedHashkey; 10.06.2020
comment
Как я уже отмечал в своем ответе, чтобы получить длину пути, вы можете использовать ссылку getTotalLength(). Это даст вам число с большим количеством десятичных знаков. Для css вы можете округлить это до 2 или 3 знаков после запятой. - person enxaneta; 10.06.2020
comment
Спасибо, aton, это было отличное решение :) - person ToxifiedHashkey; 10.06.2020
comment
Давайте продолжим обсуждение в чате. - person ToxifiedHashkey; 10.06.2020