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

Animations

概要​

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

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

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

Installation​

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 Animations はplayメソッドが呼び出されるまで一時停止しています。

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

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

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

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

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

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

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

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

Before/After フック​

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

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

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

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

アニメーションは連鎖させて、次々に実行できます。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 の Animations インスペクターに表示され、デバッグが容易になります：

/**
 * .square要素のアニメーションは、
 * Chrome DevToolsで"my-animation-identifier"を表示する必要があります。
 */
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;
}

プロパティ​

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

メソッド​

Name説明
addAnimation(animationToAdd: Animation | Animation[]): Animation1 つ以上のアニメーションをグループ化して、親アニメーションによって制御します。
addElement(el: Element | Element[] | Node | Node[] | NodeList): Animationアニメーションに 1 つ以上の要素を追加します。
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アニメーションのイージングを設定します。受け入れられるイージング値のリストについては、Easing Effectsを参照してください。
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アニメーションの終了スタイルを設定します。

Contents

このページを編集