Power Appsで飛行機🛫をクルクルまわす🛬 - ボタンとスライダー

# はじめに
[Qiita Engineer Festa 2024 の記事投稿キャンペーン](https://qiita.com/official-campaigns/engineer-festa/2024)もあとわずかですね。
ネタに悩むところです。

https://qiita.com/official-campaigns/engineer-festa/2024

とりあえず思いついたので、`Power Apps`で**飛行機🛫をクルクルまわしたいと思います。🛬**

**動画はTwitterを参照してください🛫🛬**

<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">Qiitaの記事ネタ悩み続けた結果、`Power Apps`で飛行機✈のアイコン飛ばすことにしました <a href="https://twitter.com/hashtag/PowerApps?src=hash&amp;ref_src=twsrc%5Etfw">#PowerApps</a> <a href="https://t.co/U9nspZ04la">pic.twitter.com/U9nspZ04la</a></p>&mdash; 出戻りガツオ🐟 Microsoft MVP (@DemodoriGatsuo) <a href="https://twitter.com/DemodoriGatsuo/status/1812123990120706123?ref_src=twsrc%5Etfw">July 13, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

今回はPower Appsの
- [モダン コントロールのボタン](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/modern-controls/modern-control-button)
- [スライダー コントロール（クラシック）](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-slider)

上記で機能を実現します。

`SVG`や動画を使っていないことがポイントです。

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/modern-controls/modern-control-button

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-slider

# 構成要素
今回は画面が二つのシンプルな構成です。
片方は`飛行機が実際に動く画面🛫🛬`、片方はボタンのみの画面です。

`飛行機が実際に動く画面🛫🛬`がメインなので、コチラに焦点を当てて紹介します。
要素は
 - `sliderMove` - アイコンを実際に動かすスライダーコントロール
 - `txtLoading` - テキストラベル
 - `btnLanding` - 別の画面に遷移
 - `icoFlying` - モダンのボタンコントロール 飛行機のアイコンのみ表示✈

画面の名前は`AnimationScreen`とします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/7d6f7852-d040-f223-f2cf-d18e341452b9.png)

# 初期設定
まずは`飛行機が実際に動く画面🛫🛬` `AnimationScreen`の`OnVisible`プロパティに下記を設定します。

```plaintext: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`の[スライダー コントロール（クラシック）](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-slider)で実現しています。

スライダー コントロールにおいて
1. `Default(既定)`に変数を設定
1. `OnChange`プロパティにて`Default(既定)`の変数を変更

上記をすることで、実質的に無限ループを実現しています。

今回は円形の動きをするため、
 - Max(最大)を`360`
 - Min(最小)を`0`
上記の通り設定し、
 - `Default(既定)`を変数である`Angle`
`OnChange`に下記の式を設定してください。

```plaintext:OnChange
If(Angle >= Self.Max, Set(Angle, 0), Set(Angle, Angle + 2));
```

**「スライダーの最大値を超えたら、変数を初期化する」というイメージです。**
アイコンの動きの速度は`Set(Angle, Angle + 2)`コチラが該当します。
`2`は個人的にちょうどいい速さだったのですが、設定値を変えることで、動きの速さをコントロールできます。

スライダーの仕込みはこちらで完了です。

## ボタン コントロール - 飛行機のアイコン🛫
さて飛行機のアイコンを動かしましょう。

`Power Apps`の[モダン コントロールのボタン](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/modern-controls/modern-control-button)において、アイコンが使えます

:::note info
しかも、もうプレビュー段階ではありません！オシャレなのでガンガン使いましょう！！
2024.07.13時点
:::

`Layout`を`'ButtonCanvas.Layout'.IconOnly`(アイコンのみ)に設定し、デザインを整えます。

コントロールの動きは、`X`と`Y`で制御します。
こちらが肝なので解説を詳しくしていきます。

### X座標

画面の中央のX座標を起点に円を描きます。

```plaintext:X
CenterX + Radius * Cos(sliderMove.Value * Pi() / 180)
```

`Radius`が円の半径です。
- `Cos(Angle * Pi() / 180)` 角度をラジアンに変換し、その角度のコサイン値を計算
- `Angle: 現在の角度（度単位）`
- `Pi(): 円周率（約3.14159）`

上記のようにほとんど標準の計算式で構成されます。
コサインなんて今ほとんど頭に登場しませんね💦

[Cos 関数、Pi関数両方ともPower Appsの標準の関数](https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-trig)です。

### Y座標

画面の中央のY座標を起点に円を描きます。

```plaintext: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）`

サインも覚えていないー💦

ラジアンは円の半径の値の弧をに対する角度です。
これで動きを描く際の距離を計算しています。

[Sin 関数もPower Appsの標準の関数](https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-trig)です。

### アイコンの角度
[モダン コントロールのボタン](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/modern-controls/modern-control-button)で`IconRotation`プロパティがあります。
こちらでアイコンの角度を決められるため、調整したいと思います。

```plaintext:X
Angle + 90
```

既定で左向きの飛行機のアイコンのため、角度を90度加えることで向きをそろえています。
`Angle`は0から360度の中で決められるため、sliderの値と同じ値になります。

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/modern-controls/modern-control-button

# Takeoff
こちらで飛行機の動きを描画できます！
**SVGや動画を使っているわけではありません！**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/45a63e26-82a4-b422-235f-c59ebbce3e3b.png)

**Coolですね。**
想像で可能性は無限大です！

皆様よき`Power Life`を！