Matthew Devaney が Power Apps でローディングスピナーを使う方法を紹介していたので、触発されてローディングスピナーをPower Appsで作る方法を考えてみました。

Mattのブログは以下をご覧ください。

matthewdevaney.com

私が作ったものは、Power Apps内で色や丸の数を調整可能なローディングスピナーです。

f:id:mofumofu_dance:20210126001121g:plain

ここではImageコントロールにSVGコードを書き込んでいます。SVGで円を等間隔に配置し、その透過率を animate で変化させています。

各円がすこしずつずれてアニメーションを開始するのであたかも回っているように見えるということです。

Power Apps でSVGを扱う方法については以前まとめていますので、以下を参照してください。

mofumofupower.hatenablog.com

画像コントロールの中身

さっそくですが、ローディングスピナーを描くために画像コントロールには以下の式を入れています。

"data:image/svg+xml," & EncodeUrl(
    "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='margin: auto; background: rgba(255, 255, 255,0); display: block;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'>" &
     With(
        {
            circleCount: 10, //円の数
            circleRadius: 8, //円の半径
            duration: 1, //アニメーションの長さ
            fillColor: "#25a2b6" //円の塗り色
        },
        Concat(
            Sequence(
                circleCount,
                1
            ),
            "<g transform='rotate(" & 360 * (ThisRecord.Value - 1) / circleCount & " 50 50)'>
  <circle cx='45' cy='25' r='" & circleRadius & "' fill='" & fillColor & "'>
    <animate attributeName='opacity' values='1;0' keyTimes='0;1' dur='" & duration & "s' begin='" & -1 * duration * (ThisRecord.Value - 1) / circleCount & "s' repeatCount='indefinite'></animate>
  </circle>
</g>"
        )
    ) & "</svg>"
)

コピー＆ペーストすれば上で紹介したような円が表示されるかと思います。

コード解説

解説というほどでもありませんがここで重要なのはConcatの中です。

        Concat(
            Sequence(
                circleCount,
                1
            ),
            "<g transform='rotate(" & 360 * (ThisRecord.Value - 1) / circleCount & " 50 50)'>
  <circle cx='45' cy='25' r='" & circleRadius & "' fill='" & fillColor & "'>
    <animate attributeName='opacity' values='1;0' keyTimes='0;1' dur='" & duration & "s' begin='" & -1 * duration * (ThisRecord.Value - 1) / circleCount & "s' repeatCount='indefinite'></animate>
  </circle>
</g>"
        )

この部分。Concat関数はテーブルを対象として、その要素を決まったルールで文字列結合するための関数です。

今回の場合は対象のテーブルが [1,2,3,4,5,6,7,8..] のように1からはじまってNまでの整数を含んでいます。このテーブルをもとに、あとは同心円状に円を配置していきます。

時間とともに透過率が変化する円を記述するSVG要素がちょうどConcatの第二引数、

"<g transform='rotate(" & 360 * (ThisRecord.Value - 1) / circleCount & " 50 50)'>
  <circle cx='45' cy='25' r='" & circleRadius & "' fill='" & fillColor & "'>
    <animate attributeName='opacity' values='1;0' keyTimes='0;1' dur='" & duration & "s' begin='" & -1 * duration * (ThisRecord.Value - 1) / circleCount & "s' repeatCount='indefinite'></animate>
  </circle>
</g>"

この部分です。最初のtransform:'rotateは円形に決まった角度で円を配置するための変形です。もう一つのポイントが <animate>内のbegin=の部分です。これによって均一にアニメーションの開始時刻をずらしています。これによりあたかも回転しているような円になるわけです。