首頁 >開發工具 >VSCode >vscode外掛分享:看看它如何實現煙火抖動效果

vscode外掛分享:看看它如何實現煙火抖動效果

青灯夜游
青灯夜游轉載
2021-07-20 09:59:163608瀏覽

本篇文章給大家分享一個vscode插件--power mode,寫程式碼邊放煙火、編輯器還會抖動;一起來研究power mode插件實現煙火抖動效果的原理,一起來看看吧!

vscode外掛分享:看看它如何實現煙火抖動效果

最近一直在研究 vscode 插件,今天給大家一分享一個效果特別炫的插件,名字叫 power mode。

vscode外掛分享:看看它如何實現煙火抖動效果

寫程式碼邊放煙火、編輯器還會抖動。

效果很炫,但我們肯定不能滿足於會用,得研究下它是怎麼實現的。

實現想法

在vscode 裡大家可能沒啥思路,但如果這個效果放到網頁裡呢,文字改變的時候抖動編輯器、然後再上面出現一些煙火效果。這個可能有的同學就有思路了。 【推薦學習:《vscode教學》】

抖動編輯器:抖動不也是動畫麼,就是左右位移,這一秒右移,下一秒回到原位置,這樣就抖起來了。

煙火效果:不管啥花里胡哨的煙火,給個gif 我們就能搞定,就是在文字上方加一個元素,然後把gif 放上去,下次加gif 的時候把上次的刪除。

這樣就能在網頁裡實現編輯器抖動 放煙火效果了。

把這個效果放到 vscode 裡實現也是一樣的思路,因為 vscode 是基於 electron 實現的啊。

而 electron 又是基於 chromium nodejs,也就是 ui 部分是網頁。我們可以在vscode 幫助裡開啟開發者工具:

vscode外掛分享:看看它如何實現煙火抖動效果

然後,可以看到,這編輯器部分就是個div 啊

vscode外掛分享:看看它如何實現煙火抖動效果

所以剛才在網頁裡實現的效果,可以放到vscode 裡實現,想法一樣。

想法是一樣,但是具體怎麼做呢?

這就需要了解下vscode 的extension api 了,其實也不難,我要跟大家介紹這裡用到的api:

首先,引入vscode 包,所有的api 都在這個包裡。

import * as vscode from 'vscode';

然後,我們要為文字加上樣式,要怎麼加呢?

在vscode 的編輯器裡面加樣式不是直接操作dom 的,是受到限制的,要這樣幾步:

  • 透過vscode.window 拿到目前的editor
const activeEditor = vscode.window.activeTextEditor;
  • 拿到目前editor 的正在編輯的位置
const cursorPosition = activeTextEditor.selection.active;
  • 根據位置計算要新增裝飾的範圍(range)
const newRange = new vscode.Range(
    cursorPosition.with(cursorPosition.line, cursorPosition.character),
    cursorPosition.with(cursorPosition.line, Math.max(0, cursorPosition.character + delta))
);
  • 建立裝飾物件
vscode.window.createTextEditorDecorationType({
    before: {
        contentText:'',
        textDecoration: `none; ${defaultCssString}${backgroundCssString} ${customCssString}`,
    },
    textDecoration: `none; position: relative;`,
    rangeBehavior: vscode.DecorationRangeBehavior.ClosedClosed
});
  • 然後,為這段range 的文字加上裝飾
activeEditor.setDecorations(decoration, [newRange]);

現在我們就在vscode 編輯器裡面,你正在編輯的位置,加上了一段樣式。

裝飾物件可以加上 before、after,這不就是偽元素麼?沒錯,就是偽元素,而且還可以加一系列樣式。加啥樣式都可以。

到了這,是不是就有如何在編輯器裡做那些效果的思路了呢?

接下來,我們來看看 power-mode 的實作細節。

程式碼實作

我們先從效果實作開始看吧,主要是抖動和放煙火:

##抖動

抖動的原理我們分析過了,就是定時做位移。

