最近のアクセス:
ネイティブ モバイル アプリケーションと Angular アプリケーションにアニメーションを追加する方法

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

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

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

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

イメージ:37194.png

2. テーマにアニメーションクラスを作成する

テーマには「Animations」という名前のクラスカテゴリがあります。ナレッジベースに含める各アニメーションに新しいアニメーションクラスを定義して、 [ Type ] プロパティに "Lottie" と設定し、 [ File ] プロパティに Lottie JSON アニメーションを含むファイルオブジェクトを設定します。
イメージ:37195.png
クラスが作成されたら、アニメーションをアプリケーションに含める準備は完了です。

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

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

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

Animation View ユーザーコントロールを使用すると、アプリケーションのどの画面にもアニメーションを追加できます。このコントロールは、アニメーションの設定と、実行や進行の管理を行うメソッドを提供します。
イメージ:37188.png
Event ClientStart
   Composite
      AnimationView1.SetAnimation(ThemeClass:Birthday, true)
      AnimationView1.Play()
   EndComposite
Endevent

Event 'PauseAnimation'
   AnimationView1.Pause()
EndEvent

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

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

アニメーションを使用して、オブジェクトのフォームやグリッドのロード処理をカスタマイズできます。つまり、通常のロードで表示される円を、より洗練された Lottie アニメーションに置き換えることができます。
これを行うために、テーマの Form クラスと Grid クラスに Loading Animation Class という名前のプロパティがあります。このプロパティでは、テーマ内で Lottie ファイルで定義されたアニメーションクラスを使用してアニメーションを設定できます。
イメージ:37197.png
イメージ:37198.gif

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

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

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

アプリケーションの起動画面にアニメーションを使用できます。これは、Theme オブジェクトApplication クラスのプロパティで設定できます。
イメージ:37938.png


サブページ
Created: 18/10/29 01:07 by Admin Last update: 23/04/24 18:07 by Admin
カテゴリ
Powered by GXwiki 3.0