I’m trying to run animation(lottie animation) as a Splash screen and when splash screen finish I’m trying to setRoot to HomePage.
Need help.
app.component.ts
@Component({
templateUrl: 'app.html',
selector: 'lottie-animation-view-demo-app',
template: ` <lottie-animation-view
[options]="lottieConfig"
[width]="300"
[height]="600"
(animCreated)="handleAnimation($event)">
</lottie-animation-view>
<div id="player">
<p>Speed: x{{animationSpeed}}</p>
<div class="range-container">
<input #range type="range" value="1" min="0" max="3" step="0.5"
(change)="setSpeed(range.value)">
</div>
<button (click)="stop()">stop</button>
<button (click)="pause()">pause</button>
<button (click)="play()">play</button>
</div>`
})
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public navCtrl: NavController) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
this.lottieConfig = {
path: 'assets/octiver-earth.json',
autoplay: true,
loop: true
};
setTimeout(() => {
this.anim.pause();
// this.anim.destroy();
// this.navCtrl.push(HomePage);
}, 5000);
}
handleAnimation(anim: any) {
this.anim = anim;
}
stop() {
this.anim.stop();
}
play() {
this.anim.play();
}
pause() {
this.anim.pause();
}
setSpeed(speed: number) {
this.animationSpeed = speed;
this.anim.setSpeed(speed);
}