Lottie 动画以 angular 结尾时如何更改按钮布局？

编程问答 2022-05-21

问题描述

我们的应用程序的要求之一是使用 Lottie 为应用程序的入门部分添加动画。场景将是，如果 Lottie 动画结束，Skip to Homepage 按钮应更改为 Home 按钮。我很难用我的应用程序来实现它。我已经被困在这里将近一个星期了，但仍然无法申请我的应用程序。如果我正确应用它，我很困惑。希望您能够帮助我。我将在下面添加我的代码以供参考。谢谢

.ts

 // LottIE
   animationCreated(animationItem: AnimationItem): void {
   this.animationItem = animationItem;
   this.animationItem.autoplay = true;
   this.animationItem.loop = false;
    if (this.animationItem.loop === false) {
     this.onLoopComplete();
     this.showHomeButton = true;
   }
 }

  onLoopComplete(): void {
     this.ngzone.runOutsideAngular(() => {
     this.animationItem.addEventListener('loopComplete',() => {});
     console.log(
       this.animationItem.addEventListener('loopComplete',() => {})
     );
   });
 }

.html

<div class="demo">
        <ng-lottie
          *ngIf="shown"
          containerClass="centerLottie"
          width="520px"
          height="420px"
          [options]="options"
          (animationCreated)="animationCreated($event)"
        ></ng-lottie>
      </div>   

   <ion-row>
     <ion-col size="4"></ion-col>
     <ion-col size="4">
     <div class="ion-text-center ion-no-padding" *ngIf="this.pageInddex_d==1">
      <ion-button  *ngIf="!showHomeButton" fill="clear" routerLink="/home" size="large" shape="round" color="primary">
      Skip to homepage
      </ion-button>
    <ion-button  *ngIf="showHomeButton" expand="full" routerLink="/home" size="large" shape="round" color="primary">
        Home
      </ion-button>
     </div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularhtmlionic-frameworklottielottietypescripttypescripttypescript