はじめに
Qiita Engineer Festa 2024 の記事投稿キャンペーンもあとわずかですね。
ネタに悩むところです。
とりあえず思いついたので、Power Appsで飛行機🛫をクルクルまわしたいと思います。🛬
動画はTwitterを参照してください🛫🛬
Qiitaの記事ネタ悩み続けた結果、`Power Apps`で飛行機✈のアイコン飛ばすことにしました #PowerApps pic.twitter.com/U9nspZ04la
— 出戻りガツオ🐟 Microsoft MVP (@DemodoriGatsuo) July 13, 2024
今回はPower Appsの
上記で機能を実現します。
SVGや動画を使っていないことがポイントです。
構成要素
今回は画面が二つのシンプルな構成です。
片方は飛行機が実際に動く画面🛫🛬、片方はボタンのみの画面です。
飛行機が実際に動く画面🛫🛬がメインなので、コチラに焦点を当てて紹介します。
要素は
-
sliderMove- アイコンを実際に動かすスライダーコントロール -
txtLoading- テキストラベル -
btnLanding- 別の画面に遷移 -
icoFlying- モダンのボタンコントロール 飛行機のアイコンのみ表示✈
画面の名前はAnimationScreenとします。
初期設定
まずは飛行機が実際に動く画面🛫🛬 AnimationScreenのOnVisibleプロパティに下記を設定します。
Set(
CenterX,
Self.Width / 2
);
Set(
CenterY,
Self.Height / 2
);
Set(
Radius,
(CenterX / 2)
);
Set(
Angle,
0
);
-
CenterX- 画面のX軸の中心 -
CenterY- 画面のY軸の中心 -
Radius- 飛行機が動く半径 -
Angle- 角度 - スライダーのDefault値になる値
こちらを設定します。
画面が表示される段階で設定が初期化されるということになります。
スライダー
今回の挙動は、Power Appsのスライダー コントロール（クラシック）で実現しています。
スライダー コントロールにおいて
-
Default(既定)に変数を設定 -
OnChangeプロパティにてDefault(既定)の変数を変更
上記をすることで、実質的に無限ループを実現しています。
今回は円形の動きをするため、
- Max(最大)を
360 - Min(最小)を
0
上記の通り設定し、 -
Default(既定)を変数であるAngle
OnChangeに下記の式を設定してください。
If(Angle >= Self.Max, Set(Angle, 0), Set(Angle, Angle + 2));
「スライダーの最大値を超えたら、変数を初期化する」というイメージです。
アイコンの動きの速度はSet(Angle, Angle + 2)コチラが該当します。
2は個人的にちょうどいい速さだったのですが、設定値を変えることで、動きの速さをコントロールできます。
スライダーの仕込みはこちらで完了です。
ボタン コントロール - 飛行機のアイコン🛫
さて飛行機のアイコンを動かしましょう。
Power Appsのモダン コントロールのボタンにおいて、アイコンが使えます
しかも、もうプレビュー段階ではありません！オシャレなのでガンガン使いましょう！！
2024.07.13時点
Layoutを'ButtonCanvas.Layout'.IconOnly(アイコンのみ)に設定し、デザインを整えます。
コントロールの動きは、XとYで制御します。
こちらが肝なので解説を詳しくしていきます。
X座標
画面の中央のX座標を起点に円を描きます。
CenterX + Radius * Cos(sliderMove.Value * Pi() / 180)
Radiusが円の半径です。
-
Cos(Angle * Pi() / 180)角度をラジアンに変換し、その角度のコサイン値を計算 Angle: 現在の角度（度単位）Pi(): 円周率（約3.14159）
上記のようにほとんど標準の計算式で構成されます。
コサインなんて今ほとんど頭に登場しませんね💦
Cos 関数、Pi関数両方ともPower Appsの標準の関数です。
Y座標
画面の中央のY座標を起点に円を描きます。
CenterY + Radius * Sin(sliderMove.Value * Pi() / 180)
ほとんどX座標と同様です。
違いはCos(Angle * Pi() / 180)がSin(sliderMove.Value * Pi() / 180)になったことくらい。
- Sin(Angle * Pi() / 180): 角度をラジアンに変換し、その角度のサイン値を計算
Angle: 現在の角度（度単位）Pi(): 円周率（約3.14159）
サインも覚えていないー💦
ラジアンは円の半径の値の弧をに対する角度です。
これで動きを描く際の距離を計算しています。
アイコンの角度
モダン コントロールのボタンでIconRotationプロパティがあります。
こちらでアイコンの角度を決められるため、調整したいと思います。
Angle + 90
既定で左向きの飛行機のアイコンのため、角度を90度加えることで向きをそろえています。
Angleは0から360度の中で決められるため、sliderの値と同じ値になります。
Takeoff
こちらで飛行機の動きを描画できます！
SVGや動画を使っているわけではありません！
Coolですね。
想像で可能性は無限大です！
皆様よきPower Lifeを！