Power Apps でのアニメーション作成方法を自分のメモも兼ねて纏めていこうと思います。
前回はサークルメニューについて説明しました。
今回はロード画面などで使える跳ねる文字の作成方法についてご紹介します。
ロード画面などで使える跳ねる文字 pic.twitter.com/e4DomAMQRv
— コルネ (@koruneko32767) 2020年4月13日
イメージのように文字が跳ねるアニメーションを作成します。
跳ねる文字の作成方法
まずは表示させたい文字数だけラベルを追加してください。
イメージですと「NOW LODING...」で10文字なので、ラベルを10個使用します。(LOADINGですね。Aが抜けてます...)
ラベルにはそれぞれ任意の文字を入力し、順番に並べてください。
続いて文字を跳ねさせるための仕組みを作成します。
「挿入」>「入力」よりタイマーを挿入します。
タイマーは、「繰り返し」、「自動開始」をそれぞれONにしておいてください。
今回、「期間」は1に設定します。
続いて、値をインクリメントしていくための変数を設定します。
Screen.OnVisible
UpdateContext({_count:0})
Timer.OnTimerEnd
UpdateContext({_count:_count + 60})
これで1[ms]ごとにcount変数が60ずつインクリメントされるようになりました。
こちらのcountをラベルのYに設定します。
一文字目のYには以下のように設定します。
Label1.Y
Screen.Height - Label1.Height - If(Mod(RoundDown(_count / 180, 0), 10) = 0, Abs(60 * Sin(_count * Pi() / 180)), 0)
順番に解説していきます。
Screen.Height - Label1.Height
まずは上記の式ですね。
こちらはラベルを画面の下に配置させるための式です。
そして以下の、If()文内の式に関してです。
Abs(60 * Sin(_count * Pi() / 180)
こちらは、振幅60で座標を変換させるための式です。
Abs()はAbsoluteの略で絶対値を意味します。
今回こちらを設定しているラベルはマイナス方向にはいってほしくないためこのように設定しております。
最後に、
If(Mod(RoundDown(_count / 180, 0), 10) = 0, Abs(60 * Sin(_count * Pi() / 180)), 0)
こちらのIf()分の条件ですね。
こちらは文字が順番にジャンプさせるための仕組みです。
Abs(Sin())の式は1文字につき半周期実行されてほしいですね。
これを実現するのが上記式になります。
なので、"Mod() = X"のXにはN文字目の場合、"X = N - 1"を設定してください。
以上が跳ねる文字の作成方法です！
今回のは少ない手順で作成することができました！！
