【PowerApps】アニメーションを実装する方法

1. はじめに

PowerApps には「アニメーション機能」という専用の仕組みはありませんが、
タイマーコントロールと変数の値変化を組み合わせることで、簡単な動きやフェード効果を再現できます。
この記事では、画面内のオブジェクトを動かす例を使って、実装方法を解説します。

---

2. 基本の考え方

PowerApps でのアニメーションは、以下の流れで実現します。

1. タイマーコントロールで一定間隔ごとにイベントを発生させる
2. 変数の値を少しずつ変化させる（位置や透明度など）
3. オブジェクトのプロパティに変数を反映する

---

3. 横移動アニメーションの例

3.1 タイマーコントロールの配置

1. 挿入 → 「タイマー」を選択
2. プロパティを設定
   • Duration: 50（ミリ秒単位）
   • Repeat: true
   • AutoStart: true（自動開始する場合）

3.2 位置を管理する変数

• OnStart またはボタンの OnSelect に以下を設定：

Set(xPos, 0)

3.3 タイマーで変数を更新

• OnTimerEnd に以下を設定：

Set(xPos, xPos + 5)

※ 5 は移動ピクセル数。値を変えると速度が変わります。

3.4 オブジェクトを動かす

• 移動させたいラベルや画像の X プロパティに以下を設定：

xPos

これで、タイマーが動くたびにオブジェクトが右方向へ移動します。

---

4. フェードイン/アウトの例

透明度（Transparency） プロパティを変数で管理します。

1. 初期値を設定：

Set(opacity, 1)

2. タイマーの OnTimerEnd：

Set(opacity, opacity - 0.05)

3. オブジェクトの Transparency プロパティ：

opacity

---

5. 応用例

• 位置と透明度を同時に変える（スライドイン＋フェード）
• 複数のタイマーを組み合わせる（シーケンシャルな動き）
• 変数をコレクションにして連続パターンを作る

---

6. まとめ

• PowerApps に直接的なアニメーション機能はない
• タイマー＋変数の変化で動きは表現できる
• 位置（X,Y）、透明度、サイズなどを変えると動きの幅が広がる