# 40. UI Update Summary (Risky Attack Visual Effects) 39번 (Luck System) 이후 작업된 UI 및 시각 효과 관련 변경 사항 정리입니다. ## 1. Attack Animation & Visual Effects 공격 유형(Risk Level)에 따라 차별화된 애니메이션과 시각 효과를 구현했습니다. ### BattleAnimationWidget (`lib/widgets/battle/battle_animation_widget.dart`) `animateAttack` 메서드가 `RiskLevel`을 인자로 받아 각기 다른 동작을 수행합니다. - **Safe Attack**: - **동작**: 제자리에서 좌우로 살짝 흔들리는(Wobble) 애니메이션. - **느낌**: 신중함, 머뭇거림. - **구현**: `Curves.elasticIn`을 사용한 짧은 X축 이동 (200ms). - **Normal Attack**: - **동작**: 적에게 다가가서 가볍게 부딪히는(Dash) 애니메이션. - **느낌**: 일반적인 타격. - **구현**: 확대(Scale Up) 없이 `Curves.easeOutQuad`로 이동 후 복귀 (400ms). - **Risky Attack**: - **동작**: 몸을 크게 부풀린 후(Scale Up) 강하게 돌진(Heavy Dash). - **느낌**: 강력한 한 방, 높은 리스크. - **구현**: 1.2배 확대(600ms) -> `Curves.easeInExpo` 가속 돌진(500ms) -> 타격 -> 복귀. ### ExplosionWidget (`lib/widgets/battle/explosion_widget.dart`) [NEW] - **기능**: 타격 지점에서 파편(Particle)이 사방으로 튀는 효과. - **구현**: `CustomPainter`를 사용하여 다수의 파티클을 효율적으로 렌더링. - **트리거**: **Risky Attack** 적중 시에만 발동. ### ShakeWidget (`lib/widgets/battle/shake_widget.dart`) - **기능**: 화면(또는 위젯)을 흔드는 효과. - **적용**: **Risky Attack** 타격 시에만 발동. ## 2. BattleScreen Integration (`lib/screens/battle_screen.dart`) - `BattleAnimationWidget`, `ExplosionWidget`, `ShakeWidget`을 조합하여 전투 연출 구성. - `_addFloatingEffect`에서 공격 이벤트 수신 시 `RiskLevel`에 따라 적절한 애니메이션 메서드 호출. - **Risky Attack**의 경우: `Scale Up` -> `Dash` -> `Impact` (Shake + Explosion) -> `Return`의 시퀀스로 동작. - **Timing Sync**: 데미지 텍스트 표시 타이밍을 애니메이션 타격 시점(Safe: 200ms, Normal: 400ms, Risky: 1100ms)에 맞게 조정. - **Icon-Only Animation**: 공격 시 전체 카드가 아닌 **캐릭터 아이콘만** 적에게 날아가도록 변경. - **Hide Stats**: 공격 애니메이션 진행 중에는 HP, Armor 등 스탯 정보를 숨겨 시각적 혼란 방지. ## 3. 기타 UI 개선 - **Floating Effects**: 데미지 텍스트 및 이펙트 아이콘 위치 조정. - **Risk Level Selection**: 다이얼로그 UI 개선. - **CharacterStatusCard**: 애니메이션 키(`animationKey`)와 스탯 숨김(`hideStats`) 속성 추가.