Power Apps でのアニメーション作成方法を自分のメモも兼ねて纏めていこうと思います。
前回はロード画面などで使える跳ねる文字の作成方法について説明しました。
今回はｽｯっと現れるポップアップの作成方法についてご紹介します。
ｽｯて現れる文字 pic.twitter.com/oHvYtcmva5
— コルネ (@koruneko32767) 2020年4月13日
イメージのようにｽｯっと現れるポップアップのアニメーションを作成します。
ｽｯっと現れるポップアップの作成方法
まずはポップアップ表示用の変数を用意します。
Screen.Onvisible
UpdateContext({_showPopUp:false});
UpdateContext({_showPopUpNum:0})
続いてポップアップ表示のトリガーとなるボタンを配置します。
このボタンのが押されたときにポップアップ表示としたいので、以下のように設定します。
Button.Onselect
UpdateContext({_showPopUp:true});
UpdateContext({_showPopUpNum:_showPopUpNum + 1})
ポップアップを用意します。
イメージのようなポップアップは
- 四角形
- ラベル
- キャンセルアイコン
で構成されています。
なので上記3つのオブジェクトを配置してください。
最後にポップアップの表示座標を制御するためのスライダーを配置します。
これらが今回使用するオブジェクトです。
あとは式を設定してアニメーションを作成します。
まずはポップアップの座標の設定を行います。
先ほど配置した「四角形(Rectangle)」のYに以下の式を設定します。
Rectangle.Y
(Screen.Height - Self.Height) / 2 + ((Slider.Max - _showPopUpNum) / Slider.Max) * 30
式の解説です。
(Screen.Height - Self.Height) / 2
こちらではスクリーンの中央に四角形を設定しています。
((Slider.Max - _showPopUpNum) / Slider.Max) * 30
こちらでは” _showPopUpNum”の値により座標が変化するようにしています。
ラベルとキャンセルアイコンの座標ですが、これらは四角形の座標を参照するように設定してあげましょう！
Label.Y
Rectangle.Y + (Rectangle.Height- Label.Height) / 2
この設定により、ラベルは常に四角形の中心に配置されるようになります。
Icon.X
Rectangle.X + Rectangle.Width - Icon.Width
Icon.Y
Rectangle.Y
この設定によりキャンセルアイコンは常に四角形の右上隅に配置されるようになります。
こちらのキャンセルアイコンが押されたときはポップアップを閉じるようにしましょう！
Icon.OnSelect
UpdateContext({_showPopUp:false});
UpdateContext({_showPopUpNum:_showPopUpNum - 1})
最初に設定したボタンと反対(?)の設定ですね。
続いてこれらのポップアップの表示設定(Visible)ですが、"_showPopUp"を設定するとどうなるでしょうか。。。？
・・・
Visibleに"_showPopUpNum"を設定してしまうとキャンセルボタンを押したときにすぐにポップアップが見えなくなってしまいます。
今回ポップアップは徐々に表示され、また徐々に消えてほしいです。
なので以下のように設定しましょう。
Visible
_showPopUpNum > 0
これによりｽｯと現れ、ｽｯっと消えるポップアップを実現するためのVisibleの設定は完了です。
ただこのままではｽｯって現れる感じではないですね。
ｽｯって現れる感じを実現するためにはColorやFillなどのアルファ(Alpha)値を制御しましょう。
アルファ(Alpha)値とは色を設定している関数、
RGBA(Red, Green, Blue, Alpha)
のAlphaの箇所のことです。
アルファ値とは透明度を表す数値のことです。
Power Apps ではこのアルファ値は0~1の値を設定します。
なので以下のようにアルファ値を設定します。
_showPopUpNum / Slider3.Max
最後に" _showPopUpNum"の値を制御しているスライダーの設定です。
スライダーには以下の式を設定しています。
Slider.Default
_showPopUpNum
Sleder.Max
50
Slider.Min
0
Slider.OnChange
If(_showPopUp && _showPopUpNum + 1 <= Slider.Max, UpdateContext({_showPopUpNum:_showPopUpNum + 1}));
If(!_showPopUp && _showPopUpNum - 1 >= Slider.Min, UpdateContext({_showPopUpNum:_showPopUpNum - 1}))
この設定により、"_showPopUpNum”はスライダーのMinからMaxに設定した範囲の値をとることになります。
以上でポップアップのアニメーションの作成は完了です！！！
これまでのアニメーション作成と同じような感じでしたね。
