GeneXus では、アプリケーションの開発時に、アニメーション (具体的には Lottie アニメーション) を統合できます。
Lottie は Airbnb が作成したアニメーションライブラリです。柔軟性に優れたこのライブラリを利用して、あらゆる種類のアニメーションを作成できます。小さなファイルを使用し、JSON API を提供することで、アニメーションをモバイルアプリケーションに統合できるようにしています。これらの JSON ファイルを使用して、アニメーションを GeneXus のナレッジベースに含めることができます。
Lottie JSON 形式のファイルにエクスポートする機能は、多くのソフトウェア デザイン ツールで提供されています。また、JSON ファイルの多数のアニメーションをダウンロードできるアニメーションリポジトリ (
Lottie ファイルなど) もいくつかあります。
ナレッジベースにアニメーションを追加するには、次の 2 つを行う必要があります:
File オブジェクトを作成するには、GeneXus のメインメニューから以下の順に選択します: [ ファイル ] > [ 新規 ] > [ オブジェクト ] 。
新規オブジェクトダイアログが表示されます。リストから File オブジェクトを選択します。
Design System オブジェクトでは、クラスを作成してアプリケーションにアニメーションを追加することができます。
たとえば、Animation タイプを設定した “Animation” という名のクラス。この場合は Lottie アニメーションタイプです。
.Animation
{
gx-animation-type: idLottie;
}
.LoadingAnimation
{
@include Animation;
gx-lottie-file: gx-file(LottieAnimationLoading);
}
さらに、“Animation“ クラスを含み、アプリケーションに追加する jsonFile を宣言する “LoadingAnimation” クラスがあります。
デザインシステムのクラスが作成されたら、アニメーションをアプリケーションに含める準備は完了です。
アニメーションをナレッジベースに追加したら、それらをアプリケーションに統合できます。統合方法は 4 つあります:
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
アニメーションを使用して、オブジェクトのフォームやグリッドのロード処理をカスタマイズできます。つまり、通常のロードで表示される円を、より洗練された 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;
}
アニメーションを使用して
プログレス インジケータ ユーザー コントロールをカスタマイズできます。そのためには、
Progress テーマクラスを作成して、Animation タイプのクラス名をこのクラスの
[ Animation Class ] プロパティに設定します。指定したアニメーションは、
プログレス インジケータ ユーザー コントロールが表示されるときに表示されます。
アプリケーションの起動画面にアニメーションを使用できます。これは、Design System オブジェクトの [ Styles ] エレメントで設定できます。
.Application
{
gx-background-image-mode: stretch;
gx-image-loading-indicator: False;
gx-launch-screen-animation-class: Animation;
}