Electron实现启动Loading动画效果

这是我参与更文挑战的第5天，活动详情查看：更文挑战。

Electron是什么

使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序 ——官网

Electron是GitHub开发的一个开源框架。它允许使用Node.js（作为后端）和Chromium（作为前端）完成桌面GUI应用程序的开发。Electron现已被多个开源Web应用程序用于前端与后端的开发，著名项目包括GitHub的Atom和微软的Visual Studio Code。——知乎

Electron负责搞定棘手的部分，而我们只需要利用我们的web技术构建应用程序即可。

搭建Electron项目

最方便的就是使用脚手架搭建，现在市面上比较成熟的脚手架例如electronforge，electron-vue等等，或者自己搭建一个拥有自己文档结构的项目，这里提供一个快速启动的方式。

# 克隆示例项目的仓库
$ git clone https://github.com/electron/electron-quick-start

# 进入这个仓库
$ cd electron-quick-start

# 安装依赖并运行
$ npm install && npm start

为什么要添加启动动画

当然是为了优化用户的使用体验（掩盖自己项目启动慢的事实）。项目业务不同则在启动时候的需求也不同，比如有的应用需要检测升级状态、登录状态或一些附加业务检测比如麦克风和摄像头，有些应用需要在在开始加载大量数据做支撑等等。我们当然想实现用户双击图标后立即进入应用，但代码的运行和数据加载等是需要时间的。既然这样，与其我们给用户展示代码运行的过程，何不给用户展示一张图片，这也是用户体验。让用户明白此时此刻是应用在加载，而不是认为应用卡死或者崩溃的猜测。

思路及实现

说白了，启动窗口它也是一个窗口，我们想让它在项目尚未准备完毕时出现在用户的视界中告诉用户我正在启动，准备完毕后关闭。而我们也无需使用多么复杂的手段，主要方法是监听我们主窗口进程，准备就绪后关闭启动窗口即可。

首先我们需要创建一个loading的HTML页面，其中可以对我们的启动窗口进行绘制以及各种平滑的等待效果。接着在主进程中创建生成Loading窗口的方法，同时接收一个回调函数在Loading窗口生成时触发。

const showLoading = (cb) => {
    loading = new BrowserWindow({
        show: false,
        frame: false, // 无边框（窗口、工具栏等），只包含网页内容
        width: 160,
        height: 180,
        resizable: false,
        transparent: true, // 窗口是否支持透明，如果想做高级效果最好为true
    });

    loading.once("show", cb);
    loading.loadFile("loading.html");
    loading.show();
};

然后我们在项目启动时调用showLoading方法，并传入创建主窗口的方法。

const createWindow = () => {
  window = new BrowserWindow({
    webPreferences: {
      nativeWindowOpen: true,
      title: "主窗口",
    },
    width: 800,
    height: 600,
    show: false,
  });
  setTimeout(() => {
        window.loadFile("index.html");  // 模拟启动准备时间
  }, 2000);
  window.once("ready-to-show", () => {
    loading.hide();
    loading.close();
    window.show();
  });
};

app.on("ready", () => {
  showLoading(createWindow);
});

在我们的主窗口准备就绪的时候关闭我们的启动窗口并展示我们的主窗口。注意，如果直接关闭启动窗口可能会存在闪烁现象，所以我们先将窗口隐藏再进行关闭。

看效果:

最后

通过这个例子我们可以了解关于BrowerWindow的实例事件，并能通过这些对应的事件实现我们想要的一些效果，比如用户鼠标聚焦、失焦应用的时候，显示、隐藏窗口的时候的操作等。