第Electron應用顯示隱藏時展示動畫效果實例目錄最終效果實現思路實現過程總結

最終效果

實現思路

窗口設置透明

建立系統托盤

獲取托盤坐標，實現應用在托盤上方出現

CSS里面寫上加載和退出的動畫

添加加載動畫的事件，即給元素套上動畫

設置單擊事件，單擊顯示或者隱藏程序（或者添加blur事件，隱藏應用）

給托盤添加右鍵菜單退出應用

實現過程

窗口設置透明

constwin=newBrowserWindow({

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=newTray(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);

//封裝成函數

constaboveTrayPosition=(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%

@keyframesshow{

0%{

opacity:0;

transform:translateY(300px)scale(0);

100%{

opacity:1;

transform:translateY(0)scale(1);

@keyframeshide{

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)={

constroot=document.querySelector(".root")asHTMLElement;

root.style.animation="show0.3slinearforwards";

//對應下面的win.webContents.send("hide",s);

ipcRenderer.on("hide",(e,s:number)={

constroot=document.querySelector(".root")asHTMLElement;

root.style.animation=`hide${s}slinearforwards`;

});

設置單擊事件，單擊顯示或者隱藏程序并加載動畫

//添加托盤圖標單擊事件

tray.on("click",()={

//窗口是否隱藏

if(!win.isVisible()){

win.setPosition(...aboveTrayPosition(win,tray));

win.show();

//展示加載動畫

win.webContents.send("show");

}else{

consts=0.3;

//展示退出動畫

win.webContents.send("hide",s);

//退出動畫加載完之后再隱藏程序

setTimeout(()={

win.hide();

},s*1000);

});

給托盤添加右鍵菜單退出應用

import{Menu}from"electron";

//創建菜單

letmen