PowerApps上で面倒なタイマーの設定が不要でアニメーションさせる方法です。
通常はブラウザ上で画像などを表示するSVGコードを利用しています。
アニメーション機能が優秀なので一味違ったアプリを作成したい人にはおすすめの方法です。
↑前回はSVGコードでテキストをアニメーションさせてみました。
先に前回の記事を読んでいただくと理解が早いと思います。
今回は画像を色々アニメーションさせてみました。
SVGコードで画像を表示
アプリにアップロードした画像をSVGコードで表示するには、ちょっとコツが必要になります。
まずはPowerAppsStudioで画像をアップロードします。
メディアからメディアの追加で画像をアップロードします。
アプリを作成し、画面上に画像を配置します。
配置した画像のImageプロパティに以下のコードを記入。(失敗例です)
"data:image/svg+xml,"&
EncodeUrl("
<svg width='700' height='400' viewBox='0, -250, 1000, 400' xmlns='http://www.w3.org/2000/svg'>
<image href='アップロードした画像の名前' x='80' y='100' width='240' height='200'>
</image>
</svg>
")
としてみましたが、これでは表示されません。
アップロードした画像はImage 型で保持されていて、そのままでは表示できません。
HTMLで使える形（Base64）に変換するためJSON() 関数を使います。
画面のOnVisibleプロパティ等に以下のコードを設定します。
Set(_image1,Substitute(JSON(画像の名前, JSONFormat.IncludeBinaryData), """", ""));
「画像の名前」のところにはアップロードした画像の名前(拡張子なし)を入れてください。
別の画面から画像をOnVisibleプロパティを設定した画面を選択し直すか、StartScreenに移動でOnVisibleプロパティを動作させれば、
変数_image1に、Base64に変換したSVGコードで使える形式の画像が格納されます。
改めて下記のコードを画像のImageプロパティに記述します。
"data:image/svg+xml,"&
EncodeUrl("
<svg width='700' height='400' viewBox='0, -250, 1000, 400' xmlns='http://www.w3.org/2000/svg'>
<image href='" & _image1 & "' x='80' y='100' width='240' height='200'>
</image>
</svg>
")
imageタグのhrefに変数_image1が入るように&で文字列として連結します。
これで画像が表示されるようになったはずです。
横スクロールアニメーション
それでは画像を横スクロールアニメーションさせてみましょう。
<animate attributeName='x' values='400;0;400' dur='3s' begin='0s' repeatCount='indefinite' />
こちらのコード(animateタグ)を、上記コードのとの間に挿入してください。
このように文字列が右から左にスクロールします。
animateタグ内のattributeNameで操作したいプロパティ名を指定します。
上の例では'x'(横の座標)を指定しており、その後のvaluesで400から0そして400までを指定しています。
durはアニメーションの動作時間です。
beginは開始する時間です。(複数アニメーションさせる際に遅延させるとき使います。)
つまり、xの値を3秒かけて400➤0➤400と変化させますよという意味になります。
最後のrepeatCountは繰り返し回数を指定します。
ここでは「indefinite」を指定して、無限に繰り返しています。
数値を指定すると数値の回数分アニメーションして停止します。
縦にスクロールしたい場合はattributeNameに'y'を指定して値を調整してください。
フェードインフェードアウト
animateタグを以下のように記述します。
<animate attributeName='opacity' values='0;1;0' dur='5s' begin='0s' repeatCount='indefinite' />
attributeNameに'opacity'を指定しています。これは透明度のプロパティなので
このようにフェードインフェードアウトさせることができます。
画像の回転アニメーション
PowerAppsで画像の回転を使用とすると90度ずつしか回転できなかったのですが、
SVGコードを使うと細かい角度も指定して回転することができました。
コードはこちらです。
"data:image/svg+xml,"&
EncodeUrl("
<svg width='2000' height='2000' viewBox='0 0 2000 2000' xmlns='http://www.w3.org/2000/svg'>
<image href='" & _image1 & "' x='250' y='250' width='1500' height='1500'>
<animateTransform attributeName='transform' attributeType='XML' type='rotate' from='0 1000 1000' to='360 1000 1000' dur='3s' repeatCount='indefinite' />
</image>
</svg>
")
今度はanimateタグではなくanimateTransformタグを使用します。
fromとtoに指定しているのが角度と回転の中心位置XとYです。
角度は0から360で、回転の中心位置は画像ではなくviewBoxの座標となる点に注意して設定してください。
この座標も変化させると面白い動きになります。
画像を時間に合わせて回転(タイマーと組み合わせる)
↑以前アイコンを使ってアナログ時計を作成したことがありますが、アイコンの座標まで計算する必要がありました。SVGコードを使えば画像にも細かい角度が指定できるので、画像で時計を作ることができますね。
タイマーのonTimerEndプロパティに現在時刻を取得するコードを入れて、角度を計算すれば画像を用いてアナログ時計を作ることが可能です。
ぜひ挑戦してみてください。
注意ですが、SVGコードは"(ダブルクォーテーション)内に文字列として設定されますので、その中で"を使用するとエラーになります。ChatGPTで生成したコードはだいたい"で作成されるので'(シングルクォーテーション)で作ってもらうか、置き換えて貼り付けましょう。