前言
Web 开发中，如何制作出漂亮的界面是我们都需要掌握的技能。在较为流行的框架中，例如 React、Angular、Vue 等，都会给我们提供丰富的样式组件以及工具，但是在一些场景中，我们需要通过一些其他方式达成需求。在这时候我们可以利用 NPM 包来实现我们的目的。
windows10-fluently-vibrancy 是一款 NPM 包，它可以在 Windows 平台上，为 Electron、NW 等框架提供 Windows 10 与 Fluent Design 的半透明模糊效果。今天，我们就来详细的介绍一下它的使用。
安装
使用 NPM 安装：
npm install --save windows10-fluently-vibrancy
使用
安装完成后，我们可以在项目中，通过以下代码进行调用：
-- -------------------- ---- ------- ----- - ------------- - - -------------------- ----- - --------------- --------------- - - --------------------------------------- -- ------- ----- --- - --- ---------------- -- --------- ------------------- - ------ -------- -- -------- ----- - -------- ---- ----- - -- -- -- -- ------ ---- ------- --- - -- ------------------------- --- -- --------- ---------------------
通过enableVibrancy函数，我们可以设置半透明模糊效果，传递两个参数：
第一个参数表示将要添加效果的浏览器窗口。
第二个参数是一个对象，包含两个属性：
- theme: 表示主题风格，可以设置为
light或者dark，默认值为dark。 - area：表示需要半透明效果的区域。当我们不需要窗口里所有的元素都半透明时，我们可以设置这个属性。需要注意的是 area 对象中 x、y 表示的是相对窗口的位置。
- theme: 表示主题风格，可以设置为
通过disableVibrancy函数，我们可以禁用半透明模糊效果，传递一个参数，表示需要禁用的浏览器窗口。
实现原理
这个 NPM 包的背后原理是 Windows 10 中的 Acrylic Material 特性。它是在纹理渲染的基础上，添加半透明透明度（Opacity）因子。
Acrylic Material 特性需要使用 Windows 中的 COM 附加组件，而该 NPM 包使用 Node.js 调用 Electron 的native addons，实现用 C++ 调用 COM 组件，以获取跨平台的特性。
示例
这是一个简单的 Electron 示例，具体的文件可以在这里找到：https://github.com/coalery/windows10-fluently-vibrancy-example。
-- -------------------- ---- -------
-- -------
----- - ---- ------------- - - --------------------
----- ---- - ----------------
----- --- - ---------------
----- - --------------- --------------- - - ---------------------------------------
--------------- --------------
-------- ------------ -- -
----- --- - --- ---------------
------ ----
------- ----
------ ------ -- ---
--------------- -
---------------- -----
-------- -------------------- -------------
-
---
------------------------
--------- -------------------- --------------
--------- --------
-------- ----
----
------------------- -
------ -------
----- - -- -- -- -- ------ ---- ------- -- -
---
---------------- -- -- -
---------------------
--- - -----
---
--- -------------------- ---- -------
-- ----------
------------------------------------------- -- -- -
------------------------------------------------------------ -- -- -
----- - ------ - - --------------------
---------------------------------------------------
---
------------------------------------------------------------ -- -- -
----- - ------ - - --------------------
----- --- - ----------------------------------------
----------------- - ---------------- - ---------------
---
-------------------------------------------------------------- -- -- -
----- - ------ - - --------------------
------------------------------------------------
---
----- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
------------ --------------
-------
--------- -
------------------- -----
--------- ---------
----- --
---- --
------ -----
------- -----
----------------- --------- ---- ---- -----
---------------- ----------
-------------------- -----
------------ -----
-
--------------- -
--------- ---------
------ --
---- --
------- -----
-------- -----
---------------- -------
------------ -------
-
-------------- -
-------- -------------
----------------- ------- -- -- -----
-------------- ----
------ -----
------- -----
------------ ----
------------- ----
-------- -----
------------------- --------
-
--------
-------
------
---- -----------------
---- -----------------------
---- --------------------- -------------------
---- --------------------- -------------------
---- --------------------- ---------------------
------
------
--------- -----------
-------
-------最终的运行效果如下：
总结
通过 windows10-fluently-vibrancy 这个 NPM 包，我们可以在 Electron 等框架中，实现 Windows 10 中的半透明模糊效果。让你的界面更加美丽和现代化。但是需要注意的是，该 NPM 包要求使用 Windows 10 系统，且可能无法与其他效果插件共存。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710e8dd3466f61ffe210