APIの説明・サンプル（アニメーションダイアログ）

Caede3.0.0で追加されたアニメーションダイアログのサンプルをご紹介します。

アニメーションダイアログ

Caede3.0で横から、上から、下からスライドして表示されるアニメーションダイアログが追加されました。
モバイルアプリでよく見かけるボタンを押すと左からにゅうっとスライドして出てくるメニューのようなダイアログです。
表示させる場所も上から下から右から左からと任意の場所に表示させることが可能です。

以下のようにして使用できます。
代表的なオプションを指定してあります。

let sid:TransitionDialog =                     {TransitionDialog                         geometry =                             {DialogGeometrySpec                                 ||このダイアログをどこに表示するか指定します                                 ||以下の場合、左から表示されます                                 align-left? = true,                                 align-right? = false,                                 align-top? = false,                                 align-bottom? = false                             },                         ||表示時のアニメーションを指定します                         show-transition =                             {StandardTransitionAnimationSpec                                 ||アニメーションの表示時間                                 transition-duration = 0.5s,                                 ||回転させながら表示させます                                 rotation = 0deg                             },                         ||ダイアログの透明度                         opacity = 100%,                         ||ダイアログが表示されているときの背景の透明度                         cover-opacity = 0%,                         ||ダイアログが表示されているときの背景色                         cover-color = "black",                         ||ダイアログを表示する親オブジェクト                         ||このオブジェクト上に表示されます                         parent-object = ui-holder                     }

以下のようにしてアニメーションダイアログに表示するオブジェクトを追加します。

{sid.add         {ScrollBox             hscroll? = false,             background = "#e9eaed",             {VBox                  width = 200px,                 margin = 10px,                  spacing = 5px,                 background = "#e9eaed",                                  {Fill height = 5px},                                  {CommandButton                     style = "label-only",                     height = 40px,                     width = {make-elastic},                     label = {TextFlowBox                                      color = "#333333",                                     "ゲーム"                               },                     {on Action do                         {sid.close}                                              }                 },                 {CommandButton                     style = "label-only",                     height = 40px,                     width = {make-elastic},                     label = {TextFlowBox                                      color = "#333333",                                     "音楽"                               },                     {on Action do                         {sid.close}                                              }                 }             }         } }

このように左側にダイアログを表示することができます。

指定したアニメーションを行いながら”にゅう”っと表示されます。
また、今回ご紹介したオプションだけでなく多くのオプションも用意されていますので
お好みのアニメーションをさせながら表示することが可能です。