はじめに

Power AppsのGalleryで以下のようにアイテムがぬるっとでてくるようなアニメーション(スライドイン？)を実装してみました。

Galleryのアイテムがぬるってでてくるアニメーション#PowerApps pic.twitter.com/T36UkHTmdc
— コルネ (@koruneko32767) 2024年12月28日

この記事では上記の実装方法を紹介したいと思います。

アニメーションの実装方法

全体構成

全体構成はこんな感じです。

Galleryの中にコンテナを入れていますが、こちらは必須ではありません。
アニメーションを見ると、下からｽｯとアイテムが出てきているのですが、これをやるにはコントロールのY座標の値を変化させる必要があります。

ただ、すべてのコントロールのYに式を適用するのは面倒です。
ということで一括で設定できるようにコンテナを用意しました。

まぁ透明度の設定は各コントロール側で設定してあげないとダメなんですがねw

インデックス(連番)を付与する

アイテムを順に処理していくことになりますので、現在処理中のアイテムが何レコード目のアイテムなのか判別できるようにしてあげる必要があります。

そこでテーブルにインデックス(連番)を付与します。

連番の付与方法はこちらをご参照ください。

koruneko.hatenablog.com

アニメーションの実行時間を制御する

アニメーションの実行時間はタイマーコントロールで制御しています。

アニメーションの実行時間 = Galleryのアイテム数 × 各アイテムのアニメーション時間

となりますので、 Duration に以下を設定します。

Timer1.Duration

Gallery1.AllItemsCount * 800

アイテムを下から表示させる

アイテムを下からｽｯと表示させるようにします。

開始位置はGalleryの TemplateHeight / 2 として、0となるまで上に移動させます。

各アニメーションに掛かる時間は Timer1.Duration / Gallery1.AllItemsCount で求められますね。
こいつは何か所かで利用するので With 関数を利用して一時変数として利用することにしましょう。

次にぬるっとでてくるアニメーションですが、単純に y = x な等速的な動きとしてもいいのですが、どうせなら少し滑らかに見せたいです。
ということで Cos 関数を利用して正弦波を描きます。

cos波ですと、θ = 0 の際に y = 1をとり、θ = π / 2 の際に y = 0をとりますね。

各アニメーションの期間中は θ = 0 から θ = π / 2 へ値を変動させてやれば良さそうです。

ここで可変となるのはタイマーの値ですね。
タイマーの値が各アニメーションに掛かる時間の何割となったか？でθの値を可変にしてあげればよさそうです。

ただし、タイマーの値は各アニメーションに掛かる時間よりも大きくなります。(2回目以降)
従ってタイマーの値は各アニメーションに掛かる時間で割ったあまりで計算を行うこととします。

最後に現在アニメーション対象なのか？を判断する必要がありますので、それを判断するための条件分岐が必要ですね。
ThisItem.index = Int(Timer1.Value / timerUnit + 1)
連番は1からはじめちゃってるので、その点は注意が必要です。

以上を踏まえて式にすると以下のようになります。

Container1.Y

With(
    {timerUnit: Timer1.Duration / Gallery1.AllItemsCount},
    If(
        ThisItem.index = Int(Timer1.Value / timerUnit + 1),
        Parent.TemplateHeight / 2 * 
        Cos((Pi() / 2) * ((Mod(Timer1.Value, timerUnit) / timerUnit))),
        0
    )
)

表示/非表示を制御する

アニメーション前のものは非表示に。
アニメーション中のもの及びアニメーションが終わったものは表示させるように制御します。

これは先ほどの条件分岐をちょっと変えてやれば実装できますね。

With(
    {timerUnit: Timer1.Duration / Gallery1.AllItemsCount},
    ThisItem.index <= Int(Timer1.Value / timerUnit + 1)
)

各コントロールの透過度を設定する

最後に各コントロールの透過度を設定します。

透過度はY座標のときの考えとは反対に 0 から 1 に時間経過によって変化させたいです。
従ってこちらでは Sin 関数を用いることにします。

RGBA(
    50, 
    49, 
    48, 
    With(
        {timerUnit: Timer1.Duration / Gallery1.AllItemsCount},
        If(
            ThisItem.index = Int(Timer1.Value / timerUnit + 1),
            Sin((Pi() / 2) * ((Mod(Timer1.Value, timerUnit) / timerUnit))),
            1
        )
    )
)

おわりに

以上がPower AppsのGalleryでアイテムがぬるっと出てくるアニメーションを実装する方法でした！

実アプリではそんな使うことないかもですが、ちょっとした遊び心で入れておくと普段使うアプリが華やかになったりして、使用者や開発者の愛着も上がるかもしれないですね。