SwiftUIでボタン自体にアニメーションをつける方法を教えてください。

Question

前提・実現したいこと

○前提
ボタンをタップすると表示されているテキストがランダムに切り替わるだけの、簡単なiOSアプリを開発中です。
(フレームワークはSwiftUI)

○実現したいこと
下記のようにして、ボタンを押している感じをリアルに表現したいです。
①ボタンを押す→ボタン自体の背景色が暗くなる
②ボタンから指を離す→ボタン自体の背景色が元にもどる

試したこと

○Button構造体を使う
タップしたときにBool値を変えて、ボタン自体の色を変えることはできました。
しかし、これだとボタンを離してもずっと色が変わったままなので、実現したいこととは異なります。

○onLongPressGestureモディファイアを使う
調べたところ、このモディファイアのpressingという引数を使えば、ボタンを押したときと離れたときの処理を追加することができるらしい、ということがわかりました。
しかし、問題点が二つあって、

①そもそも使い方がよくわからない
②このモディファイアではボタン自体の色を変えることはできない？

という点で詰まっています。

Swiftどころかプログラミング自体が初心者で、勉強不足であることは痛いほどわかっておりますが、ご回答くださると幸いです。

Comments

[ch3cooh]

Buttonであれば「ButtonStyle」を使ってみるのはいかがでしょうか？ すでにお使いになっておりますでしょうか？

* https://recipe.ch3cooh.net/entry/swiftui/list/cannot_work_button_on_stack

[MASAYOSHI.com]

ご質問ありがとうございます！
ButtonStyleというものがあるんですね、始めて知りました...
今回は違う方法を見つけて解決しましたが、別の機会に使ってみたいと思います！

Answer 1

自己解決したので、その方法を記したいと思います。

①ZStackを使い、ボタンの上にまったく同じボタンを重ね、色だけを変える。

②if文で上側のボタンを囲み、変数aがtrueのときだけ現れるようにする。

③下側のボタンにonLongPressGestureモディファイアを追加し、ボタンを押すと変数aがtrueに、離すとfalseになるようにする。

④ボタンを押す→色の違うボタンがまったく同じ位置に現れ、ボタンの色が変わったように見える
ボタンから離す→上側のボタンが隠れるので色が戻ったように見える

同じボタンを二つ作るので文は少し長くなりますが、見た目的にはボタンを押している感じが出たので満足しました。

＜補足＞
ひとつ疑問として残ったのは、onLongPressGestureモディファイアを使用したとき、表示されたテキストを変えるために使っていたButton構造体のactionが機能しなくなった点です。この問題が起きたため、Button構造体を消して、onLongPressGestureでその役割を担えるようにしました。