2021年4月26日PR前回に引き続き、タップで絵ニューが開閉するメニューボタンの実装例を記載します。こんな感じの、アニメーションで開閉するメニューボタンを実装していきます。実装のイメージとしては、一つ一つのボタンをMe...今回は、ボタンを右下に配置し、タップすると、順番にアニメーションでメニューが3つ左・左・上に表示されるようにしてみます。コードの詳細は、前回の記事に記載しているので、今回の記事では、相違点のみを記載しています。前回の記事も参考にしてみてください。こんな感じの、アニメーションで開閉するメニューボタンを実装していきます。実装のイメージとしては、一つ一つのボタンをMe...ExpandButtonのアニメーション前回との相違点としては、アニメーションが横に表示されるのではなく、左・左上・真上とTranslateする位置が異なる部分です。今回は、ボタンが3つとの決め打ちで、それぞれの位置をtranslationXとtranslationYで指定しています。}}アニメーションブロック一つのアニメーションが終了したら次のアニメーションを開始する、というふうに、アニメーションを順番に実行させるために、UIViewのアニメーションのExtensionを追加しています。}}こちらの記事を参考にすこし修正を加えました。https://qiita.com/lovee/items/460cbb02a345e0ff7910UIViewControllerでのExpandButtonの配置AutoLyaoutの設定において、高さを160に設定します。この160とは、ボタンの高さ60に加えて、真上に移動するボタンの移動量100を加味した数値になります。このExpandButtonの高さを設定しておかないと、ボタンを開いたときに、真上に移動したボタンのタップが検知しなくなってしまいます。$0.bottom.equalToSuperview().offset(-32)}実際にアプリに組み込む際には、ExpandButtonの裏側に様々なビューが配置されることになります。今回は検証していませんが、裏側のビューのタップや、メニューボタンを開いた時のタップなど、諸々追加で確認・修正が必要になると思います。ココナラココナラというサービスをご存知ですか?ココナラは、プログラミングやウェブ制作、デザインなどの専門知識を持つ人たちが、自分のスキルを活かしてサービスを提供する場所です。初学者の方でも気軽に相談できるため、自分のスキルアップにも最適です。自分自身もココナラでサービスを提供することができ、収入を得ることができます。