クイックアクション #9

Closed
opened 2026-08-11 05:29:40 +00:00 by joe · 11 comments
Owner

クイックアクションのタイトルタップでタブ展開する時に派手にメニューがタブになる様子をエフェクトにしたい

クイックアクションのタイトルタップでタブ展開する時に派手にメニューがタブになる様子をエフェクトにしたい
Author
Owner

v1.4.393 で実装完了(B案 スタッガー展開)

クイックアクションのタイトルタップでタブを開く際、各タブが下からスライドイン+スケール+フェードで順番に出現するスタッガーエフェクトを追加しました。

実装内容

  • TabbedWorkspace に AnimationController と openTabsAnimated() を追加
  • タブ数に応じて duration を自動調整(1タブあたり120ms)
  • Curves.easeOutBack でスケールのオーバーシュートを演出

リリース: https://github.com/krasherjoe/h1-c2/releases/tag/v1.4.393

動作を見て、派手さが足りなければ他の案(ボタンがタブに変身するA案など)に切り替えられます。確認をお願いします。

## v1.4.393 で実装完了(B案 スタッガー展開) クイックアクションのタイトルタップでタブを開く際、各タブが下からスライドイン+スケール+フェードで順番に出現するスタッガーエフェクトを追加しました。 ### 実装内容 - `TabbedWorkspace` に `AnimationController` と `openTabsAnimated()` を追加 - タブ数に応じて duration を自動調整(1タブあたり120ms) - `Curves.easeOutBack` でスケールのオーバーシュートを演出 **リリース**: https://github.com/krasherjoe/h1-c2/releases/tag/v1.4.393 動作を見て、派手さが足りなければ他の案(ボタンがタブに変身するA案など)に切り替えられます。確認をお願いします。
Author
Owner

v1.4.394 でA案に変更完了

B案(スタッガー)を廃し、A案(ボタンがタブに変身する飛翔+モーフィング)に変更しました。

実装内容

  • タイトルタップ: 各アクションボタンが自分の位置からタブバーまで飛び、アイコン+ラベル→タブピルに変化して着地(スタッガーで順番に飛翔)
  • 単体タブ: 個別ボタンタップでも同じ飛翔+モーフエフェクト
  • 他呼び出し元(メニュータイル等): 飛翔位置が無いためスタッガー展開(下からスライド+スケール+フェード)で対応
  • タブ表示には常にエフェクトが伴う仕様に統一

リリース: https://github.com/krasherjoe/h1-c2/releases/tag/v1.4.394

動作確認をお願いします。派手さや挙動の調整が必要ならフィードバックください。

## v1.4.394 でA案に変更完了 B案(スタッガー)を廃し、A案(ボタンがタブに変身する飛翔+モーフィング)に変更しました。 ### 実装内容 - **タイトルタップ**: 各アクションボタンが自分の位置からタブバーまで飛び、アイコン+ラベル→タブピルに変化して着地(スタッガーで順番に飛翔) - **単体タブ**: 個別ボタンタップでも同じ飛翔+モーフエフェクト - **他呼び出し元**(メニュータイル等): 飛翔位置が無いためスタッガー展開(下からスライド+スケール+フェード)で対応 - **タブ表示には常にエフェクトが伴う仕様**に統一 **リリース**: https://github.com/krasherjoe/h1-c2/releases/tag/v1.4.394 動作確認をお願いします。派手さや挙動の調整が必要ならフィードバックください。
Author
Owner

v1.4.395 でスライド遷移を追加

ダッシュボード・クイックアクション等からのタブ遷移時に、コンテンツ領域がスライドして切替わるエフェクトを追加しました。

実装内容

  • コンテンツ領域を IndexedStack → ClipRect+Stack方式に変更し、全タブの状態を維持したままスライドアニメーション
  • 新タブは右からスライドイン、旧タブは左へスライドアウト(約260ms)
  • クイックアクションでは「ボタン飛翔+モーフ → タブバースタッガー → コンテンツスライド」の順に連動
  • タブバータップ・ホームタブ切替にもスライドを適用

リリース: https://github.com/krasherjoe/h1-c2/releases/tag/v1.4.395

動作確認をお願いします。スライドの速度・方向・飛翔との組み合わせなど調整が必要ならフィードバックください。

## v1.4.395 でスライド遷移を追加 ダッシュボード・クイックアクション等からのタブ遷移時に、コンテンツ領域がスライドして切替わるエフェクトを追加しました。 ### 実装内容 - コンテンツ領域を IndexedStack → ClipRect+Stack方式に変更し、全タブの状態を維持したままスライドアニメーション - 新タブは右からスライドイン、旧タブは左へスライドアウト(約260ms) - クイックアクションでは「ボタン飛翔+モーフ → タブバースタッガー → コンテンツスライド」の順に連動 - タブバータップ・ホームタブ切替にもスライドを適用 **リリース**: https://github.com/krasherjoe/h1-c2/releases/tag/v1.4.395 動作確認をお願いします。スライドの速度・方向・飛翔との組み合わせなど調整が必要ならフィードバックください。
Author
Owner

v1.4.396 でスライド方向を対応

スライド遷移の方向を「進む/戻る」で反転させるよう修正しました。

挙動

  • 進む(新規タブ・前方タブへ): 新タブが右から左へスライドイン
  • 戻る(戻るボタン・ホームタブ・後方タブへ): 新タブが左から右へスライドイン(逆方向)
  • スタック/ポップ(タブ内の画面遷移): CupertinoPageTransitionsBuilder により進む=右から、戻る=左からで既に正しいため変更なし

操作の種類(進む/スタック/戻る/ポップ)でエフェクト方向が自然に連動します。

リリース: https://github.com/krasherjoe/h1-c2/releases/tag/v1.4.396

動作確認をお願いします。

## v1.4.396 でスライド方向を対応 スライド遷移の方向を「進む/戻る」で反転させるよう修正しました。 ### 挙動 - **進む**(新規タブ・前方タブへ): 新タブが右から左へスライドイン - **戻る**(戻るボタン・ホームタブ・後方タブへ): 新タブが左から右へスライドイン(逆方向) - **スタック/ポップ**(タブ内の画面遷移): CupertinoPageTransitionsBuilder により進む=右から、戻る=左からで既に正しいため変更なし 操作の種類(進む/スタック/戻る/ポップ)でエフェクト方向が自然に連動します。 **リリース**: https://github.com/krasherjoe/h1-c2/releases/tag/v1.4.396 動作確認をお願いします。
Author
Owner

v1.4.397 で表示順バグを修正

飛翔エフェクト中に遷移先の画面が先に表示されるバグを修正しました。

原因

openTab/openTabsAnimated が飛翔開始時に _currentIndex を即座に新タブへ切り替えていたため、コンテンツ領域に新タブの画面が飛翔中から見えていました。

修正

飛翔→スタッガー期間は遷移元ページ(ダッシュボード)を表示したままにし、新タブのコンテンツは非表示に。タブバー着地後にスライドで遷移します。

期待する表示順:

  1. ダッシュボード表示のまま
  2. ボタンが飛翔してタブバーに着地(飛翔+モーフ)
  3. タブピルがスタッガーで出現
  4. コンテンツがスライドで遷移

リリース: https://github.com/krasherjoe/h1-c2/releases/tag/v1.4.397

動作確認をお願いします。

## v1.4.397 で表示順バグを修正 飛翔エフェクト中に遷移先の画面が先に表示されるバグを修正しました。 ### 原因 openTab/openTabsAnimated が飛翔開始時に `_currentIndex` を即座に新タブへ切り替えていたため、コンテンツ領域に新タブの画面が飛翔中から見えていました。 ### 修正 飛翔→スタッガー期間は遷移元ページ(ダッシュボード)を表示したままにし、新タブのコンテンツは非表示に。タブバー着地後にスライドで遷移します。 **期待する表示順**: 1. ダッシュボード表示のまま 2. ボタンが飛翔してタブバーに着地(飛翔+モーフ) 3. タブピルがスタッガーで出現 4. コンテンツがスライドで遷移 **リリース**: https://github.com/krasherjoe/h1-c2/releases/tag/v1.4.397 動作確認をお願いします。
Author
Owner

クイックアクションではなく、タブ機能だがタップの時の精度(指が触れた範囲)の調整が可能であればSET:設定に感度等の項目が欲しい

クイックアクションではなく、タブ機能だがタップの時の精度(指が触れた範囲)の調整が可能であればSET:設定に感度等の項目が欲しい
Author
Owner

v1.4.400 でタブタップ領域設定を追加

Issue #9 comment-55 の要望(タブタップの精度・当たり判定調整)を実装しました。

実装内容

  • SET:設定 → 表示設定 に「タブタップ領域」項目を追加(狭い/標準/広い)
  • タブの見た目(サイズ・デザイン)は変わらず、透明なパディングでタッチ領域のみ拡張
  • GestureDetector(behavior: HitTestBehavior.opaque) + 外側Padding方式
  • 設定値: 狭い=0px, 標準=6px, 広い=12px(デフォルト=標準)

仕様

  • タブの視覚サイズは36pxのまま変更なし
  • 「広い」選択時はタブ周囲に12pxの透明な当たり判定領域が追加(実質48px相当)
  • 隣接タブと当たり領域が重なる場合は先に勝つ仕様(実害なし)
  • 設定変更は即座に反映(アプリ再起動不要)

リリース: https://github.com/krasherjoe/h1-c2/releases/tag/v1.4.400

動作確認をお願いします。調整が必要ならフィードバックください。

## v1.4.400 でタブタップ領域設定を追加 Issue #9 comment-55 の要望(タブタップの精度・当たり判定調整)を実装しました。 ### 実装内容 - **SET:設定 → 表示設定** に「タブタップ領域」項目を追加(狭い/標準/広い) - タブの見た目(サイズ・デザイン)は変わらず、透明なパディングでタッチ領域のみ拡張 - `GestureDetector(behavior: HitTestBehavior.opaque)` + 外側Padding方式 - 設定値: 狭い=0px, 標準=6px, 広い=12px(デフォルト=標準) ### 仕様 - タブの視覚サイズは36pxのまま変更なし - 「広い」選択時はタブ周囲に12pxの透明な当たり判定領域が追加(実質48px相当) - 隣接タブと当たり領域が重なる場合は先に勝つ仕様(実害なし) - 設定変更は即座に反映(アプリ再起動不要) **リリース**: https://github.com/krasherjoe/h1-c2/releases/tag/v1.4.400 動作確認をお願いします。調整が必要ならフィードバックください。
Author
Owner

#9 (comment)
タブの視覚サイズは36pxのまま変更なし、と、あったが明らかに以前より上下にスペースが発生した、つまりUIが開いてスカスカになり見た目が変わった
見た目は元に戻して欲しい

https://git.cyberius.biz/joe/h1-c2/issues/9#issuecomment-57 タブの視覚サイズは36pxのまま変更なし、と、あったが明らかに以前より上下にスペースが発生した、つまりUIが開いてスカスカになり見た目が変わった 見た目は元に戻して欲しい
Author
Owner

v1.4.402 でUI崩れを修正

comment-58 の報告通り、Padding方式だと視覚的スペースが発生してUIがスカスカになっていました。私の説明「タブの見た目は変わらない」は間違いでした。申し訳ありません。

原因

Padding ウィジェットは透明でもレイアウト上のスペースを占有するため、タブバーの高さが固定されていないと上下に隙間ができました。

修正

Padding 方式を廃止し、Stack + Positioned 方式に変更しました:

  • 視覚要素(タブピル)は元の36pxサイズのまま中央に配置
  • Positioned.fill の GestureDetector でヒットテスト領域だけ拡張
  • レイアウトスペースは発生しないため、UIは元の見た目のまま

設定「狭い」を選んだ場合

_touchPadding <= 0 の場合は従来通りの GestureDetector 単体に戻り、完全に元の見た目になります。

リリース: https://github.com/krasherjoe/h1-c2/releases/tag/v1.4.402

動作確認をお願いします。

## v1.4.402 でUI崩れを修正 comment-58 の報告通り、Padding方式だと視覚的スペースが発生してUIがスカスカになっていました。私の説明「タブの見た目は変わらない」は間違いでした。申し訳ありません。 ### 原因 `Padding` ウィジェットは透明でもレイアウト上のスペースを占有するため、タブバーの高さが固定されていないと上下に隙間ができました。 ### 修正 `Padding` 方式を廃止し、`Stack` + `Positioned` 方式に変更しました: - 視覚要素(タブピル)は元の36pxサイズのまま中央に配置 - `Positioned.fill` の `GestureDetector` でヒットテスト領域だけ拡張 - レイアウトスペースは発生しないため、UIは元の見た目のまま ### 設定「狭い」を選んだ場合 `_touchPadding <= 0` の場合は従来通りの `GestureDetector` 単体に戻り、完全に元の見た目になります。 **リリース**: https://github.com/krasherjoe/h1-c2/releases/tag/v1.4.402 動作確認をお願いします。
Author
Owner

#9 (comment)
タブのセンスが全く出来なくなった
ホームだけが辛うじてセンスする

https://git.cyberius.biz/joe/h1-c2/issues/9#issuecomment-61 タブのセンスが全く出来なくなった ホームだけが辛うじてセンスする
Author
Owner

v1.4.403 でタップ反応不良を修正

comment-62 の報告通り、タブのタップが効かなくなっていました。

原因

Stack 内で GestureDetector(Positioned.fill)を視覚要素より背面に配置したため、前面の視覚要素がヒットテストをブロックしてタップ反応しませんでした。ホームだけ辛うじて反応したのは、ホームの視覚要素が Icon 単体(ヒットテスト領域が狭い)だったためです。

修正

  • GestureDetector を視覚要素より前面に配置
  • HitTestBehavior.translucent に変更(前面のGestureDetectorがタップを取得しつつ、視覚要素も描画される)

リリース: https://github.com/krasherjoe/h1-c2/releases/tag/v1.4.403

動作確認をお願いします。

## v1.4.403 でタップ反応不良を修正 comment-62 の報告通り、タブのタップが効かなくなっていました。 ### 原因 `Stack` 内で `GestureDetector`(`Positioned.fill`)を視覚要素より**背面**に配置したため、前面の視覚要素がヒットテストをブロックしてタップ反応しませんでした。ホームだけ辛うじて反応したのは、ホームの視覚要素が `Icon` 単体(ヒットテスト領域が狭い)だったためです。 ### 修正 - `GestureDetector` を視覚要素より**前面**に配置 - `HitTestBehavior.translucent` に変更(前面のGestureDetectorがタップを取得しつつ、視覚要素も描画される) **リリース**: https://github.com/krasherjoe/h1-c2/releases/tag/v1.4.403 動作確認をお願いします。
joe closed this issue 2026-08-23 22:18:29 +00:00
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
joe/h1-c2#9
No description provided.