0

我正在做一个小实验，我只需要有人指导我..

我想制作自己的自定义语法着色（用于 Javascript），并且需要动画。

最大的优点是（如果可能的话）是使用着色器语言进行字体动画（片段着色器）的可能性。这样的事情在 Atom 中可能吗？

例子：

那么两个想法是“基于事件的”动画和“持久动画”。

基于事件：

想象一下你在写 Javascript，当你写“函数”时，它并没有直接着色，而是慢慢地淡入它的颜色。

示例代码：

keyword('function').on('creation', function(keywordAnimableObject) {

 keywordAnimableObject.fromTo ({opacity:0, color:rgb(0,0,0)}, {opacity:1, color:rgb(1,1,0) });

});

持久化：

每个关键字或符号（if、else &&、函数、()、{}、逗号等）都有自己的频率。假设“函数”的频率为 0.5Hz，否则为 0.25Hz ......等等。

例如，此频率将修改关键字颜色“色调”。

keyword('function').on('idle', function(keywordAnimableObject, time) {

 var baseColor = rgb(1,1,0);

 var frequency = 0.5;

 var currColor = hueShiftBy(baseColor, Math.sin(time*2*PI*frequency);

 keywordAnimableObject.set({ color: currColor });

});

此外，如果可以使用着色器，每个关键字都会有微妙的动画模式。

现在想象一下，如果你在某处有错误，频率会更高，例如 1.5Hz 和更“烦人”。

allKeywords().on('notDeclared', function(keywordAnimableObject, time) {

 var baseColor = Color.red;

 var frequency = 1.5;

 var currColor = hueShiftBy(baseColor, Math.sin(time*2*PI*frequency);

 keywordAnimableObject.set({ color: currColor });

});

好的，我意识到这可能很烦人，但我认为值得尝试:)。不仅用于动画制作，而且真正制作精美的语法样式，而不仅仅是着色..

4

1 回答 1

1

我相信您可以通过纯 css 实现示例中的大部分内容。但是您必须考虑到这两种方法（CSS 和 JS）可能出错的许多事情

如果你走 JS 路线，你有两种处理方式：

  • 第一种也是 IMO 更简洁的方法是在编辑器上注册与标记相关的事件，以便在function匹配关键字时收到通知。此时，您还没有对 DOM 元素的引用，并且如果为当前缓冲区的屏幕外部分创建令牌，您可能根本不会得到一个（只有窗格区域中可见的行实际上存在于DOM）。但是，如果您可以检索令牌的 DOM 元素，您将能够对它做任何您想做的事情。
  • 第二个选项是使用突变观察者来跟踪编辑器视图中的变化并匹配与您想要动画的元素相对应的元素（为此您需要知道应用于元素的类）。在性能方面，这种方法是一种阻碍，突变观察者并不便宜，并且与处理普通 JS 对象相比，每个与 DOM 相关的操作通常都很慢。

如果你走 CSS 路线，事情会变得更简单：

为您想要使用的视觉效果构建或生成 css 动画，并将它们影响到您想要匹配的标记的选择器。例如，要为 JS 文件中的 function 关键字设置动画，请使用以下内容：

.editor .source.js .function {
  animation: blink 0.4s; // where blink is css animation defined beforehand
}

您可以使用线性或循环动画、css 状态（例如：hover）以及 CSS 中可用的所有内容。而且您不必太担心目标元素的生命周期，因为 Atom 已经将缓冲区的渲染限制为编辑器视图中可见的行。

至于关于着色器的最后一点，Chrome 中提供了 CSS 过滤器（在 Atom 中也是如此），这些过滤器可以使用 SVG 过滤器在某种程度上进行自定义，但对这些功能并不熟悉，我不能说它有多难使用它们。关于自定义着色器，AFAIK 由于性能和更改元素的命中测试存在许多问题，因此在 Chrome 中放弃了支持。

于 2014-10-07T13:55:07.580 回答