【PowerApps】SVGコードでテキストアニメーション

PowerApps上で面倒なタイマーの設定が不要でアニメーションさせる方法です。
今回はテキストを色々アニメーションさせてみました。

通常はブラウザ上で画像などを表示する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'>
  <text font-size='64' x='0' y='50'>
  こんにちは、うさぎ工房です。
  </text>
</svg>
")

すると、画像に「こんにちは、うさぎ工房です。」と文字列が表示されます。

PowerAppsではImageコントロールにこのように直接data:image/svg+xml形式を使うことで、SVGを画像として表示し、アニメーションを有効化することができます。

横スクロールアニメーション

次はテキストにアニメーションを設定してみます。
こちらのコード(animateタグ)を、上記コードのテキストの下に挿入してください。

<animate attributeName='x' values='2000;-2500' dur='5s' begin='0s' repeatCount='indefinite' />

このように文字列が右から左にスクロールします。
animateタグ内のattributeNameで操作したいプロパティ名を指定します。
上の例では'x'(横の座標)を指定しており、その後のvaluesで2000から-2000までを指定しています。
durはアニメーションの動作時間です。
beginは開始する時間です。(複数アニメーションさせる際に遅延させるとき使います。)

つまり、xの値を5秒かけて2000から-2000まで変化させますよという意味になります。

最後のrepeatCountは繰り返し回数を指定します。
ここでは「indefinite」を指定して、無限に繰り返しています。
数値を指定すると数値の回数分アニメーションして停止します。

※実際の使用時にはLen関数を使用して文字数を取得しフォントサイズを掛けてスクロールする幅を計算すると良い感じにスクロールします。

縦スクロールアニメーション

これらを踏まえて、縦にスクロールするコードがこちらです。

"data:image/svg+xml,"& 
EncodeUrl("
<svg width='1500' height='300' viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'>
  <text font-size='132' x='-700' y='100'>
  こんにちは、うさぎ工房です。
    <animate attributeName='y' values='500;100' dur='5s' begin='0s' repeatCount='indefinite' />
  </text>
</svg>
")

animateタグ内のattributeNameの値を'y'にして、値を調整しただけです。

これで縦にスクロールしてくれます。

上下繰り返しアニメーション

またvaluesの値を'500;100;500'とすると

500と100を行ったり来たりするので、上下に繰り返しアニメーションします。

フェードインフェードアウト

さらにanimateタグの下に以下のコード(animateタグをもう1つ)を追加してみます。

<animate attributeName='opacity' values='0;1;0' dur='5s' begin='0s' repeatCount='indefinite' />

attributeNameに'opacity'を指定しています。これは透明度のプロパティなので

このようにフェードインフェードアウトさせることができます。

波打つようなアニメーション

最後に文字列が波打つようなアニメーションのコードです。

"data:image/svg+xml,"& 
EncodeUrl("
<svg width='700' height='200' viewBox='0, -250, 1000, 400' xmlns='http://www.w3.org/2000/svg'>
  <text font-size='64' x='0' y='50'>こ
    <animate attributeName='y' values='50;100;50' begin='0s' dur='3s' repeatCount='indefinite' />
  </text>
  <text font-size='64' x='60' y='50'>ん
    <animate attributeName='y' values='50;100;50' begin='0.2s' dur='3s' repeatCount='indefinite' />
  </text>
  <text font-size='64' x='120' y='50'>に
    <animate attributeName='y' values='50;100;50' begin='0.4s' dur='3s' repeatCount='indefinite' />
  </text>
  <text font-size='64' x='180' y='50'>ち
    <animate attributeName='y' values='50;100;50' begin='0.6s' dur='3s' repeatCount='indefinite' />
  </text>
  <text font-size='64' x='240' y='50'>は
    <animate attributeName='y' values='50;100;50' begin='0.8s' dur='3s' repeatCount='indefinite' />
  </text>
  <text font-size='64' x='320' y='50'>、
    <animate attributeName='y' values='50;100;50' begin='1.0s' dur='3s' repeatCount='indefinite' />
  </text>
  <text font-size='64' x='360' y='50'>う
    <animate attributeName='y' values='50;100;50' begin='1.2s' dur='3s' repeatCount='indefinite' />
  </text>
  <text font-size='64' x='420' y='50'>さ
    <animate attributeName='y' values='50;100;50' begin='1.4s' dur='3s' repeatCount='indefinite' />
  </text>
  <text font-size='64' x='480' y='50'>ぎ
    <animate attributeName='y' values='50;100;50' begin='1.6s' dur='3s' repeatCount='indefinite' />
  </text>
  <text font-size='64' x='560' y='50'>工
    <animate attributeName='y' values='50;100;50' begin='1.8s' dur='3s' repeatCount='indefinite' />
  </text>
  <text font-size='64' x='620' y='50'>房
    <animate attributeName='y' values='50;100;50' begin='2.0s' dur='3s' repeatCount='indefinite' />
  </text>
  <text font-size='64' x='700' y='50'>で
    <animate attributeName='y' values='50;100;50' begin='2.2s' dur='3s' repeatCount='indefinite' />
  </text>
  <text font-size='64' x='760' y='50'>す
    <animate attributeName='y' values='50;100;50' begin='2.4s' dur='3s' repeatCount='indefinite' />
  </text>
  <text font-size='64' x='820' y='50'>。
    <animate attributeName='y' values='50;100;50' begin='2.6s' dur='3s' repeatCount='indefinite' />
  </text>
</svg>
")

animateタグのbeginの値を0.2ずつずらすことで、波打つようなアニメーションを実現しています。
PowerAppsのImageプロパティ内ではjavascriptが使用できず、1文字ずつ設定しています。
しかし、2・3文字分設定して続きはChatGPTに作ってもらえば、長文でもそれほど苦になりませんので、ぜひ試してみてください。

注意ですが、SVGコードは"(ダブルクォーテーション)内に文字列として設定されますので、その中で"を使用するとエラーになります。ChatGPTで生成したコードはだいたい"で作成されるので'(シングルクォーテーション)で作ってもらうか、置き換えて貼り付けましょう。