NPM 包 windows10-fluently-vibrancy 使用教程

前言

Web 开发中，如何制作出漂亮的界面是我们都需要掌握的技能。在较为流行的框架中，例如 React、Angular、Vue 等，都会给我们提供丰富的样式组件以及工具，但是在一些场景中，我们需要通过一些其他方式达成需求。在这时候我们可以利用 NPM 包来实现我们的目的。

windows10-fluently-vibrancy 是一款 NPM 包，它可以在 Windows 平台上，为 Electron、NW 等框架提供 Windows 10 与 Fluent Design 的半透明模糊效果。今天，我们就来详细的介绍一下它的使用。

安装

使用 NPM 安装：

--- ------- ------ ---------------------------

使用

安装完成后，我们可以在项目中，通过以下代码进行调用：

----- - ------------- - - --------------------
----- - --------------- --------------- - - ---------------------------------------

-- -------
----- --- - --- ----------------

-- ---------
------------------- -
  ------ -------- -- -------- ----- - -------- ----
  ----- - -- -- -- -- ------ ---- ------- --- - -- -------------------------
---

-- ---------
---------------------

通过enableVibrancy函数，我们可以设置半透明模糊效果，传递两个参数：

  • 第一个参数表示将要添加效果的浏览器窗口。

  • 第二个参数是一个对象，包含两个属性：

    • theme: 表示主题风格，可以设置为 light 或者 dark，默认值为 dark。
    • area：表示需要半透明效果的区域。当我们不需要窗口里所有的元素都半透明时，我们可以设置这个属性。需要注意的是 area 对象中 x、y 表示的是相对窗口的位置。

通过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

阅读全文

猜你喜欢

  • npm 包 wraiths 使用教程

    简介 Wraiths 是一款 Node.js 模块，可以用于生成网站的不同版本之间的视觉对比。它使用 PhantomJS 来捕获屏幕快照并生成图片。 如果您的项目需要不断升级迭代，同时您又需要保持不同...

    4 年前
  • npm 包 wrangel 使用教程

    前言 wrangel 是一个 Node.js 模块，可以方便地修改 JavaScript 对象的属性值。它的功能类似于 lodash 中的 _.set 方法，只不过 API 更加简单易用。

    4 年前
  • npm包wrangle使用教程

    在前端开发中，我们常常需要使用各种npm包来协助我们完成开发任务。wrangle是一个非常实用的npm包，可以帮助我们在项目中轻松地管理和操作对象数组。本篇文章将详细介绍wrangle的使用方法，希望...

    4 年前
  • npm 包 worker-farm-cli 使用教程

    什么是 worker-farm-cli worker-farm-cli 是一个 npm 包，它是一个用于在 Node.js 中管理和运行 worker 的工具。 我们知道，Javascript 是一门...

    4 年前
  • npm 包 wrap-async-context 使用教程

    在前端开发中，我们经常需要处理异步请求和回调函数。这些任务在 JavaScript 中通常使用 Promise 或 async/await 来处理。然而，处理异步函数的上下文（context）变得更加...

    4 年前
  • npm 包 wrap-clamp 使用教程

    在前端开发中，我们经常需要对文本进行截断操作。在过去，我们可能习惯使用 JavaScript 或 CSS 中的一些技巧来达到这个效果。例如，我们可以使用 JavaScript 计算字符串的长度，再通过...

    4 年前
  • npm 包 wsf 使用教程

    简介 WSF（Websocket Server Framework）是一款基于 WebSocket 协议的服务器框架。它提供了简单，易用的 API 让开发者能够快速地构建自己的 WebSocket 应...

    4 年前
  • npm 包 wxapp 使用教程

    前言 随着微信小程序的火热，很多开发者都开始研究如何更好地开发微信小程序。其中，使用 npm 包成为了一种较为流行的方式。本文将详细介绍如何使用 npm 包 wxapp 来进行微信小程序开发，并提供示...

    4 年前
  • npm 包 wxapp-api 使用教程

    介绍 npm 是 JavaScript 社区的包管理工具，可以方便的安装、升级和删除 JavaScript 包。而 wxapp-api 是一个面向微信小程序开发的 npm 包，包含了调用微信 API ...

    4 年前
  • npm 包 wxapp-cli 使用教程

    什么是 wxapp-cli？ wxapp-cli 是一个基于 npm 包的快速构建小程序的命令行工具。使用 wxapp-cli 可以快速搭建小程序开发环境，进行开发和部署。

    4 年前
  • npm 包 wxapp-cookie-shim 使用教程

    前言 在前端开发中，cookie 是不可或缺的一部分。然而，微信小程序并不支持 cookie，这给开发带来了极大的不便。但是，有开发者为此开发了 npm 包 wxapp-cookie-shim，通过该...

    4 年前
  • npm 包 wxapp-socket-io 使用教程

    在前端开发中，实时通信已经成为许多应用程序必不可少的一部分。为了实现 WebSocket 通信，我们需要选择一种合适的 WebSocket 库。本文将介绍如何使用 npm 包 wxapp-socket...

    4 年前
  • Npm 包 wxappy 使用教程

    在前端领域，npm 已经成为了一个必不可少的工具。npm 是 Node.js 的包管理器，包含了各种开发所需要的工具和库。而 wxappy 则是其中一个比较常用的 npm 包，它提供了一些实用的功能，...

    4 年前
  • npm 包 wsfp 使用教程

    介绍 wsfp 是一个能够通过 WebSocket 连接发送和接收文件的 npm 包。 本文将介绍如何使用 wsfp，包括如何安装和设置，以及如何进行文件传输。此外，我们还将讨论如何在前端中使用 ws...

    4 年前
  • npm 包 wsgateway 使用教程

    在使用 WebSocket 协议实现实时通信的时候，很多情况下我们都需要一个 Websocket 代理服务器来处理来自不同客户端的数据，这时候 wsgateway 可以派上用场。

    4 年前
  • npm 包 wsgif 使用教程

    wsgif 是一个 npm 包，它提供了一种将 WSGI （Web Server Gateway Interface）应用转换为 Node.js 应用的方法。这个包非常有用，特别是当你需要在 Node...

    4 年前
  • npm 包 wsh-grammar 使用教程

    wsh-grammar 是一个基于 JavaScript 的解释器，它可以解析并执行自定义的语法规则。使用该 npm 包可以让开发者更轻松地创建和验证用户输入的语法，以及执行一些复杂的任务。

    4 年前
  • npm包 wsh-lib 使用教程

    简介 在前端开发中，我们经常需要使用一些工具或者第三方库来帮助我们完成一些复杂的任务，例如网络请求、数据处理等。这些工具或者库通常以包的形式发布在npm上。在本篇文章中，我们将介绍一个名为wsh-li...

    4 年前
  • npm 包 Workerrpc 使用教程

    Workerrpc 是一个在浏览器中使用 Web Worker 的轻量级 RPC（远程过程调用）框架，它使得前端开发者可以方便地在 Web Worker 上运行远程过程，并且可以获取异步执行的好处。

    4 年前
  • npm 包 workerjs 使用教程

    在现代 web 应用中，前端开发面临着越来越多的性能挑战，尤其是处理大量计算、数据处理和图像操作时，前端代码需要占用大量 CPU 时钟周期，这通常会导致应用变得缓慢以及难以响应。

    4 年前

相关推荐

    暂无文章