最合适的技术/库，用于2D/投影3D JS矢量动画

Question

让我列出事实，然后说我在哪里。首先，这是我需要的功能：

• 光滑的矢量动画w/javascript
• 线条，文本和曲线
• 理想情况下，平滑（渐变）alpha混合在某些边界上褪色（例如，以覆盖为覆盖的整个场景？）
• 能够将2D场景投影到3D空间。我需要的紧密近似将是"星球大战"的叙事文字效果;）

（理想情况下，我也希望能够在容器中运行代码（什么是无头Webkit？），并且在主机程序的帮助下，抓取框架，浏览FFMPEG并创建MPEG录制。这是一个奖励）

我发现的东西，以及为什么我不确定每个：

• 拉斐尔 - 尚未设法找到3D投影或褪色效果的任何东西；也没有最近更新？
• 处理。示例和网站似乎已经过时了，即垂死的项目？
• 蛋糕 - 作为一个项目似乎很不成熟，没有3D投影
找不到任何东西
• paper.js-实际上是一个强大的竞争者，但不确定如何与alpha vade结合？
• JavaScript图形库 - 其主页上的演示（2个多边形）似乎以10fps运行。我太有判断力了，无法对此排除吗？;）

我想希望我可以使用的现代CSS 3D投影和动画中有一些东西，也许是由一个积极维护的图书馆松散地包裹的。或者，更好的是，新的CSS/帆布东西是否足够好，可以在不使用外部图书馆的情况下跨平台？

进行跨平台？

任何建议都非常感谢。我意识到这可能看起来喜欢一个空旷的问题，但是我会接受诸如"忘记处理"之类的东西通过覆盖另一个画布来进行后处理alpha混合物。例如！

Answer 1

对于滚动文本，您可以使用任何帆布库。在Paper.js中，《星球大战》文本介绍看起来像这样：

var text = new PointText({
    point: [0, view.center.y],
    content: 'A long time ago, in a galaxy far, far away.... n
n
It is a period of civil war. Rebeln
spaceships, striking from a hiddenn
base, have won their first victoryn
against the evil Galactic Empire.n',
    fillColor: 'yellow',
    fontFamily: 'Arial',
    fontWeight: 'bold',
    fontSize: 25,
    justification : 'center'
});
text.translate(view.center, 0);
function onFrame(event) {
    text.translate(0,-1);
}

，然后为了达到3D效果，您可以像这样改变画布：

#canvas {
    -webkit-transform-origin: 50% 100%,
    -webkit-transform: matrix3d( 1, 0, 0, 0,
                 0, 1, 0, -0.003,
                 0, 0, 1, 0,
                 0, 0, 0, 1),
    -webkit-transform-style: preserve-3d
}

如果您的背景是黑色的，则可以在文本上方添加黑白圆形梯度，并将混合模式设置为multiply，以获得圆形淡出的效果。也许也可以使用此处描述的SVG剪辑面具，但我不知道您是否可以在SVG内有帆布。

我在Chrome中使用的Paper.js Sketch网站上为您提供了一个小脚本（这是通过JQuery添加的CSS的Beause，因此如果您进行一些更改，请重新加载）。

。

，但也许在您的项目中使用JavaScript 3D库会更容易。