Power Apps でのアニメーション作成方法を自分のメモも兼ねて纏めていこうと思います。
前回はハンバーガーメニューについて説明しました。
今回はサークルメニューの作成方法についてご紹介します。
昨日のサークルメニュー違和感あったので修正 pic.twitter.com/BwB8WWv1Rv
— コルネ (@koruneko32767) 2020年4月13日
イメージのようにボタンが押されたらメニューがサークル状に表示されるアニメーションを作成します。
サークルメニューの作成方法
まずはこれまで同様メニューアイコンを作成します。
「挿入」>「アイコン」より「ハンバーガー メニュー」を選択してください。
また、これまで同様メニュー表示中かを判定する変数と、位置を格納する変数を宣言します。
Screen3.OnVisible
UpdateContext({_circleMenu:false});
UpdateContext({_rad:0})
こちらの変数を先ほど設定したメニューアイコンが押されたときに変更するようにしてあげましょう！
MenuIcon.OnSelect
UpdateContext({_circleMenu:!_circleMenu});
If(!_circleMenu, UpdateContext({_rad:_rad - 10}), UpdateContext({_rad:_rad + 10}));
MenuIcon.Icon
If(!_circleMenu, Icon.Hamburger, Icon.Cancel)
MenuIcon.Color
If(!_circleMenu, RGBA(0, 18, 107, 1), RGBA(255, 0, 0, 1))
MenuIcon.Fill
RGBA(255, 255, 255, 1)
これでメニューアイコンが押されたとき、アイコンの表示が切り替わる設定ができました。
続いて、サークル状に表示されるメニューの作成です。
今回の例ではアイコンを8つ設定していますので、お好きなアイコンを8つキャンバス上に追加してください。
これらのアイコンのX成分、Y成分を制御してサークル状にアイコンが展開されているようなアニメーションを作成するわけですが、皆さんは等速円運動の運動方程式を覚えていますか？
結論からいいますと、物体がXY平面上で原点Oを中心とする半径rの円運動を行うとします。
このとき物体の位置を点Pとした時の、X軸とOPのなす角をθとすれば、物体のX、Y座標は、
X = r * cosθ
Y = r * sinθ
となります。
詳しい導出方法が気になる方は各自調べてください。
この式をアイコンのX、Yに当てはめていきます。
適当なアイコンのX、Yに下記式を設定してみて下さい。
Icon1.X
MenuIcon.X - 150 * Cos(_rad * Pi() / 180)
Icon1.Y
MenuIcon.Y - 150 * Sin(_rad * Pi() / 180)
この式により式を設定したアイコンが、メニューアイコンを中心に半径150だけ距離をとって回転します。
2020/04/22 追記
メニューアイコンを中心にしている個所はMenuIcon.X、MenuIcon.Yになります。
"Pi() / 180"はSin()およびCos()がdegreeではなくradianで計算されるためこのようにしています。(記事書いてて気づきましたが、変数名"rad"じゃなくって"deg"がただしいですね！すいません)
_radの値を変更させるための仕掛けを設定しましょう。
「挿入」>「入力」より「スライダー」を追加します。
追加したスライダーは以下のように設定してください。
Slider.Default
_rad
Slider.OnChange
If(_circleMenu && (_rad + 10 <= 360),UpdateContext({_rad:_rad + 10}));
If(!_circleMenu && (_rad - 10 >= 0),UpdateContext({_rad:_rad - 10}));
前回のハンバーガーメニューで使用したスライダーと同じような使い方ですね。
変数_radは0 ~ 360の間で遷移させたいためこのような式となっております。
ここまで設定が完了したら、一度アニメーションを動かしてみましょう！
設定が正しければ、メニューアイコンを中心にアイコンが回転を行っているかと思います。
続いて、アイコンがメニューの表示に合わせて収納されるようなアニメーションを作成します。
これは、半径(r)の箇所を調整すればいいですね。
X、Yの半径(150)の箇所を以下に置き換えます。
If(_rad >= 150, 150, _rad)
これでradが150以下のときは、radの数値が使用され、それより大きいときは150の固定値が使用されます。
(メニューアイコンは最前面に来るように設定しておいてください。)
次にそれぞれのアイコンが指定した位置で止まるようにしましょう。
これは、三角関数の箇所を調整すればいいですね。
先ほどの半径のときと同様に、ある数値が来たら固定値とするようなやり方を用いたいと思います。
今回その数値には角度(θ)を利用したいと思います。
例えばイメージの例でいうと、ホームアイコンは回転させる必要がないため、角度0度でとめればいいですね。そして、設定アイコンは45度(360 / 8)で、グッド/バッドアイコンは90度(360 / 8 * 2)でとめればいいですね。
以上を踏まえて式に適応していきましょう。
Icon1.X
MenuIcon.X - If(_rad >= 150, 150, _rad) * If(_rad < 0, Cos(_rad * Pi() / 180), Cos(0 * Pi() / 180))
Icon1.Y
MenuIcon.Y - If(_rad >= 150, 150, _rad) * If(_rad < 0, Sin(_rad * Pi() / 180), Sin(0 * Pi() / 180))
Icon2.X
MenuIcon.X - If(_rad >= 150, 150, _rad) * If(_rad < 45, Cos(_rad * Pi() / 180), Cos(45 * Pi() / 180))
Icon2.Y
MenuIcon.Y - If(_rad >= 150, 150, _rad) * If(_rad < 45, Sin(_rad * Pi() / 180), Sin(45 * Pi() / 180))
Icon3.X
MenuIcon.X - If(_rad >= 150, 150, _rad) * If(_rad < 90, Cos(_rad * Pi() / 180), Cos(90 * Pi() / 180))
Icon3.Y
MenuIcon.Y - If(_rad >= 150, 150, _rad) * If(_rad < 90, Sin(_rad * Pi() / 180), Sin(90 * Pi() / 180))
これらを残り全てのアイコンに適応します。
以上で、サークルメニューの作成は完了です！
わかりにくかった箇所などありましたらコメントやTwitterまでお気軽にお尋ねください！！
