Skip to main content

 

 

 

 
Language:

 

 
モバイルアプリとリアクティブWebアプリにのみ適用されます
Service Studioバージョン :
 
 
OutSystems

Animate

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

Animate UIパターンの使用方法

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

    Animateウィジェットが表示されます。

  2. ツールボックスから、Animateウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

    デフォルトで、Animateウィジェットには[Content]プレースホルダが含まれています。

  3. アニメーション化するコンテンツを[Content]プレースホルダに追加します。

    この例では、Imageウィジェットを[Content]プレースホルダにドラッグし、[Properties]タブの[Image]ドップダウンで、OutSystems UIのサンプル画像から画像を選択して追加しています。

  4. Animateウィジェットを選択し、[Properties]タブで関連するプロパティを設定します。たとえば、画面でアニメーションを開始するときの場所や速さを設定します。

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

プロパティ

プロパティ 説明
AnimationType(AnimationType Identifier型): 必須 画面でアニメーションを開始するときの効果を設定します。

利用可能なオプションは以下のとおりです。

  • BottomToTop
  • Bounce
  • FadeIn
  • LeftToRight
  • RightToLeft
  • Scale
  • ScaleDown
  • Spinner
  • TopToBottom

  • Entities.AnimationType.BottomToTop - 画面の下から上へ表示されます。
  • Entities.AnimationType.Bounce - 画面上でバウンドします。
Delay(Integer型): オプション アニメーション開始前の待機時間(ミリ秒単位)。デフォルト値は0。
Speed(Speed Identifier型): オプション アニメーションの継続時間。事前定義されている使用可能なアニメーションの速度は、「速い」、「普通」、「遅い」です。
ExtendedClass(Text型): オプション Animate UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるAnimate UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるAnimate UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
  • Was this article helpful?