如何为网页上的文字绘制动画?

2020/10/12 11:21 · javascript ·  · 0评论

我想要一个包含一个中心词的网页。

我希望用动画来绘制该单词,以便页面以与我们相同的方式“写”出该单词,即,它从一个点开始并随时间绘制线条和曲线,从而最终结果是一个字形。

我不在乎是用<canvas>DOM还是DOM完成,也不在乎JavaScript还是CSS。缺少jQuery会很好,但不是必需的。

我怎样才能做到这一点?我进行了详尽的搜索,没有运气。

我希望通过动画来绘制该单词,以便页面以与我们将要使用的相同方式“写”出该单词

画布版本

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

快照
动画示例(请参见下面的演示)

为了增加真实感和自然感,我添加了随机字母间距,y增量偏移,透明度,非常细微的旋转,最后使用了已经“手写”的字体。这些可以包装为动态参数,以提供广泛的“书写样式”。

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

怎么运行的

通过定义破折号模式,我们可以创建行进蚂蚁,虚线等。通过为“ 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>

编辑2019


我创建了一个可以创建逼真的动画的javascript库。它易于使用,并且需要一个特殊的JSON文件作为字体。

var vara = new Vara("#container", "https://rawcdn.githack.com/akzhy/Vara/ed6ab92fdf196596266ae76867c415fa659eb348/fonts/Satisfy/SatisfySL.json", [{
  text: "Hello World!!",
  fontSize: 48,
  y:10
}, {
  text: "Realistic Animations",
  fontSize: 34,
  color:"#f44336"
}], {
  strokeWidth: 2,
  textAlign:"center"
});
#container {
  padding: 30px;
}
<script src="https://rawcdn.githack.com/akzhy/Vara/16e30acca2872212e28735cfdbaba696a355c780/src/vara.min.js"></script>
<div id="container"></div>

请查看Github页面以获取文档和示例。Codepen


上一个答案

以下示例使用snap.js动态创建tspan元素,然后为每个元素设置动画stroke-dashoffset

上一个答案


您可以使用svg stroke-dasharray

没有keyframes动画,您可以做这样的事情

对于IE支持,您可以使用jquery / javascript

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

经过许多测试,这里有一些注意事项。目标是在需要用户交互的DOM重磅页面上,以最少的阻塞方式显示快速文本数据

当然,有很多方法可以实现相同的目的。在此示例中,差异可能并不明显,它确实适用于复杂的接口。

最慢innerHTML和内联样式。每次迭代都会重新计算DOM。浏览器正在努力保持列车运行。它会很快失败,从而导致内存泄漏和冻结:

setInterval(function(){
  out.innerHTML = `<span style="position:fixed;top:${~~(Math.random() * 220)}px">${Math.random() * 1000}<span>`
},1)
<h1 id="out"></h1>

更好的方式:使用textContentrequestAnimationFrame和网页动画API。这种方法更加平滑,在DOM繁重的页面上很明显。用户交互不会阻止重绘。为了使界面保持良好的响应性,可能会跳过一些重画。

let job
const paint = () => {
  job = requestAnimationFrame(paint)
  out.textContent = Math.random() * 1000
  out.animate([{top: ~~(Math.random() * 220)+"px"},{top:0}],{duration: 1,iterations: 1})
}

/* Start looping -----------------------------------------*/
requestAnimationFrame(paint)
#out{
position: fixed}
<h1 id="out"></h1>

在上面的示例中,仍在为文本溢出重新计算DOM。我们可以看到调试器在闪烁。这对于级联元素真的很重要!这仍然会降低javascript和用户的滚动速度。

在此处输入图片说明

强大功能:可以单独使用css来使用csscontent规则和css变量刷新数据文本将无法选择。

let job
const paint = () => {
  job = requestAnimationFrame(paint)
  out.setAttribute('data-before', Math.random() * 1000)
  out.animate([{top: ~~(Math.random() * 220)+"px"},{top:0}],{duration: 1,iterations: 1})
}

/* Start looping -----------------------------------------*/
requestAnimationFrame(paint)
#out{
  position: fixed
  
  }
#out:before {
   content: attr(data-before)
 }
<h1 id="out"></h1>

在此处输入图片说明

我的测试显示出很大的改进,javascript引擎在其他任务上迅速跳过。有时它的启动速度可能比上面的示例慢。但是除此之外,这不会阻止用户滚动,并且调试器也很喜欢,不再有跳跃。

本文地址:http://javascript.askforanswer.com/ruheweiwangyeshangdewenzihuizhidonghua.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!