メインコンテンツへスキップ
バージョン: v8

アニメーション

概要​

Ionic Animationsは、特定のフレームワークやIonicアプリを必要とせず、プラットフォームに依存しない方法で複雑なアニメーションを作成できるツールです。

効率的なアニメーションを作成することは、開発者が利用可能なライブラリやデバイスのハードウェアリソースによって制限されるため、難しい場合があります。さらに、多くのアニメーションライブラリはJavaScript駆動のアプローチを使用しており、アニメーションのスケーラビリティを低下させ、CPU時間を使用する可能性があります。

一方、Ionic AnimationsはWeb Animations APIを使用しており、アニメーションのすべての計算と実行をブラウザにオフロードします。このアプローチにより、ブラウザはアニメーションを最適化し、スムーズな実行を保証できます。Web Animationsがサポートされていない場合、Ionic AnimationsはCSS Animationsにフォールバックしますが、パフォーマンスにほとんど差はないはずです。

インストール​

Ionic CoreとJavaScriptを使用する開発者は、最新バージョンの@ionic/coreをインストールする必要があります。

import { createAnimation } from 'https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/esm/index.mjs';

...

const animation = createAnimation()
  .addElement(myElementRef)
  .duration(1000)
  .fromTo('opacity', '1', '0.5');
}

基本アニメーション​

以下の例では、ion-card要素の不透明度を変更し、X軸に沿って左から右に移動するアニメーションが作成されています。このアニメーションは無限に実行され、アニメーションの各反復は1500ms続きます。

デフォルトでは、すべてのIonicアニメーションは、playメソッドが呼び出されるまで一時停止します。

キーフレームアニメーション​

Ionic Animationsを使用すると、キーフレームを使用してアニメーションの中間ステップを制御できます。有効なCSSプロパティをここで使用でき、CSS変数を値として使用することもできます。

ハイフン付きのCSSプロパティは、キーフレームを作成するときにキャメルケースを使用して記述する必要があります。たとえば、border-radiusはborderRadiusとして記述する必要があります。これは、fromTo()、from()、およびto()メソッドにも適用されます。

上記の例では、カード要素は初期幅から--width変数で定義された幅に遷移し、次に最終幅に遷移します。

各キーフレームオブジェクトには、offsetプロパティが含まれています。offsetは、キーフレームステップを定義する0〜1の値です。オフセット値は昇順で並べられ、繰り返すことはできません。

グループ化されたアニメーション​

複数の要素を同時にアニメーション化し、単一の親アニメーションオブジェクトを介して制御できます。子アニメーションは、特に指定がない限り、期間、イージング、反復などのプロパティを継承します。すべての子アニメーションが完了するまで、親アニメーションのonFinishコールバックは呼び出されません。

この例は、単一の親アニメーションによって制御される3つの子アニメーションを示しています。アニメーションcardAとcardBは親アニメーションの期間2000msを継承しますが、アニメーションcardCは明示的に設定されているため、期間は5000msです。

アニメーションの前後のフック​

Ionic Animationsは、アニメーションの実行前および完了後に要素を変更できるフックを提供します。これらのフックを使用して、DOMの読み取りと書き込みを実行したり、クラスやインラインスタイルを追加または削除したりできます。

この例では、アニメーションの開始前にカードの背景色を75%反転するインラインフィルターを設定します。アニメーションが終了すると、要素のボックスシャドウがrgba(255, 0, 50, 0.4) 0px 4px 16px 6px（赤い光彩）に設定され、インラインフィルターがクリアされます。ボックスシャドウを削除し、フィルターを使用して再度再生するには、アニメーションを停止する必要があります。

フックの完全なリストについては、メソッドを参照してください。

チェーンされたアニメーション​

アニメーションをチェーンして、次々と実行できます。playメソッドは、アニメーションが完了したときに解決されるPromiseを返します。

ジェスチャーアニメーション​

Ionic Animationsを使用すると、Ionic Gesturesとシームレスに統合することで、強力なジェスチャーベースのアニメーションを作成できます。

次の例では、カード要素をドラッグできるトラックを作成しています。animationオブジェクトはカード要素を左右のどちらかに移動し、gestureオブジェクトはanimationオブジェクトにどの方向に移動するかを指示します。

ユーザー設定ベースのアニメーション​

開発者は、CSS変数を使用して、prefers-reduced-motionやprefers-color-schemeなどのユーザー設定に合わせてアニメーションを調整することもできます。

このメソッドは、アニメーションを初めて作成するときに、サポートされているすべてのブラウザで機能します。ほとんどのブラウザは、CSS変数が変化すると、キーフレームアニメーションを動的に更新することもできます。

Safariは現在、キーフレームアニメーションの動的な更新をサポートしていません。Safariでこの種のサポートが必要な開発者は、MediaQueryList.addListener()を使用できます。

Ionicコンポーネントアニメーションの上書き​

特定のIonicコンポーネントでは、開発者がカスタムアニメーションを提供できます。すべてのアニメーションは、コンポーネントのプロパティとして提供されるか、グローバル設定で設定されます。

モーダル​

パフォーマンスに関する考慮事項​

CSSとWeb Animationsは、通常、コンポジターのスレッドで処理されます。これは、レイアウト、ペイント、スタイル、およびJavaScriptが実行されるメインスレッドとは異なります。最適なアニメーションパフォーマンスを得るためには、コンポジターのスレッドで処理できるプロパティを使用することをお勧めします。

heightやwidthなどのプロパティをアニメーション化すると、追加のレイアウトとペイントが発生し、ジャンクが発生してアニメーションのパフォーマンスが低下する可能性があります。一方、transformやopacityなどのプロパティのアニメーション化はブラウザによって高度に最適化でき、通常はジャンクをあまり発生させません。

どの CSS プロパティがレイアウトやペイントを引き起こすかについての情報は、CSS Triggers を参照してください。

デバッグ​

Chrome でアニメーションをデバッグするには、Chrome DevTools を使用したアニメーションの検査に関する素晴らしいブログ記事があります: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations。

アニメーションには一意の識別子を割り当てることも推奨されています。これらの識別子は Chrome のアニメーションインスペクターに表示され、デバッグが容易になるはずです。

/**
 * The animation for the .square element should
 * show "my-animation-identifier" in Chrome DevTools.
 */
const animation = createAnimation('my-animation-identifier')
  .addElement(document.querySelector('.square'))
  .duration(1000)
  .fromTo('opacity', '1', '0');

API​

このセクションでは、Animation クラスで使用できるすべてのメソッドとプロパティのリストを提供します。

インターフェース​

AnimationDirection​

type AnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';

AnimationFill​

type AnimationFill = 'auto' | 'none' | 'forwards' | 'backwards' | 'both';

AnimationBuilder​

type AnimationBuilder = (baseEl: any, opts?: any) => Animation;
注

opts は、カスタムアニメーションに固有の追加オプションです。たとえば、シートモーダルのエンターアニメーションには、現在のブレークポイントの情報が含まれています。

AnimationCallbackOptions​

interface AnimationCallbackOptions {
  /**
   * If true, the associated callback will only be fired once.
   */
  oneTimeCallback: boolean;
}

AnimationPlayOptions​

interface AnimationPlayOptions {
  /**
   * If true, the animation will play synchronously.
   * This is the equivalent of running the animation
   * with a duration of 0ms.
   */
  sync: boolean;
}

プロパティ​

名前説明
childAnimations: Animation[]特定の親アニメーションのすべての子アニメーション。
elements: HTMLElement[]アニメーションにアタッチされたすべての要素。
parentAnimation?: Animation特定のアニメーションオブジェクトの親アニメーション。

メソッド​

