今天小编给大家分享一下Electron怎么实现应用显示隐藏时展示动画效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
最终效果
实现思路
窗口设置透明
建立系统托盘
获取托盘坐标，实现应用在托盘上方出现
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.jsimport { 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);以上就是“Electron怎么实现应用显示隐藏时展示动画效果”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
