Community

従来のWebアプリにのみ適用されます

Animate

Last updated
Save as PDF

この記事は作成中です。この新しいバージョンはどの程度参考になりましたか。投票でお聞かせください。

Animate UIパターンを使用すると、アプリ内にアニメーションを作成することができます。このUIパターンは、画面に表示される要素を強調し、アプリを全体的に使いやすくするために使用することができます。

Animate UIパターンの使用方法

Service StudioのツールボックスでAnimateを検索します。

Animateウィジェットが表示されます。
ツールボックスから、Animateウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。
アニメーション化するコンテンツをAnimateウィジェットに追加します。

この例では、ImageウィジェットをAnimateウィジェットにドラッグし、OutSystems UIのサンプル画像から画像を選択して追加しています。
Animateウィジェットを選択し、［Properties］タブで関連するプロパティを設定します。たとえば、アニメーションが画面に出入りするときの場所や速さを設定します。

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

プロパティ

プロパティ	説明
EnterAnimation（EnterAnimation Identifier型）: オプション	画面でアニメーションを開始するときの効果を設定します。 EnterBottom EnterFade（デフォルト） EnterLeft EnterRight EnterScale EnterTop 例 Entities.EnterAnimation.EnterLeft - 画面の左から表示されます。 Entities.EnterAnimation.EnterTop - 画面の上から表示されます。
LeaveAnimation（LeaveAnimation Identifier型）:オプション	画面でアニメーションを終了するときの効果を設定します。以下のオプションが事前定義されています。 LeaveBottom LeaveFade（デフォルト） LeaveLeft LeaveRight LeaveScale LeaveTop 例 Entities.LeaveAnimation.LeaveBottom - 画面の下から消えます。 Entities.LeaveAnimation.LeaveRight - 画面の右から消えます。
Speed（Speed Identifier型）:オプション	アニメーションの継続時間。事前定義されている使用可能なアニメーションの速度は、速い、普通、遅いです。
Delay（Integer型）:オプション	アニメーション開始前の待機時間（ミリ秒単位）。デフォルト値は0。
ExtendedClass（Text型）:オプション	Animate UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。例空白 - カスタムスタイルを追加しません（デフォルト値）。 "myclass" - 適用されるAnimate UIのスタイルに_myclass_というスタイルを追加します。 "myclass1" "myclass2" - 適用されるAnimate UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。