[英]Electron app window still animations on minimize, maximize and close events
使用我的 electron 項目（使用 angular 9），使用 window 控制按鈕（最小化、最大化、恢復等）制作了一個自定義標題欄。 現在，每當我單擊這些按鈕（假設最小化）時，window 會突然隱藏，而不會顯示平滑的淡出 animation，這對於 windows 桌面應用程序來說是正常的。 因此，我制作了另一個虛擬 electron 項目（沒有 angular 並使用純 JavaScript）為 window 事件代碼創建了 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(); });
索引.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() ; }) ;
應用程序-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'); } }
My dummy project has smooth window animation but the angular project has still animations on those window events(it's like windows animations are closed in control panel). 我怎樣才能解決這個問題？
因此，經過長時間的反復試驗，我發現在我的 angular 項目中，我在 BrowserWindow 配置中具有transparent: true刪除后我的項目具有平滑的最小化、最大化和恢復 animation。
Atom Electron使用html按鈕和javascript關閉和最小化窗口
[英]Atom Electron Close and Minimize window using the html button and javascript
如何將Chrome應用的最大寬度設置為比最小，最大化，關閉按鈕的寬度窄？
[英]How to set Chrome app's max width narrower than the width of minimize, maximize, close -buttons?
Electron.js 如何最小化/關閉窗口到系統托盤並從托盤恢復窗口？
[英]Electron.js How to minimize/close window to system tray and restore window back from tray?
如何通過Javascript刪除窗口的最小化和最大化屬性
[英]How to remove minimize and maximize property of a window by Javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.