Question

我正在进行一些实验，我只需要有人来指导我......

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

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

实施例

两个想法是基于事件的＆＃39;动画和＆＃39;持久动画＆＃39;。

基于事件：

想象一下，你正在编写Javascript，当你编写＆＃39; function＆＃39;时，它并没有直接着色，而是慢慢淡入它的颜色。

示例代码：

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

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

});

基于持久性：

每个关键字或符号（if，else＆amp;＆amp;，function，（），{}，逗号等）都拥有自己的频率。让我们说'功能＆＃39;将具有0.5Hz的频率，如果否则将具有0.25Hz ......并且因此拥有。

此频率会修改关键字颜色＆＃39; hue＆＃39;例如。

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甚至更多＆＃39;烦恼＆＃39。

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 });

});

好的，我知道这可能是他妈的讨厌，但我认为值得尝试:)。不只是为了制作动画，而且真正制作出漂亮的语法风格，而不仅仅是着色..

Answer 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中被删除。

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

1 个答案: