Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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

 

 

OutSystems

Animate

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

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

Animate UIパターンの使用方法

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

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

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

  3. アニメーション化するコンテンツをAnimateウィジェットに追加します。

    この例では、ImageウィジェットをAnimateウィジェットにドラッグし、OutSystems UIのサンプル画像から画像を選択して追加しています。

  4. 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_というスタイルを追加します。
  • Was this article helpful?