Electron怎么實現應用顯示隱藏時展示動畫效果

今天小編給大家分享一下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怎么實現應用顯示隱藏時展示動畫效果”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。