Bubbleで画像をクルッと回転させる簡単な方法【Rotation angle】

ノーコードツール「Bubble」で画像を90°や270°回転させる手軽な方法を紹介します。

実際の使用シーンとしては以下が挙げられます。

総じて、アコーディオンメニューの展開前と展開後で活躍する実装です。

Bubbleでは「Rotation angle」を使用して画像の角度をサクッと変えることができますのでぜひお試しください。

では、ブログ解説本編に参ります！

動画解説バージョンはこちら！

無料で資料をダウンロード

ノーコード開発お役立ち資料3点セット

計100ページ近い大ボリュームでノーコード開発について解説

実装イメージ

アコーディオンメニューを想定した実装イメージです。

初期状態では、矢印アイコン画像を下向きで表示させていますが、クリックすると角度を変えて上向き、右向きにします。

今回のTipsは、手順と呼ぶほど工程はないので手短に済ませます！

まず、上の添付画像の様な感じで、アコーディオンメニューの各アイテムかアイコン画像自体にyes/no型のカスタムステートを設定します。

初期状態ではアコーディオンを閉じているという想定で、アイコン画像をクリックしたときに、カスタムステートの値をyesに変更するワークフローをSet stateで組みます。すでにアコーディオンメニュー展開後にアイコン画像をクリックしたときは逆にカスタムステートをnoにするワークフローを設定します。

最後に、アイコン画像のConditionalで、カスタムステートの値がyesのときにアイコン画像をRotation angleを用いて回転させる設定をします。

以上です！

「勉強になった！」「役に立った！」と思っていただけたら、是非シェアもお願いします！