Power Apps でのアニメーション作成方法を自分のメモも兼ねて纏めていこうと思います。
前回は私がYouTubeの配信準備画面で利用しているアニメーションの作成方法について説明しました。
今回はタイプライターのように文字を1文字ずつ表示するアニメーションの作成方法についてご紹介します。
タイプライターのように一文字ずつ文字を表示 pic.twitter.com/GHQR3CXnxK
— コルネ (@koruneko32767) 2020年4月15日
イメージのようにタイプライターのように文字を1文字ずつ表示するアニメーションを作成します。
タイプライターのように文字を1文字ずつ表示するアニメーションの作成方法
今回紹介するアニメーションは以下のような構成になっています。
まずは上記のように
- テキストを表示するためのラベル
- 文字を入力するためのテキスト入力
- アニメーションを開始するためのボタン
- 入力内容をリセットするためのアイコン
- 文字を1文字ずつ表示するための制御を行うタイマー
を画面内に配置してください。
配置が完了したら、以下のように変数の設定およびテキスト入力の内容をリセットします。
Screen.OnVisible
UpdateContext({_timerStart:false});
UpdateContext({_wordnum:0});
UpdateContext({_words:""});
Reset(TextInput1);
ボタンが押されたら、文字を1文字ずつ表示するための制御を行っているタイマーを起動させます。
以下のように設定し、上記を実現させましょう。
Button.OnSelect
UpdateContext({_timerStart:true})
Timer.Start
_timerStart
タイマーは以下のように設定し、文字を1文字ずつ表示するための仕組みを作成します。
Timer.OnTimerStart
UpdateContext({_words:Concatenate(_words, Left(Right(TextInput1.Text, Len(TextInput1.Text) - _wordnum), 1))})
Timer.OnTimerEnd
If(_wordnum + 1 <= Len(TextInput1.Text),
UpdateContext({_wordnum:_wordnum + 1}),
UpdateContext({_timerStart:false})
)
Concatenate()は文字列の結合を行うために利用しています。Power Apps での関数の連結と連結
Right()、Left()では文字列の末尾/先頭から指定した数値だけ文字を取得します。Power Apps の Left、Mid、Right の各関数
なのでTimer.OnTimerStartでは、"wordnum"文字目の文字を"words"という変数に結合しているというわけですね。
"_wordnum"はTimer.OnTimerEndでインクリメントを行っています。
続いてこちらのタイマーが繰り返される条件ですが、入力した文字数分処理を繰り返したいと思います。
なので以下のように設定します。
Timer.Repeat
_wordnum <= Len(TextInput.Text)
これにより入力された文字数分処理が実行できますね。
最後に肝心の文字の表示を行っているラベルの設定です。
こちらには"_words"を設定すればいいですね。
Label.Text
_words
以上でタイプライターのように文字を1文字ずつ表示するアニメーションの作成は完了です！
アニメーションの実行間隔はTimerのDurationで調整できるのでお好きな時間を試してみて下さい。
