Javascript 使用画布以蛇形方式显示动画文本 我发现这个网站->他有这个动画滚动，我不感兴趣，但是在滚动动画的中间，出现了一个文本蛇动画。我非常想知道我如何做到这一点，只是为了学习

我研究了所有可以弯曲文本的插件，例如：

另外，我尝试了“静止”的代码，但是被缩小了，我知道这家伙正在使用timelinemax，它使用画布，我尝试复制代码，但是没有成功，正如你在这个问题的底部看到的

所以我作为最后的资源来到这里

有人能给我一个工作的例子，或可能是一个插件，我可以研究代码的解释

我知道这不是找到我问题答案的最佳方式，但我没有钱支付codementor、hackhands、airpair或类似的东西

谢谢

钢笔：

我复制的代码：

<h1 class="snake">Animate this like a snake!</h1>

var animation = new TimelineMax({
    paused: !0,
    ease: Linear.easeNone
});
var T = 0;
var f = 30;

animation.add(
  TweenMax.to(e(".snake").parent(), f, {
        left: -5e3
}), T);

像蛇一样制作动画！
var animation=新的TimelineMax({
暂停：！0，
轻松：线性。轻松无
});
var T=0；
var f=30；
动画.add(
TweenMax.to（e（“.snake”）.parent（），f{
左：-5e3
})，T）；

谢谢。

KonvaJS（以前叫KineticJS）画布库有一些很好的文本路径代码，并且有一个自由的MIT许可证：

KonvaJS TextPath代码的工作原理如下：

• 从使用SVG用于定义路径的相同语法定义的曲线和直线组成的路径开始
• 计算沿该路径的航路点
• 使用计算的航路点沿路径逐个拟合字符
• 使用变换正确定位字符。（使用

  context.translate

  和

  context.rotate

  将字母与路径/曲线的角度匹配。）

您可以使文本沿曲线设置动画，方法是将文本从曲线上第一个航路点以外的地方开始

使用KonvaJS库的示例代码：

var stage=新Konva.stage({
容器：'容器'，
宽度：1000，
身高：1000
});
var layer=新Konva.layer（）；
//将层添加到舞台
阶段。添加（层）；
var textpath=new Konva.textpath({
x:0,，
y:50，
填写：“#333”，
尺寸：16，
fontFamily：“Arial”，
文本：“现在是所有好人都来帮助他们的政党的时候了——这是一个古老的触摸打字测试中的短语。”，
数据：“M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100”
});
layer.add（textpath）；
layer.draw（）
正文{
保证金：0；
填充：0；
溢出：隐藏；
背景色：#f0；
}
我非常感谢您的回答，因为您是唯一有兴趣帮助我的人，但我需要问一下，是否可以使用Konva库像蛇一样制作动画？KonvaJS提供静态（无动画）文本，但您可以相当轻松地获得文本动画。最简单的方法是在文本前面添加越来越多的空格字符。这将沿路径进一步推动文本。通过在动画循环中添加空间来获得动画。更重要的是，您提到您对研究源代码感兴趣。当您这样做时，您会发现您可以通过在沿曲线更远的航路点处开始文本，直接沿曲线设置文本动画。学习愉快！