0
1

PowerAppsアプリでアナログ時計を作りたい

Last updated at Posted at 2024-09-11

動画:PowerAppsアプリでアナログ時計を作りたい
を公開しました。

今回の動画で使用した数式です。
角度を入れると回転中心位置からその角度の位置にオブジェクトが配置されます。
タイマーで1秒毎に時間を取得し、時間によって針の角度が徐々に変わるようにして、アナログ時計にしました。

//Xプロパティ

回転中心位置 - (Self.Width/2) + (回転半径 * Sin((角度-45)/57.17) + 回転半径 * Cos((角度-45)/57.17))

//Yプロパティ

回転中心位置 - (Self.Height/2) + ((-1 * 回転半径) * Cos((角度-45)/57.17) + 回転半径 * Sin((角度-45)/57.17))

↓こちらはタイマーのOnTimerEndプロパティの数式です。
算出した角度が格納された変数を上の数式の角度にいれます。
タイマーの期間は1000(1秒)

UpdateContext({_nowtime: Now()}); //現在時刻を取得
UpdateContext({_sangle: 360 / 60 * Second(_nowtime)}); //秒針の角度を算出
UpdateContext({_mangle: 360 / 60 * Minute(_nowtime)}); //長針(分)の角度を算出
UpdateContext({_hangle: 360 / 12 * Value(Hour(_nowtime) & "." & Int(Minute(_nowtime) * 100 / 60))});//短針(時)の角度を算出

↓秒針をスムーズ秒針にする場合は
_sangleの行をこちらに変更
タイマーの期間を50(0.05秒)に変更

UpdateContext({_sangle: 360 / 60 * Value(Text(_nowtime,"ss.fff")) });

時計の針にしたアイコンは、指し示す角度に応じて座標だけじゃなく、アイコン自体の角度を変える必要があるので、rotationプロパティにはそれぞれ指し示す角度に応じた変数が入っています。
_sangle + 〇〇など(アイコンに元々角度が付いてるので+して調整する)

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1