コルネの進捗や備忘録が記されたなにか

進捗や成果物や備忘録てきななにかを雑に更新していきます。

Power Apps で画面にアニメーションをつける~その6~


スポンサードリンク

Power Apps でのアニメーション作成方法を自分のメモも兼ねて纏めていこうと思います。
前回はポップアップの作成方法について説明しました。

今回は私がYouTubeの配信準備画面で利用しているアニメーションの作成方法についてご紹介します。

ちなみに私のYouTubeチャンネルはこちらになります!
もしよろしければチャンネル登録などしていただけると嬉しいです!!!!

www.youtube.com

上記アニメーションの作成方法

こちらの画面は以下のような構成となっています。

f:id:koruneko:20200601004055p:plain

"Ractangle1_X"が横方向の四角形を、"Ractangle2_X"が縦方向の四角形を表しています。
今回オブジェクトを1つずつ設定していますが、ギャラリーで纏めてもよかったかもですね。

これから配置する四角形はコピペで設定すると楽なのでまずは縦・横1つずつ作成しましょう!

横長の四角形は以下のように設定します。

Rectangle1_X.Width

Screen.Width

Rectangle1_X.Height

Screen.Height / 10

縦長の四角形は以下のように設定します。

Rectangle2_X.Width

Screen.Width / 16

Rectangle2_X.Height

Screen.Height

四角形を動かすために使用する変数を設定します。

Screen.OnVisible

UpdateContext({_animeNum:0})

こちらの変数はタイマーにより変動させるようにします。

Timer.OnTimerEnd

UpdateContext({_animeNum:_animeNum + 3})

また、タイマーは以下のように設定し画面表示時、自動でタイマーが動くように設定します。

f:id:koruneko:20200601013254p:plain

今回なぜスライダーではなくタイマー使っているのか?といいますと、タイマーのDurationでアニメーションの速度を制御したかったためです。

では、”_animeNum”を使用して四角形にアニメーションを設定していきましょう。

まずは横長の四角形のアニメーションの設定です。
横長の四角形は縦方向に移動してもらいたいですね。
つまりY成分が変化すればいいわけです。

Rectangle1_X.Y

Mod((Screen.Height + Rectangle1_1.Height) / 5 * 0 + _animeNum, Screen.Height + Rectangle1_1.Height) - Rectangle1_1.Height

こちらを設定したら横長の四角形は4個コピペしてください。
コピペした四角形の下記の太字部分を変更し、初期位置の変更を行います。

Mod((Screen.Height + Rectangle1_1.Height) / 5 * 0

例えばRectangle1_2ですと以下のように変更します。

Rectangle1_2.Y

Mod((Screen.Height + Rectangle1_1.Height) / 5 * 1 + _animeNum, Screen.Height + Rectangle1_1.Height) - Rectangle1_1.Height


続いて縦長の四角形のアニメーションの設定です。
縦長の四角形は横方向に移動してもらいたいです。
つまりX成分の値を変化させましょう!

Recatngle2_X.X

Mod((Screen.Width + Rectangle2_1.Width) / 8 * 0 + _animeNum, Screen.Width + Rectangle2_1.Width) - Rectangle2_1.Width

こちらを設定したら縦長の四角形は7個コピペしてください。
横長の四角形の時と同じように下記の太字部分はそれぞれ変更しておいてください

Mod((Screen.Width + Rectangle2_1.Width) / 8 * 0

以上で作成完了です!
いまいち利用用途が思い浮かばないアニメーションでしたが最後までご覧いただきありがとうございましたー。


スポンサードリンク