Power Apps でのアニメーション作成方法を自分のメモも兼ねて纏めていこうと思います。
前回はポップアップの作成方法について説明しました。
今回は私がYouTubeの配信準備画面で利用しているアニメーションの作成方法についてご紹介します。
配信準備画面で使用してるやつ pic.twitter.com/mDu95RQgH1
— コルネ (@koruneko32767) 2020年4月14日
ちなみに私のYouTubeチャンネルはこちらになります!
もしよろしければチャンネル登録などしていただけると嬉しいです!!!!
上記アニメーションの作成方法
こちらの画面は以下のような構成となっています。
"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})
また、タイマーは以下のように設定し画面表示時、自動でタイマーが動くように設定します。
今回なぜスライダーではなくタイマー使っているのか?といいますと、タイマーの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
以上で作成完了です!
いまいち利用用途が思い浮かばないアニメーションでしたが最後までご覧いただきありがとうございましたー。