Electron應(yīng)用顯示隱藏時(shí)展示動(dòng)畫(huà)效果實(shí)例

第Electron應(yīng)用顯示隱藏時(shí)展示動(dòng)畫(huà)效果實(shí)例目錄最終效果實(shí)現(xiàn)思路實(shí)現(xiàn)過(guò)程總結(jié)

最終效果

實(shí)現(xiàn)思路

窗口設(shè)置透明

建立系統(tǒng)托盤(pán)

獲取托盤(pán)坐標(biāo)，實(shí)現(xiàn)應(yīng)用在托盤(pán)上方出現(xiàn)

CSS里面寫(xiě)上加載和退出的動(dòng)畫(huà)

添加加載動(dòng)畫(huà)的事件，即給元素套上動(dòng)畫(huà)

設(shè)置單擊事件，單擊顯示或者隱藏程序（或者添加blur事件，隱藏應(yīng)用）

給托盤(pán)添加右鍵菜單退出應(yīng)用

實(shí)現(xiàn)過(guò)程

窗口設(shè)置透明

constwin=newBrowserWindow({

width:300,

height:400,

frame:false,//窗口邊框

skipTaskbar:true,//窗口是否不顯示在任務(wù)欄上面

alwaysOnTop:true,//窗口置頂

transparent:true,//窗口透明

resizable:false,

webPreferences:{

//通信文件后面會(huì)用到

preload:path.join(__dirname,"preload.js"),

backgroundThrottling:false,//后臺(tái)運(yùn)行是否禁止一些操作

});

建立系統(tǒng)托盤(pán)

import{Tray}from"electron";

//傳入圖標(biāo)路徑

tray=newTray(path.join(__dirname,"../../public/imgs/logo.ico"));

//鼠標(biāo)懸浮托盤(pán)時(shí)顯示的文字

tray.setToolTip("Todo");

獲取托盤(pán)坐標(biāo)，實(shí)現(xiàn)應(yīng)用在托盤(pán)上方

//獲取托盤(pán)所在位置信息

const{width,height,x,y}=tray.getBounds();

//獲取窗口信息win是BrowserWindow對(duì)象

const[w,h]=win.getSize();

//剛好在正上方

win.setPosition(x+width/2-w/2,y-h-10);

//封裝成函數(shù)

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里面寫(xiě)上加載和退出的動(dòng)畫(huà)

動(dòng)畫(huà)應(yīng)該添加到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);

}

添加加載動(dòng)畫(huà)的事件

//preload.js

import{ipcRenderer}from"electron";

//對(duì)應(yīng)下面的win.webContents.send("show");

//默認(rèn)有個(gè)event事件參數(shù)

ipcRenderer.on("show",(e)={

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

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

//對(duì)應(yīng)下面的win.webContents.send("hide",s);

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

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

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

});

設(shè)置單擊事件，單擊顯示或者隱藏程序并加載動(dòng)畫(huà)

//添加托盤(pán)圖標(biāo)單擊事件

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

//窗口是否隱藏

if(!win.isVisible()){

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

win.show();

//展示加載動(dòng)畫(huà)

win.webContents.send("show");

}else{

consts=0.3;

//展示退出動(dòng)畫(huà)

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

//退出動(dòng)畫(huà)加載完之后再隱藏程序

setTimeout(()={

win.hide();

},s*1000);

});

給托盤(pán)添加右鍵菜單退出應(yīng)用

import{Menu}from"electron";

//創(chuàng)建菜單

letmen