javascript - Electron 应用程序窗口在最小化、最大化和关闭事件时仍然有动画

问题描述

使用我的电子项目（使用 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() ;
}) ;

索引.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>

对于我的角度项目：

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') ;
  }
}

我的虚拟项目具有平滑的窗口动画，但角度项目仍然具有这些窗口事件的动画（就像在控制面板中关闭窗口动画一样）。我怎样才能解决这个问题？

标签： javascriptangularelectron

javascript - Electron 应用程序窗口在最小化、最大化和关闭事件时仍然有动画

问题描述

解决方案

推荐阅读