Electron-（二）桌面应用的启动动画创建

news2024/11/29 3:58:57

一、概述

在很多桌面应用中都会有启动画面的显示。启动画面可以解决在启动时耗时较长，将每一步反馈给用户。另外一方面解决启动过程中的环境检查及检查结果的反馈。

在当今的桌面应用领域，启动动画已成为提升用户体验的重要组成部分。它不仅仅是一个简单的视觉效果，更是一种与用户沟通的方式。在很多桌面应用中，启动画面的显示具有至关重要的作用。一方面，当应用在启动时可能会因为各种复杂的初始化过程而耗时较长，启动动画能够将这个过程分段展示给用户，让用户了解应用正在进行的操作以及大致的进度。另一方面，它还能够在启动过程中对环境进行检查，并及时将检查结果反馈给用户，使用户对应用的启动状态有更清晰的了解。

二、主要思路

通过启动动画，将加载过程分段化，在步骤中进行环境检查。

通过精心设计的启动动画，我们可以将应用的加载过程进行合理的分段化处理。在每一个分段步骤中，不仅可以展示加载的进度，还能够对相关的环境条件进行检查。这种将加载过程与环境检查相结合的方式，使得应用在启动过程中能够更加智能地与用户交互，及时发现并处理可能出现的问题，确保应用能够顺利启动。

三、实现步骤

1. 定义启动步骤

这是创建启动动画的基础。每一个启动步骤都包含了丰富的信息，这些信息共同构成了动画展示的核心内容。

进度百分比（progress）：它清晰地向用户展示了当前步骤在整个启动过程中所处的位置，让用户能够直观地了解到应用的加载进度。例如，一个步骤的进度百分比为 0.1，表示该步骤在整个启动过程中大约完成了 10%。
停留时间（time）：每个步骤都需要一定的时间来完成相应的操作，这个停留时间就是为了确保步骤能够充分执行。比如，设置为 1000 毫秒，意味着在这个步骤上，应用会停留 1 秒左右来完成相关任务。
标题（title）：标题是对每个步骤主要内容的概括，能够让用户快速了解当前步骤的大致目的。例如，“初始化” 这个标题就表明该步骤可能是在对应用的一些基本设置或组件进行初始化操作。
内容（content）：它进一步详细描述了步骤所涉及的具体操作或相关信息。虽然在某些简单的步骤中可能内容为空，但在一些复杂的步骤中，内容可以详细说明正在进行的操作细节。
完成时的信息（finishInfo）：包括了步骤完成时可能出现的两种结果，即成果和失败的相关信息。这对于用户了解步骤的最终状态非常重要。例如，一个步骤可能在完成时显示 “完成” 或 “失败” 的提示信息。
失败时候是否停止（stopWhenFailure）：这个属性决定了当步骤出现失败情况时，整个启动过程是否应该停止。如果设置为false，则即使该步骤失败，应用仍会尝试继续后续的步骤；如果设置为true，则一旦该步骤失败，整个启动过程将停止。
具体执行步骤（action）：这是每个步骤的核心操作部分，它定义了该步骤具体要做什么事情。通常是一个异步操作，并且需要返回True或False来表示操作是否成功。例如，一个步骤可能通过setTimeout来模拟一个异步操作，并在一定时间后通过回调函数返回True表示操作成功。

示例：

const step = {
    progress: 0.1,
    time: 1000,
    title: "初始化",
    content: "",
    finishInfo: ["完成", "失败"],
    stopWhenFailure: false,
    action: (callback) => {
      setTimeout(() => {
        callback(true);
      }, 500);
    },
  }

2. 依次实现启动步骤

由于每一步的步骤可能是异步操作，隐藏采用递归方法实现在每一步执行完成后再进行下一步骤。

递归执行的核心逻辑（runStep函数）

首先，通过const step = steps[i];获取当前要执行的步骤。如果当前步骤不存在（!step），则表示所有步骤已经执行完毕，函数直接返回。在每个步骤开始时，通过 log.info(正在进行启动第x步，{step.title} ${step.content});记录日志，让开发者能够清楚地了解到应用正在执行的步骤内容。
然后，通过const info = getStepStartInfo(steps, step,i);获取步骤开始时的相关信息，并通过loadingWin.webContents.send(MESSAGE_TYPES.LOADING_STEP_INFO,info);将这些信息发送到加载窗口，以便在窗口中显示相关的启动步骤信息。
接着，定义了stepEnd函数来处理步骤结束时的情况。如果步骤失败（!res&&step.stopWhenFailure），则通过whenStepFailure(loadingWin, mainWindow, step, i,theInfo);处理失败情况；如果步骤成功，则通过const info = getStepEndInfo(step, i, res);获取步骤结束时的信息，并通过loadingWin.webContents.send(MESSAGE_TYPES.LOADING_STEP_INFO, info);将信息发送到加载窗口显示。
在步骤成功后，通过sleep(step.time||1000);保持等待画面，显示进度，这里的sleep函数可能是一个自定义的用于模拟等待时间的函数。当所有步骤都执行完成（i===steps.length-5）时，通过startMainWindow(mainWindow, loadingWin);启动主窗口，并关闭加载窗口。
最后，如果当前步骤不是最后一个步骤（i < steps.length），则通过runStep(i + 1);递归调用自身，继续执行下一个步骤。

// 递归执行启动步骤
const runStep = (i) => {
  const step = steps[i];
  if (!step) return;

  // step 开始
  log.info(`正在进行启动第${i + 1}步，${step.title} ${step.content}`);

  const info = getStepStartInfo(steps, step, i);
  loadingWin.webContents.send(MESSAGE_TYPES.LOADING_STEP_INFO, info);

  const stepEnd = (res) => {
    // step 失败
    if (!res && step.stopWhenFailure) {
      whenStepFailure(loadingWin, mainWindow, step, i, theInfo);
      return;
    }
    // step 成功
    const info = getStepEndInfo(step, i, res);
    loadingWin.webContents.send(MESSAGE_TYPES.LOADING_STEP_INFO, info);

    // 保持等待画面，显示进度
    sleep(step.time || 1000);

    // 所有 step 都执行完成
    i === steps.length - 1 && startMainWindow(mainWindow, loadingWin);

    // 下一个 step
    i < steps.length && runStep(i + 1);
  };
  const theInfo = info;
  step.action(stepEnd);
};
runStep(0);