如何在离子3中的闪屏上更改微调器

Question

我想在android平台的启动画面上更改默认微调器。默认的微调器是圆形，我需要气泡微调器。他们是否有办法在闪屏上改变微调？

Answer 1

首先，您需要将配置文件更改为：

<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashScreenDelay" value="10000" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreen" value="true" />
<preference name="ShowSplashScreen" value="true" />

之后转到app.html并输入：

<div *ngIf="showSplash">
  <div class="spinner"></div>
</div>


<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

你的app.component.ts应如下所示：

import { timer } from 'rxjs/observable/timer';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  // ...omitted

  showSplash = true; // <-- show animation

  initializeApp() {
    this.platform.ready().then(() => {

      this.statusBar.styleDefault();
      this.splashScreen.hide();  // <-- hide static image

      timer(3000).subscribe(() => this.showSplash = false) // <-- hide animation after 3s
    });
  }
}]

而且你可以从app.scss中为你的微调器添加一些样式，如下所示：

.spinner{
  width:4em;
  height:4em;
  background:#a1a2a1;
  border-radius:50%;
  margin:5em auto;
  border:.3em solid transparent;
  -webkit-animation:glow 1s ease infinite;
  -moz-animation:glow 1s ease infinite;
  -o-animation:glow 1s ease infinite;
  animation:glow 1s ease infinite;
}
@-webkit-keyframes glow {
0%{
  box-shadow:0 0 0 .4em #a1a2a1,
  0 0 0 .1em #a1a2a1;
  -webkit-transform:rotate(360deg);
}
50%{border-top-color:#605556;}
100%{
  box-shadow:0 0 0 .4em #a1a2a1,
  0 0 0 3.6em transparent;
}
@-moz-keyframes glow {
0%{
  box-shadow:0 0 0 .4em #a1a2a1,
  0 0 0 .1em #a1a2a1;
  -moz-transform:rotate(360deg);
}
50%{border-top-color:#605556;}
100%{
  box-shadow:0 0 0 .4em #a1a2a1,
  0 0 0 3.6em transparent;
}
@-o-keyframes glow {
0%{
  box-shadow:0 0 0 .4em #a1a2a1,
  0 0 0 .1em #a1a2a1;
  -o-transform:rotate(360deg);
}
50%{border-top-color:#605556;}
100%{
  box-shadow:0 0 0 .4em #a1a2a1,
  0 0 0 3.6em transparent;
}
@keyframes glow {
0%{
  box-shadow:0 0 0 .4em #a1a2a1,
  0 0 0 .1em #a1a2a1;
  transform:rotate(360deg);
}
50%{border-top-color:#605556;}
100%{
  box-shadow:0 0 0 .4em #a1a2a1,
  0 0 0 3.6em transparent;
}

}

Answer 2

在此处输入代码您可以使用此代码进行更改

<preference name="SplashScreenSpinnerColor" value="#242424"/>

之后转到app.html并输入：