动画学习记录： SVG文字动画

折花入酒丶

已于 2023-01-11 10:05:39 修改

阅读量368

点赞数

文章标签：动画 javascript

于 2023-01-09 15:10:02 首次发布

本文链接：https://blog.csdn.net/qq_40386177/article/details/128597332

版权

b站看到的一个比较有意思的svg动画代码，记录一下

svg可以通过即时设计生成

效果

在这里插入图片描述

具体代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>SVG动画</title>
</head>
<style>
  body {
    background-color: #333;
  }

  svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: fill-anm 500ms ease forwards 2800ms;
    /* 填充方式，不设置这个值有些文字比如画中间的一块会全部填充成白色 */
    fill-rule: evenodd;
  }

  svg path:nth-child(1) {
    /*  每段虚线的间距，数值越大间距越大 */
    stroke-dasharray: 349px;
    /* 表示虚线相对于绘制起点偏移量 */
    stroke-dashoffset: 349px;
    /* forwards：保留最后一帧的状态 */
    animation: identifier 2s ease forwards;
  }

  svg path:nth-child(2) {
    stroke-dasharray: 329px;
    stroke-dashoffset: 329px;
    animation: identifier 2s ease forwards 300ms;
  }

  svg path:nth-child(3) {
    stroke-dasharray: 364px;
    stroke-dashoffset: 364px;
    animation: identifier 2s ease forwards 600ms;
  }

  svg path:nth-child(4) {
    stroke-dasharray: 848px;
    stroke-dashoffset: 848px;
    animation: identifier 3s ease forwards 900ms;
  }

  svg path:nth-child(5) {
    stroke-dasharray: 987px;
    stroke-dashoffset: 987px;
    animation: identifier 5s ease forwards 1200ms;
  }

  @keyframes identifier {
    to {
      stroke-dashoffset: 0px;
    }
  }

  @keyframes fill-anm {
    from {
      fill: transparent;
    }

    to {
      fill: #fff;
    }
  }
</style>

