SVG的JQuery函数，一旦第一个动画完成就执行第二个动画？

Posted

技术标签:

【中文标题】SVG的JQuery函数，一旦第一个动画完成就执行第二个动画？【英文标题】：A JQuery function for SVG, to execute 2nd animation as soon as, 1st animation completes? 【发布时间】：2020-09-29 17:36:32 【问题描述】：

我应用了动画延迟技术，但是为了实现手写效果动画，我必须在它相交的任何地方剪切对象，并绘制一条路径并将其转换为剪贴蒙版，例如字母“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？

代码笔：https://codepen.io/ToxifiedM/pen/MWKeERr

原问题：How Can I Make SVG Text Animation Seamless And Accurate?

链接问题1：To Control SVG CSS Based Animation Using Jquery?

相关问题 2：To Control The Speed Of Multiple SVG Elements Using Jquery?

【问题讨论】：

【参考方案1】：

我只回答后者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*1s，其中 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*1s`)
)
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->
    <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>

更新

OP 正在评论：

所以当我真正尝试实现它时，我得到了字母“O”，它是一条路径而不是一条线，我尝试了你的方法，它没有出现在路径中，有什么线索可以做吗？

在这种情况下，您必须为路径设置动画。这次您不需要不同的 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*1s`)
)
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->
    <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- 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>

【讨论】：

再次感谢@enxaneta，我一定会试试这个解决方案，并会在这里回复你，你真是个天才。 所以当我真正尝试实现它时，我得到了字母“O”，它是一条路径而不是一条线，我尝试了你的方法，它没有出现在路径中，可以做什么有什么线索吗？ 正如我在回答中评论的那样，为了获得路径的长度，您可以使用 getTotalLength() 方法。这会给你一个有很多小数点的数字。对于 css，您可以将其四舍五入到小数点后 2 位或 3 位 感谢 aton，这是一个很好的解决方案 :)

以上是关于SVG的JQuery函数，一旦第一个动画完成就执行第二个动画？的主要内容，如果未能解决你的问题，请参考以下文章

jquery加载页面的方法(页面加载完成就执行)

jquery加载页面的方法(页面加载完成就执行)

jquery加载页面的方法(页面加载完成就执行)

jquery加载页面的方法(页面加载完成就执行)

元素属性的jQuery动画不是样式

C ++如果一个线程写入一旦完成就会切换一个布尔值，那么在另一个线程的循环中读取该布尔值是不是安全？