GeneXus では、アプリケーションの開発時に、アニメーション (具体的には Lottie アニメーション) を統合できます。
Lottie は Airbnb が作成したアニメーションライブラリです。柔軟性に優れたこのライブラリを利用して、あらゆる種類のアニメーションを作成できます。小さなファイルを使用し、JSON API を提供することで、アニメーションをモバイルアプリケーションに統合できるようにしています。これらの JSON ファイルを使用して、アニメーションを GeneXus のナレッジベースに含めることができます。Lottie JSON 形式のファイルにエクスポートする機能は、多くのソフトウェア デザイン ツールで提供されています。また、JSON ファイルの多数のアニメーションをダウンロードできるアニメーションリポジトリ (Lottie ファイルなど) もいくつかあります。

ナレッジベースにアニメーションを追加する手順

ナレッジベースにアニメーションを追加するには、次の 2 つを行う必要があります:

1. Lottie JSON ファイルを File オブジェクトとしてナレッジベースに追加する

File オブジェクトを作成するには、GeneXus のメインメニューから以下の順に選択します: [ ファイル ] > [ 新規 ] > [ オブジェクト ] 。新規オブジェクトダイアログが表示されます。リストから File オブジェクトを選択します。

2. Design System オブジェクトでアニメーションクラスを作成する

Design System オブジェクトでは、クラスを作成してアプリケーションにアニメーションを追加することができます。 
たとえば、Animation タイプを設定した “Animation” という名のクラス。この場合は Lottie アニメーションタイプです。

.Animation
{
    gx-animation-type: idLottie;
}

.LoadingAnimation
{
    @include Animation;
    gx-lottie-file: gx-file(LottieAnimationLoading);
}

さらに、“Animation“ クラスを含み、アプリケーションに追加する jsonFile を宣言する “LoadingAnimation” クラスがあります。
デザインシステムのクラスが作成されたら、アニメーションをアプリケーションに含める準備は完了です。

アニメーションをアプリケーションに追加する

アニメーションをナレッジベースに追加したら、それらをアプリケーションに統合できます。統合方法は 4 つあります:

1.Animation View ユーザーコントロール

Animation View ユーザーコントロールを使用すると、アプリケーションのどの画面にもアニメーションを追加できます。このコントロールは、アニメーションの設定と、実行や進行の管理を行うメソッドを提供します。

Event ClientStart
   Composite
      AnimationView1.SetAnimation("LoadingAnimation", true)
      AnimationView1.Play()
   EndComposite
Endevent

Event 'PauseAnimation'
   AnimationView1.Pause()
EndEvent

Event 'SetProgress'
   Composite
      &Progress = 0.5
      AnimationView1.SetProgress(&Progress)
   EndComposite
EndEvent

2. フォームとグリッドのロード処理のカスタマイズ

アニメーションを使用して、オブジェクトのフォームやグリッドのロード処理をカスタマイズできます。つまり、通常のロードで表示される円を、より洗練された Lottie アニメーションに置き換えることができます。
これを行うには、Design System オブジェクトの [ Styles ] エレメントに設定できる、gx-loading-animation-class というプロパティがあります。
定義は次のようになります:

.Form

{
      gx-enter-effect: gx_default;
      gx-close-effect: gx_default;
      gx-call-type: gx_default;
      gx-target-size: gx_default;
      gx-target-width: 100%;
      gx-target-height: 100%;
      gx-content-size-change: gx_default;
      gx-input-view-appearance: gx_default;
      gx-loading-animation-class: Animation;
      gx-loading-animation-behavior: platform_default;
}

3. プログレス インジケータ コントロールのカスタマイズ

アニメーションを使用してプログレス インジケータ ユーザー コントロールをカスタマイズできます。そのためには、Progress テーマクラスを作成して、Animation タイプのクラス名をこのクラスの [ Animation Class ] プロパティに設定します。指定したアニメーションは、プログレス インジケータ ユーザー コントロールが表示されるときに表示されます。

4. 起動画面のカスタマイズ

アプリケーションの起動画面にアニメーションを使用できます。これは、Design System オブジェクトの [ Styles ] エレメントで設定できます。

.Application

{
     gx-background-image-mode: stretch;
     gx-image-loading-indicator: False;
     gx-launch-screen-animation-class: Animation;
}