<body>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="439" height="167"
    viewBox="0 0 439 167" fill="none">
    <path id="s" style="stroke:#FFFFFF; stroke-width:0.8; stroke-opacity:1; "
      transform="translate(26 49)  rotate(0 24.5 37.5)"
      d="M1.92,63.34C1.92,63.34 3.73,66.99 6.92,69.58C6.92,69.58 10.12,72.16 14.59,73.58C14.59,73.58 19.07,75 24.5,75C24.5,75 35.9,75 42.45,69.78C42.45,69.78 49,64.56 49,55.44C49,55.44 49,47.84 44.69,42.31C44.69,42.31 40.37,36.79 32.28,34.05L22.8,30.81C22.8,30.81 17.04,28.78 14.49,25.84C14.49,25.84 11.93,22.91 11.93,18.45C11.93,18.45 11.93,13.68 15.45,10.9C15.45,10.9 18.96,8.11 24.93,8.11C24.93,8.11 30.78,8.11 34.35,11.15C34.35,11.15 37.92,14.19 37.92,19.36L48.04,19.36C48.04,19.36 47.93,15 46.28,11.4C46.28,11.4 44.63,7.8 41.6,5.27C41.6,5.27 38.56,2.74 34.35,1.37C34.35,1.37 30.15,0 25.03,0C25.03,0 14.49,0 8.42,5.17C8.42,5.17 2.34,10.34 2.34,19.26C2.34,19.26 2.34,33.85 19.81,39.83L28.87,42.87C28.87,42.87 33.66,44.49 36.43,47.89C36.43,47.89 39.2,51.28 39.2,55.74C39.2,55.74 39.2,60.91 35.37,63.9C35.37,63.9 31.53,66.89 24.71,66.89C24.71,66.89 18.11,66.89 14.11,63.7C14.11,63.7 10.12,60.51 10.12,55.24L0,55.24C0,55.24 0.11,59.7 1.92,63.34Z " />
    <path id="v" style="stroke:#FFFFFF; stroke-width:0.8; stroke-opacity:1; "
      transform="translate(87 49)  rotate(0 26.5 37.5)"
      d="M26.6,68.75L26.19,68.75C26.19,68.75 25.98,67.5 25.78,65.83C25.78,65.83 25.57,64.48 25.15,62.66C25.15,62.66 24.74,60.83 24.22,58.65L9.94,0L0,0L19.67,75L32.71,75L53,0L43.27,0L28.67,58.65C28.67,58.65 28.16,60.83 27.74,62.66C27.74,62.66 27.33,64.48 27.12,65.83C27.12,65.83 26.81,67.5 26.6,68.75Z " />
    <path id="g" style="stroke:#FFFFFF; stroke-width:0.8; stroke-opacity:1; "
      transform="translate(154 49)  rotate(0 22.5 37.5)"
      d="M31.15,10.79C31.15,10.79 34.69,13.48 35.7,18.24L45,18.24C45,18.24 43.18,9.32 37.31,4.66C37.31,4.66 31.45,0 22.25,0C22.25,0 17.29,0 13.15,1.57C13.15,1.57 9,3.14 6.12,5.98C6.12,5.98 3.24,8.82 1.62,12.87C1.62,12.87 0,16.93 0,21.79L0,53.21C0,53.21 0,58.18 1.57,62.23C1.57,62.23 3.13,66.28 6.02,69.12C6.02,69.12 8.9,71.96 13.04,73.48C13.04,73.48 17.19,75 22.25,75C22.25,75 27.4,75 31.5,73.48C31.5,73.48 35.6,71.96 38.48,69.12C38.48,69.12 41.36,66.28 42.93,62.23C42.93,62.23 44.49,58.18 44.49,53.21L44.49,36.49L20.63,36.49L20.63,44.59L35.39,44.59L35.39,53.21C35.39,53.21 35.39,59.59 31.85,63.24C31.85,63.24 28.31,66.89 22.25,66.89C22.25,66.89 16.18,66.89 12.64,63.24C12.64,63.24 9.1,59.59 9.1,53.21L9.1,21.79C9.1,21.79 9.1,15.41 12.64,11.76C12.64,11.76 16.18,8.11 22.25,8.11C22.25,8.11 27.61,8.11 31.15,10.79Z " />
    <path id="d" style="stroke:#FFFFFF; stroke-width:0.8; stroke-opacity:1; "
      transform="translate(215 41)  rotate(0 47 47)"
      d="M62.56,29.8C61.3,53.57 57.08,75.35 42.62,88.37C44.73,89.52 47.47,92.12 48.85,94C64.35,79.41 68.89,55.65 70.37,29.8L86.09,29.8C84.93,66.8 83.56,80.66 80.71,83.79C79.65,85.04 78.49,85.35 76.59,85.35C74.38,85.35 68.79,85.35 62.88,84.73C64.25,87.02 65.09,90.25 65.3,92.44C70.9,92.85 76.7,92.85 79.97,92.54C83.34,92.23 85.45,91.29 87.56,88.58C91.26,84 92.52,69.2 94,26.26C94,25.12 94,22.3 94,22.3L70.68,22.3C70.9,14.9 71,7.4 71,0L63.19,0C63.19,7.4 63.19,14.9 62.88,22.3L47.79,22.3L47.79,29.8L62.56,29.8Z M39.35,72.12L41.36,79.1L48.32,76.8C46.31,69.51 41.57,57.11 37.56,47.73L31.02,49.5C33.13,54.4 35.24,60.13 37.14,65.55L12.03,70.76C16.14,61.38 20.15,49.71 22.79,38.77L46.42,38.77L46.42,31.58L0,31.58L0,38.77L14.66,38.77C11.92,50.96 7.49,63.26 6.01,66.7C4.22,70.66 2.85,73.47 1.16,73.99C2.11,75.87 3.27,79.62 3.69,81.18L3.8,81.08L3.8,81.29C6.22,79.83 10.02,78.68 39.35,72.12Z M44.52,13.76L44.52,6.77L3.69,6.77L3.69,13.76L44.52,13.76Z " />
    <path id="h" style="stroke:#FFFFFF; stroke-width:0.8; stroke-opacity:1; "
      transform="translate(317 41)  rotate(0 41.5 44)"
      d="M58.94,38.98L58.94,25.44L44.48,25.44L44.48,38.98L58.94,38.98Z M23.35,25.44L23.35,38.98L37.71,38.98L37.71,25.44L23.35,25.44Z M75.42,75.9L7.78,75.9L7.78,25.75L0,25.75L0,83.14L75.42,83.14L75.42,88L83,88L83,25.02L75.42,25.02L75.42,75.9Z M82.9,0L0.2,0L0.2,7.34L82.9,7.34L82.9,0Z M58.94,45.19L44.48,45.19L44.48,58.84L58.94,58.84L58.94,45.19Z M16.88,18.92L16.88,65.46L65.61,65.46L65.61,18.92L16.88,18.92Z M23.35,58.84L37.71,58.84L37.71,45.19L23.35,45.19L23.35,58.84Z " />

  </svg>
</body>

<script>
  const paths = document.querySelectorAll('svg path')
  for (let index = 0; index < paths.length; index++) {
    // 根据打印的值设置path的stroke的值
    console.log(paths[index].getTotalLength());

  }
</script>

</html>