🌊
Fragment #5 – 波紋と矢印で表現する「生成の間」
はじめに
Fragment の中で大事にしたかったのが、
「ピースを選んだあと、Fragment が静かに生まれる」という体験です。
今回はその“生成の間”を表現するために作った
波紋のアニメーションと矢印演出の実装記録です。
デザインの方向性
- 左上から波紋が広がるような動き
- やさしいブラーとフェードアウト
- 最後に矢印がふわっと浮かび上がる
動画デモ
技術的な実装ポイント
💧 ripple アニメーション
波紋は Animated.View を使って、スケーリング（拡大）と位置移動（translateXY）を同時に行いました。
その中で特にこだわったのは、波紋の始点を画面の左上寄りにすることです。
これは「Fragment は静かで孤独な空間の端から、じわりと生まれて広がっていく」という感覚を表現したかったからです。
画面の中心から出すよりも、少し意外な場所から始まることで「始まりの余白」を感じられるようにしました。
また、expo-blur を重ねてブラー（ぼかし）を加えることで、より柔らかく空間に馴染むような演出に。
ただし expo-blur では粒度の細かさまでは制御できないため、shadow スタイルとの併用で、視覚的に自然な見た目になるよう工夫しています。
🕊️ 矢印の表示
- useRef(new Animated.Value(0)) を使って
- 生成完了後に opacity をふわっと 1 へ
- position: absolute; bottom: 24 で指の届きやすい位置に配置
🫧 BlurView でやさしさを足す
当初は intensity: 60 で入れていたけど、強すぎて Fragment の雰囲気に合わなかった。
最終的に intensity: 15, tint: dark に落ち着いたことで、光がにじむような演出になった。
🧠 ハマりポイントと学び
-
Animated.Viewにposition: absoluteを渡してなかったので矢印が中央に固定されていた -
StyleSheet.create内では動的な値（selectedColor）は使えない - ripple の拡大と位置移動を
Animated.parallelで組み合わせると自然な演出になった - Ripple の始点が中央になってしまって違和感
- position: absolute が効かない → Animated.View 側に渡す必要ががあった
- Blur が強すぎて違和感 → intensity: 15 くらいが自然だった
苦労した点・工夫した点
- 円と矢印の位置を調整するのに手間取った
- 「静かに生まれる」感じが実現できた
- 自分でも見ていて落ち着く演出になった
次にやりたいこと
- 「Fragment」の生成結果を表示する画面の実装
Discussion