Power Apps でのアニメーション作成方法を自分のメモも兼ねて纏めていこうと思います。
前回はポップアップウィンドについて説明しました。
今回はハンバーガーメニューの作成方法についてご紹介します。
ハンバーガーメニュー pic.twitter.com/zW94PVmxp5
— コルネ (@koruneko32767) 2020年4月12日
イメージのようにボタンが押されたらメニューが表示されるアニメーションを作成します。
ハンバーガーメニューの作成方法
まずは、メニュー領域のバックグラウンドを作成します。
「挿入」>「アイコン」より「四角形」を選択してください。
こちらで配置された四角形は初期状態では画面外にいてほしいですね。
しかし、こちらのXに0未満の値を設定しても0になってしまいます。
もし、画面領域外にオブジェクトを配置したい場合は、別の数値を参照するようなつくりにしてください。
今回は変数を使用します。OnVisibleにて以下の宣言を行います。
Screen2.OnVisible
UpdateContext({_menuX:-Rectangle3.Width})
続いて四角形の設定は以下のように行います。
Rectangle3.X
0
Rectangle3.Y
0
Rectangle3.Width
250
Rectangle3.Height
Screen2.Height
Rectangle2.Fill
RGBA(0, 96, 255, 0.3)
これで四角形が画面外に配置されました!
こちらに表示されるメニューの選択肢はラベルを用いてお好きなテキストを設定してください。
注意として、こちらのラベルに設定する"X"は以下のようにしてください。
Label.X
Rectangle3.X
続いてハンバーガーのアイコンを設定します。
「挿入」>「アイコン」より「ハンバーガー メニュー」を選択します。
なお、このハンバーガーメニューには他のアイコンと同じくとくに特別なアクションは備わっていないのでこれから実装します。
設定値は以下の通りです。
Icon1.X
With({iconX:Rectangle3.X + Rectangle3.Width - Icon1.Width}, If(iconX <= 0, 0, iconX))
Icon1.Y
0
Icon1.Icon
If(!_menu, Icon.Hamburger, Icon.Cancel)
Xの式はメニューが表示されているときは、上記で設定したバックグラウンドの内側にアイコンが表示されるようにし、メニューが表示されていないときは0に設定されるように制御しております。
こちらのアイコンの選択によってメニューを表示したり非表示にしたりしたいと思います。
OnVisibleに以下の宣言を追加します。
Screen2.OnVisible
UpdateContext({_menu:false});
アイコンが押されたときの設定は以下のようにします。
Icon1.OnSelect
UpdateContext({_menu:!_menu}); If(_menu, UpdateContext({_menuX:_menuX + Rectangle3.Width / 10}), UpdateContext({_menuX:_menuX - Rectangle3.Width / 10}));
2行目のif文はスライダーのOnChangeを起動させるための式です。
ということでスライダーを設定します。
スライダーの設定は以下の通りです。
Slider1.Default
_menuX
Slider1.OnChange
If(_menu && (_menuX + Rectangle3.Width / 10 <= 0),UpdateContext({_menuX:_menuX + Rectangle3.Width / 10})); If(!_menu && (_menuX - Rectangle3.Width / 10 >= -Rectangle3.Width),UpdateContext({_menuX:_menuX - Rectangle3.Width / 10}));
なにをしているか簡単に説明します。
まず、アイコンが押されたときに"menu"でメニューが表示されようとしているのか?非表示にしようとしているのか判定しています。
表示しようとしている場合は"menuX"の値が0まで増加するので上のif文が実行されます。
反対に非表示にしようとしている場合は、0 - バックグラウンドの幅の分だけ減少するので下のif文が実行されます。
&&以降の制御がないと、永遠に値が変化し続けるのでご注意ください!
以上でハンバーガーメニューの作成方法は完了です。
お疲れさまでした!!!