最适合 2d/投影 3d JS 矢量动画的技术/库？

Question

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

• 使用 JavaScript 实现流畅的矢量动画
• 线条、文本和曲线
• 理想情况下，在某些边界处平滑（渐变）Alpha 混合淡入淡出（例如，将边界处的整个场景淡化为叠加层？）
• 能够将 2d 场景投影到 3d 空间中。我需要的最接近的就是“星球大战”叙事文本效果；）

（理想情况下，我还希望能够在容器中运行代码（那个无头 WebKit 是什么？），并且在主机程序的帮助下，抓取帧，推送 ffmpeg 并创建 mpeg 记录。但是这是奖金）

我发现的东西，以及我不确定的原因：

• Raphael - 没有找到任何 3D 投影或淡入淡出效果的东西；最近也没有更新？
• Processing.js - 似乎已经过时，很长一段时间没有更新。示例和站点似乎过时了，即一个垂死的项目？
• CAKE - 作为一个项目看起来很不成熟，找不到任何 3d 投影的东西
• Paper.js - 实际上是一个强有力的竞争者，但不确定如何与 alpha 渐变结合使用？
• JavaScript 图形库 - 他们主页上的演示（2 个移动的多边形）似乎以 10fps 运行。我是不是太判断力了，不能排除这种可能性？ ;)

我希望现代 CSS 3d 投影和动画中有一些我可以使用的东西，也许被一个积极维护的库松散地包裹着。这样的东西存在吗？或者，更好的是，新的 CSS/canvas 是否足够好，无需使用外部库就可以轻松跨平台？

非常感谢任何建议。我意识到这可能似乎是一个悬而未决的问题，但我会接受类似'忘记 processing.js，任何其他库都会做你想做的事，他们都写到画布上，添加通过覆盖另一个画布来后处理 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. Rebel\n\
spaceships, striking from a hidden\n\
base, have won their first victory\n\
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 效果，您可以像这样 transform 画布：

#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
}

如果您的背景是黑色的，您可以在文本上方添加一个黑白圆形gradient，并将blend mode 设置为multiply 以获得圆形淡出效果。也许也可以使用here 中描述的 svg 剪贴蒙版，但我不知道您是否可以在 svg 中使用画布。

我在 paper.js sketch website 上为您制作了一个可在 Chrome 中运行的小脚本（由于通过 jquery 添加的 css 有点骇人听闻，所以如果您进行了一些更改，请重新加载）。

但也许在您的项目中使用像 three.js 这样的 JavaScript 3D 库会更容易。