javascript - 如何为网页上的文本绘制动画？

Question

我想要一个有一个居中单词的网页。

我希望这个词用动画来绘制，这样页面就可以像我们一样“写”出这个词，即它从一个点开始，随着时间的推移绘制直线和曲线，最终结果是一个字形。

我不在乎这是否通过 <canvas> 完成或 DOM，我不在乎它是用 JavaScript 还是 CSS 完成的。没有 jQuery 会很好，但不是必需的。

我该怎么做？我已经详尽地搜索了，但没有运气。

Answer 1

I want this word to be drawn with an animation, such that the page "writes" the word out the same way that we would

Canvas 版

这将绘制单个字符，更像是手写。它使用长破折号模式，其中每个字符随时间交换开/关顺序。它还有一个速度参数。

^{示例动画(见下面的演示)}

为了增加真实感和有机感，我添加了随机字母间距、y 增量偏移、透明度、非常微妙的旋转，最后使用了已经“手写”的字体。这些可以封装为动态参数，以提供广泛的“写作风格”。

为了更逼真的外观，默认情况下不需要路径数据。但这是一段简短而高效的代码，它近似于手写行为，并且易于实现。

工作原理

通过定义虚线图案，我们可以创建行军 Ant 、虚线等。通过为“off”点定义一个非常长的点并逐渐增加“on”点来利用这一点，它会在为点长度设置动画时产生在描边时画线的错觉。

由于离点太长，重复图案将不可见(长度会随所使用字体的大小和特性而变化)。字母的路径会有一个长度，所以我们需要确保每个点至少覆盖这个长度。

对于包含多个路径(例如 O、R、P 等)的字母，因为一个用于轮廓，一个用于空心部分，线条将看起来是同时绘制的。我们不能用这种技术做太多的事情，因为它需要访问每个路径段以单独描边。

兼容性

对于不支持 canvas 元素的浏览器，可以在标签之间放置另一种显示文本的方式，例如样式文本:

<canvas ...>
    <div class="txtStyle">STROKE-ON CANVAS</div>
</canvas>

演示

这会产生实时动画描边(无依赖关系)-

var ctx = document.querySelector("canvas").getContext("2d"),
    dashLen = 220, dashOffset = dashLen, speed = 5,
    txt = "STROKE-ON CANVAS", x = 30, i = 0;

ctx.font = "50px Comic Sans MS, cursive, TSCu_Comic, sans-serif"; 
ctx.lineWidth = 5; ctx.lineJoin = "round"; ctx.globalAlpha = 2/3;
ctx.strokeStyle = ctx.fillStyle = "#1f2f90";

(function loop() {
  ctx.clearRect(x, 0, 60, 150);
  ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]); // create a long dash mask
  dashOffset -= speed;                                         // reduce dash length
  ctx.strokeText(txt[i], x, 90);                               // stroke letter

  if (dashOffset > 0) requestAnimationFrame(loop);             // animate
  else {
    ctx.fillText(txt[i], x, 90);                               // fill final letter
    dashOffset = dashLen;                                      // prep next char
    x += ctx.measureText(txt[i++]).width + ctx.lineWidth * Math.random();
    ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random());        // random y-delta
    ctx.rotate(Math.random() * 0.005);                         // random rotation
    if (i < txt.length) requestAnimationFrame(loop);
  }
})();

canvas {background:url(http://i.imgur.com/5RIXWIE.png)}

<canvas width=630></canvas>