写一个Atom编辑器插件，动画语法着色

Writing a Atom editor plugin, animated syntax coloring

本文关键字：插件 动画 语法 编辑器 Atom 一个      更新时间：2023-09-26

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

我想让我自己的自定义语法着色(Javascript)，这需要动画。

大加分将(如果可能的话)是使用着色语言的字体动画(片段着色器)的可能性。这样的事情在Atom中可能吗?

例子:

两个概念是"基于事件的"动画和"持久动画"。

基于事件:

想象你正在写Javascript，当你写function时，它不会直接着色，而是慢慢地渐变成它的颜色。

示例代码:

keyword('function').on('creation', function(keywordAnimableObject) {
 keywordAnimableObject.fromTo ({opacity:0, color:rgb(0,0,0)}, {opacity:1, color:rgb(1,1,0) });
});

持久的基础:

每个关键字或符号(if, else &&， function，()，{}，逗号等)都有自己的频率。假设'function'的频率为0.5Hz，如果else的频率为0.25Hz……

例如，这个频率将修改关键词颜色"hue"。
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 });
});

好吧，我知道这可能很烦人，但我认为这是值得尝试的:)。不仅仅是为了动画，而且是为了制作漂亮的语法样式而不仅仅是着色。

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

如果你走JS路线，你有两种方式处理事情:

    在我看来，第一种更简洁的方法是在编辑器上注册令牌相关事件，以便在匹配function等关键字时得到通知。此时还没有对DOM元素的引用，如果为当前缓冲区的屏幕外部分创建令牌(只有在窗格区域中可见的行实际上出现在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过滤器进行定制，但由于不太熟悉这些功能，我不能说使用它们有多困难。关于自定义着色器，据我所知，由于许多性能问题和更改元素的命中测试，Chrome放弃了对自定义着色器的支持。

相关文章：