🤔 왜 지금 애니메이션이 딱딱하게 보이고, fade-in/fade-out이 안 보이는지, 그리고 정확한 해결 방법까지 아주 명확히 설명

🚨 지금 fade-in/out 이 안 보이는 진짜 이유

현재 너가 하고 있는 코드는 이렇게 돼 있어:

UIView.animate(withDuration: 0.25) {
    collectionView.performBatchUpdates(nil)

    DispatchQueue.main.async {
        self.emotionCollectionView.reloadData()
    }
}

 

⚠️ 하지만 이 코드 안의 모든 작업은 '애니메이션 블록과 전혀 상관없음'
왜냐하면:

• performBatchUpdates 내부 애니메이션은 UIKit이 실행하는 고정된 애니메이션 방식
• reloadData()는 셀 전체를 즉시 재생성 -> 애니메이션 불가능

즉,
셀 내부에서 alpha를 어떻게 바꾸든…

❌ reloadData()가 새 셀을 새로 만들어버리니까 fade 효과 자체가 사라지는 거야.

그래서 부드러운 애니메이션이 없어지고 "딱!" 하고 바뀌는 것처럼 보임.

 

🔥 해결 원칙 (중요)

✔ 1) reloadData() 하면 절대 애니메이션 안 됨

→ reload가 아니라 "해당 셀만 업데이트" 해야 함.

✔ 2) alpha 변화 애니메이션은 셀 내부에서 실행해야 함

→ expand/collapse 상태를 부드럽게 전환하려면 configure 안에서 처리해야 함.

✔ 3) 높이 변화(레이아웃 변경)는 부모 컬렉션뷰가 애니메이션 해야 함

→ performBatchUpdates로 해결.

즉,

"레이아웃 변화" = EmotionStepCell 에서

"fade-in/out" = EmotionCategoryCell 내부 configure()에서

이 두 가지가 같이 맞물려야 부드럽게 동작한다!

 

🛠 현재 문제 원인 정리

현재 코드는 이렇게 되어 있음:

UIView.animate(withDuration: 0.25) {
    collectionView.performBatchUpdates(nil)
    DispatchQueue.main.async {
        self.emotionCollectionView.reloadData()
    }
}

 

여기서 reloadData()가 모든 애니메이션을 죽임
그리고 performBatchUpdates 안에서도 alpha 애니메이션이 실행되지 않음.

 

💡 정답 구조: 이렇게 해야 모두 부드럽게 동작한다

① EmotionStepCell (상위) — 레이아웃 변경만 애니메이션

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {

    let category = categories[indexPath.item]

    if expandedCategory == category {
        expandedCategory = nil
    } else {
        expandedCategory = category
    }

    // 레이아웃 변화 애니메이션
    collectionView.performBatchUpdates(nil)

    // 선택된 셀만 부드럽게 업데이트
    if let cell = collectionView.cellForItem(at: indexPath) as? EmotionCategoryCell {
        cell.animateToggle(expanded: expandedCategory == category)
    }
}

 

② EmotionCategoryCell — fade-in/out 전담

EmotionCategoryCell 안에 새로운 메서드를 추가해:

func animateToggle(expanded: Bool) {
    UIView.animate(withDuration: 0.25) {
        self.baseContainer.alpha = expanded ? 0 : 1
        self.subContainer.alpha = expanded ? 1 : 0
    }
}

 

그리고 configure에서는 상태 설정만 해:

func configure(category: ... ) {
    baseContainer.alpha = expanded ? 0 : 1
    subContainer.alpha = expanded ? 1 : 0
}

 

🎯 이렇게 해야 효과가 완벽하게 구현된다

performBatchUpdates

→ 셀 높이 변화만 자연스럽게 애니메이션됨

animateToggle

→ alpha 전환(fade-in/out)은 셀 내부에서 안전하게 애니메이션됨

reloadData() X

→ fade 애니메이션이 사라지는 원흉 → 절대 사용하면 안 됨

 

📌 즉, 지금 코드에서 수정할 핵심은 딱 2가지

✔ 1) reloadData() 삭제

이미 애니메이션을 모두 죽이는 코드임

✔ 2) EmotionCategoryCell 내부에 animateToggle 추가

config + animate를 분리해야 애니메이션이 제대로 먹힘

 

✨ 최종 완성 동작 흐름 (아주 자연스럽게 보임)

1. 셀을 클릭
2. expandedCategory 변경
3. StepCell → performBatchUpdates로 높이 변화 부드럽게
4. 선택된 EmotionCategoryCell만 → animateToggle 실행
5. 내부에서 alpha fade-in/out 실행
6. 자연스러운 감정 확장/축소 완성!