今天小编给大家分享一下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怎么实现应用显示隐藏时展示动画效果”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
