計算カードアプリ SVGで丸のアニメーションを作成する - 知識ゼロからはじめるローコーディング開発

先日Twitterに投稿をさせて頂きました Power Apps の「計算カードアプリ」ですが、今回は丸のアニメーションの作り方を紹介したいと思います。最初、gifで解決出来るのかなと思ったのですが、アニメーションの開始を Power Apps のボタンと連動させなくてはならず、少し複雑にはなりましたが、SVGを組合わせることでカタチにすることが出来ました。

さて、作り方ですが、丸はSVGを使用しますので、最初に画像を追加します。

プロパティImageは下図のように記述します。

最初の「"data:image/svg+xml ～」はSVGを使用するときの決まり文句です。「<circle　～」は丸の描画に関する設定です。丸のサイズや線の色や幅を設定しています。

丸のアニメーションに関わる設定は「stroke-dasharray ～」で設定しています。「stroke-dasharray」は破線を描くときに使われる線の間隔を指定するプロパティです。続いて「stroke-dashoffset」は線の開始位置を設定するプロパティです。これらを組合わせることでアニメーションを設定しています。

「stroke-dasharray」の設定についてですが、値には丸の円周の長さを設定しています。半径が95ですので596を設定します。「stroke-dashoffset」は線の開始位置を設定する箇所ですが、タイマーの値を組合わせることで、徐々に開始位置が移動し、最後は0になるように設定をします。

「transform」は丸の書き始め位置を設定しています。rotateとtranslateを組合わせることで自由に開始位置を変えることが出来ます。下図の設定では下から上に向かって丸を描き始めるように設定されています。

続いてタイマーを追加します。期間は丸の円周と同じ値をセットします。

最期にタイマーの開始ボタンを設定します。ボタンを追加して下図のように設定します。ボタンのプロパティOnSelectには変数StartFlgに値「true」をセットさせます。※UpdateContextでもOK
タイマーのプロパティStartには変数StartFlgをセットします。

これでボタンを押したタイミングでタイマーが作動し画像に丸が描画されるアニメーションがスタートするはずです。

計算カードアプリでは数字ボタンを押したタイミングで、入力した値が正解であれば丸の描画をスタートさせるようにしています。続いて「つぎ」ボタンを押した時に描画した丸は消去され、再び描画が出来るよう「StartFlg」の値をfalseにしています。

上記で紹介をしているSVGの設定は下記のとおりです。試される場合は、上記を参考にタイマーとボタンコントロールを追加して、ご利用ください。

"data:image/svg+xml,"&
EncodeUrl(
"<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'>
<circle cx='100' cy='100' r='95'
fill='transparent'
stroke = '#ff69b4' stroke-width ='10'
stroke-dasharray='596'
stroke-dashoffset='"& 596 - Timer1.Value &"'
transform='rotate(90) translate(0 -200)'>
</circle>
</svg>"
)

それではまたー。