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并输入：

如何在Ionic 3的启动画面上更改微调器

2 个答案: