Power Apps でのアニメーション作成方法を自分のメモも兼ねて纏めていこうと思います。
今回はポップアップウィンドの作成方法についてご紹介します。
選択ウィンドが表示されるやつ pic.twitter.com/bd2Jd3gKHy
— コルネ (@koruneko32767) 2020年4月12日
イメージのようにボタンが押されたらウィンドが表示されるアニメーションを作成します。
ポップアップウィンドの作成方法
まずはイベントのトリガーとなるボタンを作成します。
こちらの見た目はどのようなものでも構わないのですが、もしイメージのように丸型のボタンにしたい場合は、「幅」「高さ」「境界半径」を同じ値で揃えてください。
続いてポップアップウィンドのバックグラウンドを作成します。
「挿入」>「アイコン」より「四角形」を選択してください。
そして配置した四角形について以下のように設定します。
Rectangle1.X
0
Rectangle1.Y
0
Rectangle1.Width
Screen1.Width
Rectangle1.Height
Screen1.Height
Rectangle1.Fill
RGBA(116, 116, 116, 0.8)
これで半透明のグレーの四角形が画面いっぱいに表示されました。
続いてポップアップウィンドです。
こちらのポップアップウィンドは、「四角形」「ラベル」「ボタン(Yes)」「ボタン(No)」の4つのオブジェクトで構成されています。
まずはウィンドを作成します。
先ほどと同じ方法で「四角形」を作成してください。
サイズや色はお好きな値を設定してください。
こちらのウィンドは真ん中に配置したいので以下のように設定します。
Rectangle1.X
(Screen1.Width - Rectangle2.Width) / 2
Rectangle1.Y
(Screen1.Height - Rectangle2.Height) / 2
これでウィンドが真ん中に表示されました！
次に「挿入」>「ラベル」を選択して「ラベル」を作成してください。
お好みの文字の設定が完了したら、ラベルをウィンド内に配置します。
Label2.X
Rectangle2.X
Label2.Y
Rectangle2.Y
Label2.Width
Rectangle2.Width
最後にボタンを作成します。
「挿入」>「ボタン」を選択して「ボタン」を2つ作成してください。
ボタンのテキストには「Yes」「No」をそれぞれ設定してください。
ボタンの座標は以下のように設定します。
Button2.X
Rectangle2.X + (Rectangle2.Width - Button2.Width) / 2 - 100
Button2.Y
Label2.Y + Label2.Height + 50
Button2_1.X
Rectangle2.X + (Rectangle2.Width - Button2_1.Width) / 2 + 100
Button2_1.Y
Label2.Y + Label2.Height + 50
Xの"+ 100"やYの"+ 50"は調整値です。
簡単に説明すると、Xはウィンドの中心にボタンを設置し、それぞれ100だけ座標をずらしています。
Yはラベルの下に50だけ座標をずらして設定しています。
以上でポップアップででてくるウィンドの作成が完了しました。
最後にこのウィンドがボタンを押したときに表示され、閉じる(今回はNoボタン)を押したときに閉じるようにします。
Screen1のOnVisibleに以下の変数を設定します。
Screen1.OnVisible
UpdateContext({_showMenu:false})
この変数が"true"のときポップアップウィンドを表示、"false"のときポップアップウィンドを非表示に設定します。
最初に設定したボタンに以下の設定を行います。
Button1.OnSelect
UpdateContext({_showMenu:true})
続いてポップアップ表示されてほしいオブジェクトをShiftを押しながら選択します。
これで複数のオブジェクトが選択状態となっているかと思います。
これらのVisibleに以下を設定します。
Visible
_showMenu
これで選択したオブジェクトの"Visible"すべてに上記の設定が適用されます。
結構便利なので覚えておくといいかもです！
最後にNoのボタンに以下の設定をして完成です。
Button2_1.OnSelect
UpdateContext({_showMenu:false})
さいごに
このように簡単なアニメーションでも設定を行うと、アプリが少し華やかになります。
余力があり、少し凝ったものを作成したいという場合はアニメーションをつけてみるといいかもですね。
注意として、アニメーションを設定することで、パフォーマンスが著しく落ちてしまうなどが発生してしまうと本末転倒ですので、そちらに関しては気を付けてください。
