个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 12:40:17 69 4
gpt4 key购买 nike

使用我的 Electron 项目(使用 angular 9)，制作了一个带有窗口控制按钮(最小化、最大化、恢复等)的自定义标题栏。现在，每当我单击这些按钮(假设最小化)时，窗口就会突然隐藏，而不会显示 Windows 桌面应用程序正常的平滑淡出动画。因此，我制作了另一个虚拟 Electron 项目(没有 Angular 并使用纯 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>


对于我的 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') ;
  }
}


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

最佳答案

因此，经过长时间的反复试验，我发现在我的 Angular 项目中，我有 transparent: true在 BrowserWindow 配置中删除后，我的项目具有平滑的最小化、最大化和恢复动画。

关于javascript - Electron 应用程序窗口在最小化、最大化和关闭事件时仍然有动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62083708/

69 4 0
文章推荐： electron - 共享 Electron 主过程
文章推荐： javascript - 未定义文档和窗口的Puppeteer Electron
文章推荐： javascript - 如何从其他本地文件Node.js调用函数？
文章推荐： react-native - Agora Cloud类 session 室登录失败
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com