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.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);
总结
到此这篇关于Electron应用显示隐藏时展示动画的文章就介绍到这了,更多相关Electron显示隐藏展示动画内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
