イオン6＆角度でリストアニメーション

この記事ではイオンのリストアニメーションを作成する方法を学ぶつもりです.
我々は、このアニメーションを実装するつもりです


グリッドリスト
まず、2列のグリッドリストを実装する必要があります
ホーム.ページ.HTML

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col
        size="6"
        *ngFor="let temp of templates;"
      >
        <ion-item
          class="ion-no-padding"
          lines="none"
        >
          <ion-img [src]="temp.background"> </ion-img>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

簡単なコードですsize="6" 画面の幅の半分をすべての項目に与えるion-grid ドキュメント

It (grid) is based on a 12 column layout with different breakpoints based on the screen size

And templates ここではリスト配列をホームで定義します.ページ.TS

export class HomePage implements AfterViewInit {
  // You can give your own background asset path here
  templates = [
    {
      id: 0,
      background: 'assets/hotel/hotel_booking.png',
      screenPath: 'hotel-booking',
    },
    {
      id: 1,
      background: 'assets/fitness_app/fitness_app.png',
      screenPath: 'fitness-app',
    },
    {
      id: 2,
      background: 'assets/design_course/design_course.png',
      screenPath: 'design-course',
    },
  ];

  constructor() {}
}

アニメーションの実装
リストアイテムのリファレンスが必要なので、アニメーションを実装する必要があります

最初にIDを割り当てるion-col リファレンスを含める
すべての子アイテム

ホーム.ページ.HTML

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col
        size="6"
        *ngFor="let temp of templates;"
        #templateList   <- Add this
      >
        // same as above
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

今ホームで.ページ.我々は使用するつもりですViewChildren 我々が必要と
アニメーション化するすべてのリスト項目の参照

export class HomePage implements AfterViewInit {
  // Here 'templateList' is the id
  @ViewChildren('templateList', { read: ElementRef })
  templateListRef: QueryList<ElementRef>;

  ...
}

次のステップは、参照を使用してリスト項目をアニメーション化することです
変数templateListRef 我々は最後のステップで作成

import { AnimationController } from '@ionic/angular';

export class HomePage implements AfterViewInit {
  @ViewChildren('templateList', { read: ElementRef })
  templateListRef: QueryList<ElementRef>;

  constructor(private animationCtrl: AnimationController) {}

  ngAfterViewInit() {
    this.initListAnimation();
  }

  initListAnimation() {
    const itemRefArray = this.templateListRef.toArray();
    for (let i = 0; i < itemRefArray.length; i++) {
      const element = itemRefArray[i].nativeElement;

      this.animationCtrl
        .create()
        .addElement(element)
        .duration(1000)
        .delay(i * (1000 / 3))
        .easing('cubic-bezier(0.4, 0.0, 0.2, 1.0)')
        .fromTo('transform', 'translateY(50px)', 'translateY(0px)')
        .fromTo('opacity', '0', '1')
        .play();
    }
  }
}

ここでは、画面を最初に初期化するのを待つ必要があるだけで、我々は任意のビューの参照を取得することができますngAfterViewInit .
インinitListAnimation 関数を繰り返し実行しているtemplateListRef リスト内のすべての項目をアニメーション化する必要があるので
あなたはイオンアニメーションのドキュメントを読むことができますhere アニメーションのアイデアイオンイオンの作品を取得します.

最初にインポートする必要がありますAnimationController 要素をアニメーション化し、コンストラクタに定義します.

addElement(element) :- 我々がアニメーション化している要素を追加します.

duration(1000) :- アニメーションは、1000 ms(1秒)の期間で実行されます.

delay(i * (1000 / 3)) :- その後のアイテムのアニメーションは、すべてのアイテムが同時にアニメーション化されないように遅延されますが、後に1つ.

easing :- 効果を緩和アニメーションhere より良い理解のために.

fromTo 基本的に要素を適切に開始位置から終了位置までアニメーション化します.このようにGIFで上記の項目を参照することができますように垂直方向にゆっくりと変換しているので、ここで我々はアニメーションですtransform 以下の最初の50 pxから0 pxopacity 0から1まで.

play :- すべての指定されたプロパティでアニメーションを再生します.

そして、それは行われます、リストアニメーションは予想通り働きます.

Androidでフリッカの問題
あなたのことを知らないでください、しかし、Androidの上で、リストは以下のGIFで示されるように少しちらちらしていました

Googleでこの問題を検索する場合は、おそらく使用するように提案を見つけるでしょうtrackBy AShere and here 私たちはすべてのリストの項目を一意のIDを与えるが、いくつかの理由でそれは私のために修正されませんでした.
それで、私は回避策を考え出しなければなりませんでした.
ここでは、ページの500 msを適切に初期化するのを待ちます.
ホーム.ページ.TS

export class HomePage implements AfterViewInit {
  constructor(
    private animationCtrl: AnimationController,
    private platform: Platform // <- add this
  ) {}

  ngAfterViewInit() {
    // move 'initListAnimation' function inside timeout
    // As I faced this issue only on Android, we won't wait in case of iOS
    setTimeout(
      () => this.initListAnimation(),
      this.platform.is('android') ? 500 : 0
    );
  }
}

インホーム.ページ.HTMLを最初に与えるopacity: 0 リスト項目としてユーザーが待機中( 500 ms )に表示してはいけません

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col
        style="opacity: 0"   <- Add this
        size="6"
        *ngFor="let temp of templates;"
        #templateList
      >
        // same as above
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

これは問題を修正する必要があります.
より良い解決があるならば、してください.

結論
上記の手順に従ってアニメーションが期待通りに動作します.
この記事は私のオープンソースプロジェクトの一部ですIonic-UI-Templates , それで、完全なコードのためにそれをチェックしてください.このプロジェクトでは、イオンと6をランタイム環境として使用しています.
repo link :Ionic-UI-Templates
ビデオ
注-これはすべてのプラットフォームで私の初めての記事ですので、私は本当に記事を改善するための任意の提案を感謝します.また、文法的な間違いがたくさんありますので、無視してください.