コルネの進捗や備忘録が記されたなにか

進捗や成果物や備忘録てきななにかを雑に更新していきます。

Power Apps で画面にアニメーションをつける~その2~


スポンサードリンク

Power Apps でのアニメーション作成方法を自分のメモも兼ねて纏めていこうと思います。
前回はポップアップウィンドについて説明しました。

今回はハンバーガーメニューの作成方法についてご紹介します。


イメージのようにボタンが押されたらメニューが表示されるアニメーションを作成します。

ハンバーガーメニューの作成方法

まずは、メニュー領域のバックグラウンドを作成します。
「挿入」>「アイコン」より「四角形」を選択してください。
こちらで配置された四角形は初期状態では画面外にいてほしいですね。
しかし、こちらの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文が実行されます。

&&以降の制御がないと、永遠に値が変化し続けるのでご注意ください!

以上でハンバーガーメニューの作成方法は完了です。
お疲れさまでした!!!


スポンサードリンク