Electron 应用程序窗口在最小化、最大化和关闭事件时仍然有动画
Posted
技术标签:
【中文标题】Electron 应用程序窗口在最小化、最大化和关闭事件时仍然有动画【英文标题】：Electron app window still animations on minimize, maximize and close events 【发布时间】：2020-09-16 21:21:59 【问题描述】：使用我的电子项目（使用 angular 9），制作了一个带有窗口控制按钮（最小化、最大化、恢复等）的自定义标题栏。现在，每当我单击这些按钮（假设最小化）时，窗口就会突然隐藏，而不会显示 Windows 桌面应用程序正常的平滑淡出动画。因此，我制作了另一个虚拟电子项目（没有角度并使用纯 javascript）为窗口事件代码创建了 4 个按钮，如下所示的虚拟项目：
index.js
const app, BrowserWindow, ipcMain = require('electron') ;
let win ;
app.on('ready', () =>
win = new BrowserWindow(
width: 800,
height: 636,
frame: false,
webPreferences:
nodeIntegration: true
) ;
win.loadFile('./src/index.html') ;
);
app.on('window-all-closed', () =>
app.quit() ;
)
ipcMain.on('minimize:event', () =>
win.minimize() ;
) ;
ipcMain.on('maximize:event', () =>
win.maximize() ;
) ;
ipcMain.on('close:event', () =>
win.close() ;
) ;
ipcMain.on('restore:event', () =>
win.restore() ;
) ;index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Hello World
<button id="min" click="minimize()">Minimize</button>
<button id="max" click="maximize()">Maximize</button>
<button id="close" click="close()">Close</button>
<button id="res" click="restore()">Restore</button>
<script>
const ipcRenderer = require('electron') ;
document.getElementById('min').onclick = function()
ipcRenderer.send('minimize:event') ;
document.getElementById('max').onclick = function()
ipcRenderer.send('maximize:event') ;
document.getElementById('close').onclick = function()
ipcRenderer.send('close:event') ;
document.getElementById('res').onclick = function()
ipcRenderer.send('restore:event') ;
</script>
</body>
</html>对于我的 Angular 项目：
main.js(index.js)
const app, BrowserWindow, ipcMain = require('electron') ;
const config = require('./config') ;
let win, settings ;
let gotSingleInstanceAccess = app.requestSingleInstanceLock() ;
if(!gotSingleInstanceAccess)
app.quit() ;
app.on('ready', () =>
/// on redy fetch the settings
settings = config.createDefaultSettingsAndReturn() ;
// Create the browser window.
win = new BrowserWindow(
width: settings.appSettings.defaultWidth,
height: settings.appSettings.defaultHeight,
webPreferences:
nodeIntegration: true,
,
show: false,
frame: false,
transparent: true,
minHeight: settings.appSettings.minHeight,
minWidth: settings.appSettings.minWidth
) ;
if(!settings.appSettings.trayMode)
if(settings.appSettings.wasMaximized)
win.maximize() ;
else
win.setBounds(settings.windowSettings.windowBounds) ;
else
// do for traymode ;
win.loadURL('http://localhost:4200') ;
win.on('ready-to-show', () =>
win.show() ;
) ;
win.webContents.on('did-fail-load', () =>
win.loadURL('http://localhost:4200')
);
win.on('closed', () =>
win = null ;
)
) ;
app.on('second-instance', (event,args, cwd) =>
if(win)
if(win.isMinimized())
win.restore() ;
win.focus() ;
)
// Quit when all windows are closed.
app.on('window-all-closed', () =>
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
console.log('saved settings successfully')
if (process.platform !== 'darwin')
app.quit()
)
app.on('activate', () =>
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win = null)
createWindow() ;
) ;
ipcMain.on('window:minimize', () =>
win.blur() ;
win.minimize() ;
) ;
ipcMain.on('window:maximize', () =>
win.maximize() ;
win.resizable = false ;
) ;
ipcMain.on('window:restore', () =>
win.restore() ;
win.resizable = true ;
) ;
ipcMain.on('window:close', () =>
win.close() ;
) ;app-window.service.ts
import Injectable from '@angular/core';
import WindowSettings from '../interface/settings';
import AppStoreService from './app-store.service';
import BehaviorSubject from 'rxjs';
import ElectronService from 'ngx-electron';
import ElectronHelperService from './electron-helper.service';
@Injectable()
export class AppWindowService
windowSettings: WindowSettings ;
maxmizeObservable: BehaviorSubject<boolean> ;
constructor(private helper: ElectronHelperService, private electron: ElectronService, private config: AppStoreService)
this.windowSettings = this.config.store.get('settings.windowSettings') ;
this.maxmizeObservable = new BehaviorSubject<boolean>(this.windowSettings.wasMaximized) ;
// showing maximize/restore button
changeMaximizedState(value: boolean)
this.maxmizeObservable.next(value) ;
this.windowSettings.wasMaximized = value ;
winMaximize()
this.windowSettings.windowBounds = this.helper.win.getBounds() ;
this.electron.ipcRenderer.send('window:maximize') ;
winRestore()
this.helper.win.setBounds(this.windowSettings.windowBounds) ;
this.electron.ipcRenderer.send('window:restore') ;
winMinimize()
this.electron.ipcRenderer.send('window:minimize') ;
winClose()
this.electron.ipcRenderer.send('window:close') ;
我的虚拟项目具有平滑的窗口动画，但角度项目仍然在这些窗口事件上具有动画（就像在控制面板中关闭窗口动画一样）。我该如何解决这个问题？
【问题讨论】：
【参考方案1】：所以，经过长时间的反复试验，我发现在我的 Angular 项目中，在删除后，我的 BrowserWindow 配置中有 transparent: true，我的项目具有平滑的最小化、最大化和恢复动画。
【讨论】：
以上是关于Electron 应用程序窗口在最小化、最大化和关闭事件时仍然有动画的主要内容，如果未能解决你的问题，请参考以下文章
Electron无边框窗口（自定义最小化、最大化、关闭、可拖拽）
Atom Electron - 使用 javascript 关闭窗口
electron窗口相关操作（放大缩小退出，可拖动，可resize等）