首先,它定義了一系列的位移的裝飾對象,就是透過

vscode.window.createTextEditorDecorationType 這個創建裝飾對象的 api:

public activate = () => {
    this.dispose();
    this.negativeX = vscode.window.createTextEditorDecorationType(<vscode.DecorationRenderOptions>{
        textDecoration: `none; margin-left: 0px;`
    });

    this.positiveX = vscode.window.createTextEditorDecorationType(<vscode.DecorationRenderOptions>{
        textDecoration: `none; margin-left: ${this.config.shakeIntensity}px;`
    });

    this.negativeY = vscode.window.createTextEditorDecorationType(<vscode.DecorationRenderOptions>{
        textDecoration: `none; margin-top: 0px;`
    });

    this.positiveY = vscode.window.createTextEditorDecorationType(<vscode.DecorationRenderOptions>{
        textDecoration: `none; margin-top: ${this.config.shakeIntensity}px;`
    });

    this.shakeDecorations = [
        this.negativeX,
        this.positiveX,
        this.negativeY,
        this.positiveY
    ];
}

然後呢?就是定時讓editor 抖起來啊:

也是根據編輯的position 算出range,然後給這段range 加裝飾

private shake = () => {
    if (!this.config.enableShake) {
        return;
    }

   // 当前 editor
    const activeEditor = vscode.window.activeTextEditor;

  // 要抖动的 range,也就是当前行
    const xRanges = [];
    for (let i = 0; i < activeEditor.document.lineCount; i++) {
        xRanges.push(new vscode.Range(new vscode.Position(i, 0), new vscode.Position(i, 1)));
    }

  // 加装饰
    if (Math.random() > 0.5) {
        activeEditor.setDecorations(this.negativeX, []);
        activeEditor.setDecorations(this.positiveX, xRanges);
    } else {
        activeEditor.setDecorations(this.positiveX, []);
        activeEditor.setDecorations(this.negativeX, xRanges);
    }

    if (Math.random() > 0.5) {
        activeEditor.setDecorations(this.negativeY, []);
        activeEditor.setDecorations(this.positiveY, this.fullRange);
    } else {
        activeEditor.setDecorations(this.positiveY, []);
        activeEditor.setDecorations(this.negativeY, this.fullRange);
    }

    clearTimeout(this.shakeTimeout);
    this.shakeTimeout = setTimeout(() => {
        this.unshake();
    }, 1000);
}

如上,就是定時加不同的位移樣式,隨機上下左右抖。

放煙火

然後我們來放煙火,思路我們分析過了,就是在編輯的位置加上一個gif,然後下次放的時候去掉上次的。

來按流程走一遍:

// 当前编辑器
const activeEditor = vscode.window.activeTextEditor;
// 当前编辑位置
const cursorPosition = vscode.window.activeTextEditor.selection.active;
// 要加装饰的范围
const delta = left ? -2 : 1;
const newRange = new vscode.Range(
    cursorPosition.with(cursorPosition.line, cursorPosition.character),
    cursorPosition.with(cursorPosition.line, Math.max(0, cursorPosition.character + delta))
);
//创建装饰对象
const decoration = vscode.window.createTextEditorDecorationType(<vscode.DecorationRenderOptions>{
    before: {
        // before 样式
    },
    textDecoration: `当前元素样式`,
    rangeBehavior: vscode.DecorationRangeBehavior.ClosedClosed
});
// 给该范围加装饰
activeEditor.setDecorations(decoration, [newRange]);

加裝飾的流程我們走完了,但是樣式還沒填,怎麼加呢?

首先當前元素要相對定位,然後加個 before 偽元素,設定為絕對定位且 left 和 top 為負數。

之後就是設定背景圖了,power mode 提供了這麼多 gif 可選。

vscode外掛分享:看看它如何實現煙火抖動效果

所以呢,裝飾物件就是這樣的:

// 背景图片的样式
const backgroundCss = this.getBackgroundCssSettings(explosionUrl);

