如何在 Ionic 4 中添加标签动画？

Posted 2023-03-13

【中文标题】如何在 Ionic 4 中添加标签动画？

【英文标题】：How to add tab animation on change in Ionic 4?

【发布时间】：2019-06-27 13:16:42

【问题描述】：

我想在选项卡开关上添加向前和向后导航动画。

我想复制 Facebook 应用标签导航动画的当前状态。

我目前尝试在单个选项卡上添加一个方法来调用调用向前导航的函数。

<ion-tab-bar slot="bottom">
  <ion-tab-button (click)="goToListTab()" mode="md">
    <ion-icon name="list"></ion-icon>
    <ion-label>Orders</ion-label>
  </ion-tab-button>

  <ion-tab-button (click)="goToNewTab()" mode="md">
    <ion-icon name="add"></ion-icon>
    <ion-label>New Order</ion-label>
  </ion-tab-button>

  <ion-tab-button (click)="goToAccountTab()" mode="md">
    <ion-icon name="person"></ion-icon>
    <ion-label>Account</ion-label>
  </ion-tab-button>
</ion-tab-bar>

我的 .ts 文件具有调用导航的功能。为了简化，我只包括了一个。

goToAccountTab() 
    this.router.navigateBack('/tabs/account');

在 goToAccountTab 上，我希望它可以导航到带有 navigateBack 动画的帐户选项卡，但它成功地转到了帐户选项卡，但没有执行 navigateBack 动画。

【参考方案1】：

使用 Ionic v4，我无法从选项卡控制器获取索引，但我通过保留选项卡的列表对象并以这种方式获取数字索引来解决此问题。

package.json

"@ionic/angular": "^4.9.1"
"@angular/core": "^8.2.7"
"com.telerik.plugins.nativepagetransitions": "^0.6.5",

Tabs.ts：

import  Component, OnInit, ViewChild  from '@angular/core';

import  IonTabs  from '@ionic/angular';

import 
  NativePageTransitions,
  NativeTransitionOptions,
 from '@ionic-native/native-page-transitions/ngx';


@Component(
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
)
export class TabsPage implements OnInit 

  @ViewChild('navTabs',  static: false ) navTabs: IonTabs;

  private tabs = 
    events: 0,
    notifications: 1,
    profile: 2
  ;
  loaded = false;
  tabIndex = 0;

  constructor(
    private nativePageTransitions: NativePageTransitions
  )  

  private getAnimationDirection(e: any): string 

    const currentIndex = this.tabIndex;
    this.tabIndex = this.tabs[e.tab];

    switch (true) 
      case currentIndex > this.tabs[e.tab]:
        return 'left';
      case currentIndex < this.tabs[e.tab]:
        return 'right';
    
  

  transition(e: any): void 

    const options: NativeTransitionOptions = 
      direction: this.getAnimationDirection(e),
      duration: 250,
      slowdownfactor: -1,
      slidePixels: 0,
      iosdelay: 20,
      androiddelay: 0,
      fixedPixelsTop: 0,
      fixedPixelsBottom: 48,
    ;

    if (!this.loaded) 
      this.loaded = true;
      return;
    

    this.nativePageTransitions.slide(options);
  

Tabs.html

<ion-tabs #navTabs (ionTabsWillChange)="transition($event)">

  <ion-tab-bar color="dark" slot="bottom">

    <ion-tab-button tab="events">
      <ion-icon name="calendar"></ion-icon>
      <ion-label>Events</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="notifications">
      <ion-icon name="notifications"></ion-icon>
      <ion-label>Notification</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="profile">
      <ion-icon name="barcode"></ion-icon>
      <ion-label>Profile</ion-label>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

【参考方案2】：

ionic 这样做的方式是使用 native page transitions 插件，即 no longer maintained 并且您遇到了我无法修复的错误（在制作动画时，您会看到两次页面）但这是我发现的最好的解决方案，因为 Ionic 没有正确地做到这一点（目前）。

所以，我把代码放在这里，它可能会有所帮助，也许你会找到解决办法;)

运行

ionic cordova plugin add com.telerik.plugins.nativepagetransitions
npm install @ionic-native/native-page-transitions

导入到 app.module.ts

import  NativePageTransitions  from '@ionic-native/native-page-transitions/ngx'

@NgModule(
  imports: [
    NativePageTransitions,
  ]

在您的 tabs.page.ts 中添加动画逻辑

import 
  NativePageTransitions,
  NativeTransitionOptions,
 from '@ionic-native/native-page-transitions/ngx'

export class TabsPage 
loaded: boolean = false
tabIndex: number = 0

constructor(private nativePageTransitions: NativePageTransitions) 

  //Look the index to see which direction to go (if you have more than 3 tabs)
  private getAnimationDirection(e: any): string 
    var currentIndex = this.tabIndex

    this.tabIndex = e.index
    // or 
    // this.tabIndex = Object.keys(this.tabs).indexOf(e.tab)

    switch (true) 
      case currentIndex < e.index:
        return 'left'
      case currentIndex > e.index:
        return 'right'
    
  

  transition(e: any): void 
    let options: NativeTransitionOptions = 
      direction: this.getAnimationDirection(e),
      duration: 250,
      slowdownfactor: -1,
      slidePixels: 0,
      iosdelay: 20,
      androiddelay: 0,
      fixedPixelsTop: 0,
      fixedPixelsBottom: 48,
    

    if (!this.loaded) 
      this.loaded = true
      return
    

    this.nativePageTransitions.slide(options)
  

在tabs.page.html里面

<ion-tabs (ionTabsWillChange)="transition($event)">
 /*...*/
</ion-tabs>

注意： 1. 对我来说，$event 给了我一个类似tab: 'home' 的对象，因为我正在通过一个标签数组创建带有循环的标签，所以我可以找到带有 Object.keys(tabs).indexOf($event.tab) 的索引 2.我也尝试过使用简单的角度路线动画，但是由于ionic将逻辑包装在ion-tabs中，它似乎不起作用