Question

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

带有JavaScript的平滑矢量动画
线条，文字和曲线
理想情况下，平滑（渐变）alpha混合在某些边界处褪色（例如，将边界处的整个场景淡化为叠加？）
能够将2D场景投影到3d空间。我所需要的近似是“星球大战”的叙事文本效果;）

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

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

Raphael - 没有设法找到任何3D投影或淡入淡出效果;最近还没有更新？
Processing.js - 似乎已经过时，在相当长的一段时间内没有更新。示例和网站似乎已过时，即一个垂死的项目？
CAKE - 作为一个项目似乎很不成熟，用3d投影找不到任何东西
Paper.js - 实际上是一个强有力的竞争者，但不确定如何与阿尔法淡化相结合？
JavaScript图形库 - 主页上的演示（2个多边形移动）似乎以10fps运行。我是否过于谨慎地将其排除在外？ ;）

我希望现代CSS 3d投影和动画中有一些我可以使用的东西，可能是由一个积极维护的库松散地包裹着......这样的事情存在吗？或者，甚至更好的是，新的CSS /画布的东西是否足够好，以便在不使用外部库的情况下跨平台轻松实现？

任何建议都非常感谢。我意识到这可能似乎就像一个开放的问题，但我会接受像'忘记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中使用画布。

我在Chrome上运行的paper.js sketch website上制作了一个小脚本（因为通过jquery添加了css，所以有点hackish，所以如果你做了一些修改就重新加载）。

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

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

1 个答案: