🌕
Fragment #6 – 完成したFragmentをそっと届ける UI
はじめに
この画面では、ユーザーが選んだ言葉・色・音から生まれた Fragment を
「静かに」「押しつけず」「美しく」届けることを目指しました。
デザインの方向性
- 白い円が左上から静かに広がって、やがて消える
- 画面の中央に選ばれた言葉がそっと現れる
- 全体の背景色は選ばれた色に応じて変化する
動画デモ
技術的な実装ポイント
- Ripple は
Animated.Viewとopacityの組み合わせで表現 -
react-native-reanimatedを検討したが、導入コストと世界観のバランスから断念 - 代わりに
opacityとsetTimeoutを活用して視覚的に「溶ける」演出を再現 - Text と戻る矢印は
fade + scaleアニメーションで“浮かび上がる”ように表示
苦労した点・工夫した点
- Ripple の位置を中央に保ちつつ、動的なサイズ変化とアニメーションを共存させること
-
opacityのみで「色が背景に溶けるように見せる」には微調整が必要だった - 戻るボタンが他の要素に影響を受けてしまい、表示位置の調整に苦戦した
次にやること
- Fragment として出力される内容（色・音・言葉の融合）の設計
- 選んだピースからカテゴリを判断しランダムに「Fragment」を生成
- 拡張性や保守性を意識したリファクタリング
Discussion