Question

我正在尝试为我创建并保存为SVG的文本设置动画。到目前为止，我只能为中风设置动画，但这并不是我想要实现的。以下是我需要的示例的链接：

[http://codepen.io/se7ensky/pen/waoMyx][1]

[https://codepen.io/munkholm/pen/EaZJQE][1]

如果有人可以解释我如何实现这一点，我将非常感激。

这是我到目前为止所做的：

  [https://codepen.io/sora1/pen/LZNZva][1]

Answer 1

Se7ensky动画的工作原理是它使用标准的短划线动画技术，但使用表示徽标手绘外观的轮廓剪辑动画笔划。

因此标准的短划线动画技术的工作原理如下。你采取标准的行：

＆＃13;

<svg>
  <path d="M 10,75 L 290,75" stroke="red" stroke-width="50"/>
</svg>

＆＃13;

然后向其添加一个破折号图案并为其设置动画（stroke-dashoffset）。

＆＃13;

.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;
  }
}

＆＃13;

<svg>
  <path class="pen" d="M 10,75 L 290,75" stroke="red" stroke-width="50"/>
</svg>

＆＃13;

最后，为了获得Se7ensky示例的花式可变笔画宽度，您可以使用徽标的轮廓剪辑该行。

因此，让我们假设下面这条简单的路径代表您的徽标：

＆＃13;

<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>

＆＃13;

我们将其转换为clipPath元素，并使用它将我们的动画笔划修剪为我们徽标的形状：

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

因此，为了复制他们的示例，您需要在SVG中添加连续路径（或路径，如果需要），表示如果笔在您的徽标中写入字母时笔将采用的路径。 / p>

然后使用dashoffset技术为该路径设置动画，同时使用原始徽标剪切它。

<强>更新

这是一个具有更逼真字母形状的最终演示：

＆＃13;

// Simple code to enable and disable the clipping path
var chk = document.getElementById("chk");
var penpath = document.getElementById("penpath");

chk.addEventListener("input", function(evt) {
  if (evt.target.checked) {
    penpath.classList.add("clipped");
  } else {
    penpath.classList.remove("clipped");
  }
});

＆＃13;

.pen {
  fill: none;
  stroke: red;
  stroke-width: 18;
  stroke-linecap: round;

  stroke-dasharray: 206 206;
  stroke-dashoffset: 206;
  animation-duration: 2s;
  animation-name: draw;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

.clipped {
  clip-path: url(#logo);
}

@keyframes draw {
  from {
    stroke-dashoffset: 206;
  }

  to {
    stroke-dashoffset: 0;
  }
}

＆＃13;

<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 id="penpath" 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 clipped"/>
</svg>


<p>
<input id="chk" type="checkbox" checked="true"/> <label for="chk">Enable clipping path</label>
</p>

＆＃13;

Answer 2

该示例看起来像是svg路径和延迟动画的组合。

CSS-Tricks的这篇博客文章解释得非常好（请注意，svg必须有笔画才能使用）： https://css-tricks.com/svg-line-animation-works/

这里有关于stroke-dashoffset（在示例中使用）的指南，它可能很有用： https://css-tricks.com/almanac/properties/s/stroke-dashoffset/

如何使用SVG在网页上为手写文字制作动画？

2 个答案: