WWW.lllT.neT这篇文章内容给各位共享一个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: 'absolute',
    [CSS_LEFT] : `-10px`,
    [CSS_TOP]: `-1.2rem`,
    width: `${this.config.explosionSize}ch`,
    height: `${this.config.explosionSize}rem`,
    display: `inline-block`,
    ['z-index']: 1,
    ['pointer-events']: 'none',
};

// 款式目标变换为字符串数组
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:'',
        textDecoration: `none; ${defaultCssString}${backgroundCssString} ${customCssString}`,
    },
    textDecoration: `none; position: relative;`,
    rangeBehavior: vscode.DecorationRangeBehavior.ClosedClosed
});

性能优化

每回编缉都加一个 gif 特性毫无疑问很差,因此得做提升,可以从开启工作频率、与此同时存有的 gif 总数来考虑到:

  • 节流阀,每1秒只可以开启一次

vscode软件共享:看一下它怎样完成烟火颤动实际效果

  • gif 存有一段时间就删除

vscode软件共享:看一下它怎样完成烟火颤动实际效果

做好了,那样大家把颤动和放烟花在 vscode 里边完成了一遍。

可是,还得加个开启的通道。

什么时间开启呢?牵涉到2个 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软件共享:看一下它怎样完成烟火颤动实际效果的详尽具体内容,大量请关心自学java网其他相关文章!

WWW.lllT.neT

声明:有的资源来自网络转载,版权归原作者所有,如有侵犯到您的权益请联系邮箱:our333@126.com我们将配合处理!

原文地址:vscode软件共享:看一下它怎样完成烟火颤动实际效果发布于2021-12-09 10:45:02