如何为网页上的文字绘制animation？
我想有一个网页有一个中心词。
我想用animation画出这个单词，这样页面就像我们想要的那样“写”出单词，即它从一个点开始，随着时间的推移画出线条和曲线，使得最终的结果是一个字形。
我不关心这是用<canvas>还是DOM完成的，我不关心它是用JavaScript还是CSS完成的。 没有jQuery会很好，但不是必需的。
我怎样才能做到这一点？ 我彻底search没有运气。
我希望这个词是用animation画出来的，这样页面就可以像我们所说的那样“写”出这个词了
canvas版本
这将更像一个人手写的字符。 它使用一个很长的短划线模式，每个字符的开/关顺序随时间交换。 它也有一个速度参数。
示例animation（请参阅下面的演示）
为了增加真实感和有机感觉，我添加了随机字母间距，y偏移量，透明度，非常微妙的旋转以及最后使用已经“手写”的字体。 这些可以作为dynamic参数来包装，以提供广泛的“书写风格”。
为了更真实的外观，path数据将是必需的，而不是默认的。 但是这是一个简短而有效的代码，它接近手写的行为，并且易于实现。
怎么运行的
通过定义短划线模式，我们可以创build行进中的ant，虚线等等。 利用这一点，为“关”点定义一个很长的点，并逐渐增加“开”点，这将给animation点长度时的划线时产生错觉。
由于closures点太长，重复图案将不可见（长度将随所用字体的大小和特性而变化）。 信件的path将有一个长度，所以我们需要确保每个点至less覆盖这个长度。
对于包含多条path（f.ex. O，R，P等）的字母，一个是轮廓的，一个是空心部分，这些线会显示为同时绘制。 我们不能用这种技术做太多的事情，因为它需要访问每个path段来分别描边。
兼容性
对于不支持canvas元素的浏览器，可以在标签之间放置显示文本的替代方式，例如样式文本：
<canvas ...> <div class="txtStyle">STROKE-ON CANVAS</div> </canvas>
演示
这产生了现场animation中风（ 没有依赖关系 ）
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>
你可以用svg的stroke-dasharray做这样的事情
编辑新的辣妹
这也可以通过用tspan元素手动包装每个字母来完成
var s = Snap('svg'); var text = 'Some Long Texts' var len = text.length; var array = []; for (var x = 0; x < len; x++) { var t = text[x] array.push(t); } var txt = s.text(50, 50, array) $('tspan').css({ 'font-size': 50, fill: 'none', stroke: 'red', 'stroke-dasharray': 300, 'stroke-dashoffset': 300 }) $('tspan').each(function(index) { $(this).stop(true, true).delay(800 * index).animate({ 'stroke-dashoffset': 0, }, 800, function() { $(this).css('fill', 'red') }) })
<script src="ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <svg width="500" height="500"> </svg>
只有CSS：
@keyframes fadein_left { from { left: 0; } to { left: 100%; } } #start:before { content: ''; position: absolute; top: 0; left: 0; right: 0%; opacity: 0.7; height: 25px; background: #fff; animation: fadein_left 3s; }
<div id="start"> some text some text some text some text some text </div>
