Can I add some animation(such as fade-in, fade-out) to splash?

K-Wen commented 5 years ago

I just want splash window appear with a fade-in animation and disappear with fade-out, how can I do this? Any help is very appreciated. thanks.

trodi commented 5 years ago

It looks like electron doesn't provide built-in options for fade in/out on the BrowserWindow. However there are a couple of routes you could go:

You might be able to BrowserWindow.setOpacity() multiple times to get your affect.
You likely accomplish what you desire in the renderer process. The templateUrl you pass to electron-splashscreen can be a full blown app. You could cause your splashscreen contents to animate however you wish. You likely want to set your splashScreenOpts to have transparency so the native window doesn't affect the outcome.

You can use initDynamicSplashScreen if you need a reference to the splashscreen BrowserWindow.

This issue discusses your use case: https://github.com/electron/electron/issues/2407

K-Wen commented 5 years ago

Great ideas, thank you for your help :)

promatik commented 4 years ago

In case anyone needs this, there is a very simple approach, you can fade in your HTML with CSS. In my case I have an HTML with an image only, but you can animate anything.

img {
  animation: fadein 1s;
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

<body>
  <img src="images/splashscreen.png" />
</body>

mondayrris commented 2 years ago

In case anyone needs this, there is a very simple approach, you can fade in your HTML with CSS. In my case I have an HTML with an image only, but you can animate anything.
img {
  animation: fadein 1s;
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
<body>
  <img src="images/splashscreen.png" />
</body>

A great help for me to put a Chinese New Year splash screen in a few minutes

trodi / electron-splashscreen

Can I add some animation(such as fade-in, fade-out) to splash? #18