Electron应用显示隐藏时展示动画效果实例

2024-04-02 19:04:59 450人浏览泡泡鱼

摘要

目录最终效果实现思路实现过程总结最终效果实现思路窗口设置透明建立系统托盘获取托盘坐标，实现应用在托盘上方出现 CSS 里面写上加载和退出的动画添加加载动画的事件，即给元素

最终效果

实现思路

窗口设置透明

建立系统托盘

获取托盘坐标，实现应用在托盘上方出现

CSS 里面写上加载和退出的动画

添加加载动画的事件，即给元素套上动画

设置单击事件，单击显示或者隐藏程序（或者添加 blur 事件，隐藏应用）

给托盘添加右键菜单退出应用

实现过程

窗口设置透明

const win = new BrowserWindow({
    width: 300,
    height: 400,
    frame: false, // 窗口边框
    skipTaskbar: true, // 窗口是否不显示在任务栏上面
    alwaysOnTop: true, // 窗口置顶
    transparent: true, // 窗口透明
    resizable: false,
    WEBPreferences: {
        // 通信文件 后面会用到
        preload: path.join(__dirname, "preload.js"),
        backgroundThrottling: false, // 后台运行是否禁止一些操作
    },
});

建立系统托盘

import { Tray } from "electron";

// 传入图标路径
tray = new Tray(path.join(__dirname, "../../public/imgs/loGo.ico"));

// 鼠标悬浮托盘时显示的文字
tray.setToolTip("Todo");

获取托盘坐标，实现应用在托盘上方

// 获取托盘所在位置信息
const { width, height, x, y } = tray.getBounds();

// 获取窗口信息 win 是 BrowserWindow 对象
const [w, h] = win.getSize();

// 刚好在正上方
win.setPosition(x + width / 2 - w / 2, y - h - 10);

// 封装成函数
const aboveTrayPosition = (win, tray) => {
    const { width, height, x, y } = tray.getBounds();
    const [w, h] = win.getSize();
    return [x + width / 2 - w / 2, y - h - 10]
}

CSS 里面写上加载和退出的动画

动画应该添加到html根元素上，根元素必须得是宽高 100%

@keyframes show {
    0% {
        opacity: 0;
        transfORM: translateY(300px) scale(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes hide {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(300px) scale(0);
    }
}

添加加载动画的事件

// preload.js
import { ipcRenderer } from "electron";

// 对应下面的 win.webContents.send("show");
// 默认有个 event 事件参数
ipcRenderer.on("show", (e) => {
    const root = document.querySelector(".root") as HTMLElement;
    root.style.animation = "show 0.3s linear forwards";
});

// 对应下面的 win.webContents.send("hide", s);
ipcRenderer.on("hide", (e, s: number) => {
    const root = document.querySelector(".root") as HTMLElement;
    root.style.animation = `hide ${s}s linear forwards`;
});

设置单击事件，单击显示或者隐藏程序并加载动画

// 添加托盘图标单击事件
tray.on("click", () => {
    // 窗口是否隐藏
    if (!win.isVisible()) {
        win.setPosition(...aboveTrayPosition(win, tray));
        win.show();
        
        // 展示加载动画
        win.webContents.send("show");
    } else {
        
        const s = 0.3;
        // 展示退出动画
        win.webContents.send("hide", s);
        
        // 退出动画加载完之后再隐藏程序
        setTimeout(() => {
            win.hide();
        }, s * 1000);
    }
});

给托盘添加右键菜单退出应用

import { Menu } from "electron";

// 创建菜单
let menu: Menu = Menu.buildFromTemplate([
    {
        label: "Quit",
        click() {
            app.quit();
        },
    },
]);

// 挂载到托盘右键上
tray.setContextMenu(menu);