如何通过vscode插件实现烟花抖动动画效果分享？

本文共计2552个文字，预计阅读时间需要11分钟。

本篇文章向您分享一个vscode插件——Power+Mode，它可以让代码编写更流畅、编辑器更响应；一起研究一下Power+Mode插件实现烟花动画、编辑器不卡顿的原理，看看吧！

最近一直在研究vscode插件，今天就来聊聊Power+Mode插件。

本篇文章给大家分享一个vscode插件--power mode，编写代码边放烟花、编辑器还会抖动；一起来研究一下power mode插件实现烟花抖动效果的原理，一起来看看吧！

最近一直在研究 vscode 插件，今天给大家一分享一个效果特别炫的插件，名字叫 power mode。

编写代码边放烟花、编辑器还会抖动。

效果很炫，但是我们肯定不能满足于会用，得研究下它是怎么实现的。

实现思路

在 vscode 里大家可能没啥思路，但如果这个效果放到网页里呢，文本改变的时候抖动编辑器、然后再上面出现一些烟花效果。这个可能有的同学就有思路了。

抖动编辑器：抖动不也是个动画么，就是左右位移，这一秒右移，下一秒回到原位置，这样就抖起来了。

烟花效果：不管啥花里胡哨的烟花，给个 gif 我们就能搞定，就是在文本上方加一个元素，然后把 gif 放上去，下次加 gif 的时候把上次的删除。

这样就能在网页里实现编辑器抖动 + 放烟花效果了。

把这个效果放到 vscode 里实现也是一样的思路，因为 vscode 是基于 electron 实现的啊。

而 electron 又是基于 chromium + nodejs，也就是 ui 部分是网页。