名前説明
addAnimation(animationToAdd: Animation | Animation[]): Animation1 つまたは複数のアニメーションをグループ化して、親アニメーションによって制御されるようにします。
addElement(el: Element | Element[] | Node | Node[] | NodeList): Animation1 つまたは複数の要素をアニメーションに追加します。
afterAddClass(className: string | string[]): Animationアニメーション終了後、アニメーション内のすべての要素に追加されるクラスまたはクラスの配列を追加します。
afterAddRead(readFn: (): void): Animationアニメーション終了後に実行される DOM 読み取りを実行する関数を追加します。
afterAddWrite(writeFn: (): void): Animationアニメーション終了後に実行される DOM 書き込みを実行する関数を追加します。
afterClearStyles(propertyNames: string[]): Animationアニメーション終了後、アニメーション内のすべての要素のインラインスタイルからクリアされるプロパティ名の配列を追加します。
afterRemoveClass(className: string | string[]): Animationアニメーション終了後、アニメーション内のすべての要素から削除されるクラスまたはクラスの配列を追加します。
afterStyles(styles: { [property: string]: any }): Animationアニメーション終了後、アニメーション内のすべての要素に適用されるスタイルのオブジェクトを追加します。
beforeAddClass(className: string | string[]): Animationアニメーション開始前、アニメーション内のすべての要素に追加されるクラスまたはクラスの配列を追加します。
beforeAddRead(readFn: (): void): Animationアニメーション開始前に実行される DOM 読み取りを実行する関数を追加します。
beforeAddWrite(writeFn: (): void): Animationアニメーション開始前に実行される DOM 書き込みを実行する関数を追加します。
beforeClearStyles(propertyNames: string[]): Animationアニメーション開始前、アニメーション内のすべての要素のインラインスタイルからクリアされるプロパティ名の配列を追加します。
beforeRemoveClass(className: string | string[]): Animationアニメーション開始前、アニメーション内のすべての要素から削除されるクラスまたはクラスの配列を追加します。
beforeStyles(styles: { [property: string]: any }): Animationアニメーション開始前、アニメーション内のすべての要素に適用されるスタイルのオブジェクトを追加します。
direction(direction?: AnimationDirection): Animationアニメーションの再生方向を設定します。
delay(delay?: number): Animationアニメーションの開始遅延をミリ秒単位で設定します。
destroy(clearStyleSheets?: boolean): Animationアニメーションを破棄し、すべての要素、子アニメーション、およびキーフレームをクリアします。
duration(duration?: number): Animationアニメーションの期間をミリ秒単位で設定します。
easing(easing?: string): Animationアニメーションのイージングをミリ秒単位で設定します。受け入れられるイージング値の一覧については、イージング効果を参照してください。
from(property: string, value: any): Animationアニメーションの開始スタイルを設定します。
fromTo(property: string, fromValue: any, toValue: any): Animationアニメーションの開始スタイルと終了スタイルを設定します。
fill(fill?: AnimationFill): Animationアニメーションの実行前と実行後に、アニメーションがどのように要素にスタイルを適用するかを設定します。
iterations(iterations: number): Animationアニメーションサイクルが停止するまでに再生される回数を設定します。
keyframes(keyframes: any[]): Animationアニメーションのキーフレームを設定します。
onFinish(callback: (didComplete: boolean, animation: Animation): void, opts?: AnimationCallbackOptions): Animationアニメーションの終了時に実行されるコールバックを追加します。
pause(): Animationアニメーションを一時停止します。
play(opts?: AnimationPlayOptions): Promise<void>アニメーションを再生します。
progressEnd(playTo?: 0 | 1, step: number, dur?: number): Animationアニメーションのシークを停止します。
progressStart(forceLinearEasing?: boolean, step?: number): Animationアニメーションのシークを開始します。
progressStep(step: number): Animationアニメーションをシークします。
stop(): Animationアニメーションを停止し、すべての要素を初期状態にリセットします。
to(property: string, value: any): Animationアニメーションの終了スタイルを設定します。

目次

このページを編集