动画文本以与帆布的一个蛇方式

Question

我找到这个网站 - ＆gt; http://bit.ly/1FCtQSQ并且他有这个动画卷轴，我不感兴趣，但是在滚动动画的中间，会出现一个文本蛇动画。我非常想知道如何做到这一点，只是为了学习。

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

Arctext.js
CircleType
This one

此外，我尝试'仍然'来自http://bit.ly/1FCtQSQ的代码，但是缩小了，我知道这些人正在使用timelinemax，它使用画布，我试图复制代码，但是没有用，你可以在这个问题的底部看到。

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

有人可以用一个工作示例给我一个解释，或者我可以学习代码的插件吗？

我知道这不是找到问题答案的最佳方式，但我没有钱支付代码，黑客，空对或类似的东西。

谢谢！

笔：http://codepen.io/anon/pen/GJjjxG

我复制的代码：

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

感谢。

Answer 1

KonvaJS（以前称为KineticJS）画布库有一些很好的文本路径代码和自由MIT许可证：

https://github.com/konvajs/konva/blob/f6e2cf19a30dec2f94f50152f20c35988b1bf99e/src/plugins/TextPath.js

KonvaJS TextPath代码的工作方式如下：

• 从使用与SVG用于定义路径相同的语法定义的曲线和线组成的路径开始。
• 沿该路径计算航点。
• 使用计算出的航点在路径上逐个拟合字符。
• 使用转换正确定位字符。 （使用context.translate＆amp; context.rotate将字母与路径/曲线的角度相匹配。）

您可以通过进一步开始文本来使文本沿着曲线设置动画。进一步超越曲线上的第一个航路点。

使用KonvaJS图书馆的示例代码：

var stage = new Konva.Stage({
  container: 'container',
  width: 1000,
  height: 1000
});
var layer = new Konva.Layer();
// add the layer to the stage
stage.add(layer);

var textpath = new Konva.TextPath({
  x: 0,
  y: 50,
  fill: '#333',
  fontSize: 16,
  fontFamily: 'Arial',
  text: 'Now is the time for all good men to come to the aid of their party -- An phrase from an old touch-typing test.',
  data: 'M 100 200  C 200 100 300 0 400 100   C 500 200 600 300 700 200  C 800 100 900 100 900 100'
});

layer.add(textpath);
layer.draw();

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #F0F0F0;
}

<script src="https://cdn.rawgit.com/konvajs/konva/0.9.0/konva.min.js"></script>
<div id="container"></div>