//位置的样式
const defaultCss = {
    position: &#39;absolute&#39;,
    [CSS_LEFT] : `-10px`,
    [CSS_TOP]: `-1.2rem`,
    width: `${this.config.explosionSize}ch`,
    height: `${this.config.explosionSize}rem`,
    display: `inline-block`,
    [&#39;z-index&#39;]: 1,
    [&#39;pointer-events&#39;]: &#39;none&#39;,
};

// 样式对象转换为字符串
const backgroundCssString = this.objectToCssString(backgroundCss);
const defaultCssString = this.objectToCssString(defaultCss);
const customCssString = this.objectToCssString(this.config.customCss || {});

// 创建装饰对象
const decoration = vscode.window.createTextEditorDecorationType(<vscode.DecorationRenderOptions>{
    before: {
        contentText:&#39;&#39;,
        textDecoration: `none; ${defaultCssString}${backgroundCssString} ${customCssString}`,
    },
    textDecoration: `none; position: relative;`,
    rangeBehavior: vscode.DecorationRangeBehavior.ClosedClosed
});

效能最佳化##每次編輯都會加一個gif 效能肯定很差,所以得做優化,可以從觸發頻率、同時存在的gif 數量來考慮:

  • 节流,每1秒只能触发一次

vscode外掛分享:看看它如何實現煙火抖動效果

  • gif 存在一段时间就删掉

vscode外掛分享:看看它如何實現煙火抖動效果

大功告成,这样我们把抖动和放烟花在 vscode 里面实现了一遍。

但是,还得加个触发的入口。

什么时候触发呢?涉及到两个 api:

  • 编辑文本的时候,出现效果
vscode.workspace.onDidChangeTextDocument(onDidChangeTextDocument);
  • 修改了插件配置的时候,重新设置插件对象
vscode.workspace.onDidChangeConfiguration(onDidChangeConfiguration);

从怎么触发的,到触发后干什么,我们都清楚了,接下来呢,还要会怎么注册这个插件到 vscode 中。

插件注册

注册插件就是在 package.json 里面配置一下,指定触发时机:

"activationEvents": [
    "*"
]

指定插件入口:

  "main": "./out/src/extension",

指定插件的配置:

"contributes": {
    "configuration": {
      "title": "Power Mode",
      "properties": {
        "powermode.enabled": {
          "default": false, // 默认值
          "type": "boolean",// 值类型
          "description": "Enable to activate POWER MODE!!!"
        }
      }
    }
}

总结

vscode 基于 electron,而 electron 基于 chromium,所以还是用网页来做 ui 的,那么很多网页里面的效果,基本都可以在编辑器实现。

但是是受约束的,要熟悉整个加装饰的流程:

  • 拿到当前编辑器 (activeEditor)
  • 拿到当前编辑的位置 (position)
  • 算出要加装饰的范围 (range)
  • 创建装饰对象 (decorationType)
  • 给那段范围的文本加装饰 (addDecoration)

抖动和放烟花都是基于这个 api 实现的,不过抖动是做上下左右的随机位移,放烟花是在编辑的位置加动图。

实现思路有了,还得指定触发的入口,也就是文本编辑的时候(onDidChangeTextDocument)。还有配置改变也得做下处理(onDidChangeConfiguration)。

之后,注册到 vscode 就可以了,在 package.json 里面配置入口(main)、生效事件(activeEvent)、配置项(contibutes.configuration)

希望这篇文章能够帮你理清 vscode 里面一些编辑效果的实现思路。

兄弟萌,让我们一起在 vscode 里面放烟花吧!

vscode外掛分享:看看它如何實現煙火抖動效果

(插件名叫 vscode-power-mode,感兴趣可以体验一下,或者去看看源码)。

原文地址:https://juejin.cn/post/6982416460723257352

作者:zxg_神说要有光

更多编程相关知识,请访问:编程入门!!

以上是vscode外掛分享:看看它如何實現煙火抖動效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.cn。如有侵權,請聯絡admin@php.cn刪除