0

私はちょっとした実験に参加しています。私を導く誰かが必要なだけです..

独自のカスタム構文カラーリング (Javascript 用) を作成したいのですが、それをアニメーション化する必要があります。

大きなプラスは、（可能であれば）アニメーション化するフォント（フラグメントシェーダー）にシェーダー言語を使用できることです。そんなことはAtomで可能ですか？

例:

「イベントベース」のアニメーションと「永続的なアニメーション」の 2 つのアイデアがあります。

イベントベース:

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 であるとしましょう。

この頻度は、たとえば、キーワードの色「色相」を変更します。

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 ルートを使用する場合、次の 2 つの処理方法があります。

  • これを行う最初の、IMO のよりクリーンな方法は、エディタのトークン関連イベントに登録して、キーワード likefunctionが一致したときに通知されるようにすることです。その時点ではまだ DOM 要素への参照がなく、トークンが現在のバッファーの画面外の部分に対して作成されている場合は、まったく取得されない可能性があります (ペイン領域に表示されている行のみが実際に表示されます)。 DOM)。ただし、トークンの DOM 要素を取得できれば、それを使って好きなことを行うことができます。
  • 2 番目のオプションは、ミューテーション オブザーバーを使用してエディター ビューの変更を追跡し、アニメーション化する対象に対応する要素を照合することです (そのためには、要素に適用されるクラスを知る必要があります)。パフォーマンスに関しては、このアプローチはショーストッパーであり、ミューテーションオブザーバーはそれほど安価ではなく、DOM 関連のすべての操作は、プレーンな JS オブジェクトを処理する場合と比べて一般的に遅くなります。

CSS ルートに進むと、物事ははるかに簡単になります。

使用したい視覚効果の css アニメーションを作成または生成し、一致させたいトークンのセレクターに影響を与えます。たとえば、JS ファイルの function キーワードにアニメーションを設定するには、次のようにします。

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

線形またはループ アニメーション、CSS ステート (:hover など)、および CSS で利用可能なすべてのものを使用できます。また、Atom は既にバッファーのレンダリングをエディター ビューに表示される行に制限しているため、ターゲット要素のライフ サイクルについてあまり心配する必要はありません。

シェーダーに関する最後のポイントについては、Chrome (および Atom) で利用可能な CSS フィルターがあります。これらのフィルターは、SVG フィルターを使用して多少カスタマイズできますが、これらの機能にあまり慣れていないため、それがどれほど難しいかはわかりません。それらを使用します。カスタムシェーダーに関しては、変更された要素のパフォーマンスとヒットテストに関する多くの問題により、Chrome でサポートが削除されました。

于 2014-10-07T13:55:07.580 に答える