애니메이션 관리 문제

[salgilbarana]

안녕하세요 Gus 입니다. C2챌린지간 간단한 앱을 만들었는데요

이미지를 좌우로 rowing하는 애니메이션을 만들었는데 swiftData의 Mission 모델의 hasBeenDone이 false -> true
업데이트 되면 이미지가 애니메이션이 멈추고 일직선으로 서있어야하는데,

문제는

1. 애니메이션이 멈추지 않거나 ,
2. 애니메이션이 한쪽으로만 동작한다던가,
3. 좌나 우로 틀어진 상태로 멈추거나,
4. 설정한 값이상으로 좌우 rowing 오버한 동작이 생기더라고요

https://github.com/user-attachments/assets/d33a15d2-5095-4998-a142-05057b84aa9e
Uploading Simulator Screen Recording - iPhone 16 - 2025-04-27 at 23.38.53.mp4…

해당 문제를 해결 방법을 아시는분 계실까요?

일단 임시방편으로

1. onAppear와 onDisappear에서 rotatingIDs를 추가와 삭제
2. switfData 업데이트시 gridID = UUID()로 LazyVGrid 부분 강제 refresh

import SwiftUI
import SwiftData
import Combine

struct VMView: View {
    @Query var missions: [Mission]
    @Environment(\.modelContext) private var modelContext
    
    @State private var showModal = false
    @State private var selectedMission: Mission?
    
    @State private var offsetX: CGFloat = -30
    @State private var colorIndex: Int = 0
    
    @State private var rotatingIDs: Set<UUID> = []
    @State private var timer = Timer.publish(every: 0.5, on: .main, in: .common) // 뷰가 사라져도 작동되지 않도록 메모리누수 방지를 위해
    @State private var timerSubscription: Cancellable?
    
    // 편집모드를 위한 상태관리
    @State private var editMode = false
    @State private var deletedMissions: [Mission] = []
    
    // LazyVGrid의 refresh를 위한 상태변수
    @State private var gridID: UUID = UUID()
    
    let colors: [Color] = [.red, .orange, .yellow, .green, .blue, .indigo, .purple]
    private let columns = Array(repeating: GridItem(.fixed(50), spacing: 20), count: 4)
    
    var body: some View {
        
        VStack{
            VStack {
                Text("버디 버디 자판기")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .foregroundColor(colors[colorIndex])
                    .offset(x: offsetX)
                    .onAppear {
                        // 좌우로 움직이는 애니메이션
                        withAnimation(Animation.easeInOut(duration: 1.5).repeatForever(autoreverses: true)) {
                            offsetX = 30
                        }
                    }.onReceive(timer) { _ in
                        colorIndex = (colorIndex + 1) % colors.count
                    }
            }
            .onAppear{
                timerSubscription = timer.connect()
            }
            
            GeometryReader {geo in
                ZStack(alignment: .topLeading){
                 
                    Image("VendingMachine")    // Assets에 등록한 이미지 이름
                        .resizable()
                        .frame(width: geo.size.width)
                    LazyVGrid(columns: columns, spacing: 10) {
                        ForEach(missions.prefix(16)) { item in
                            Button(action: {
                                selectedMission = item
                                showModal = true
                            }) {
                                Image(item.friend.beverage)
                                    .resizable()
                                    .scaledToFit()
                                    .frame(width: 50, height: 100)
                                    .cornerRadius(8)
                                    .rotationEffect(item.hasBeenDone ? .degrees(0) :  // !!! 문제의 애니메이션 scope!!!
                                            .degrees(rotatingIDs.contains(item.id) ? 10 : -10)) // 좌우 흔들리는 애니메이션
                                    .animation(
                                        Animation.linear(duration: 0.1).repeatForever(autoreverses: true) , // 애니메이션 반복
                                        value: rotatingIDs
                                    )
                                    .onAppear {
                                        if !item.hasBeenDone {
                                            rotatingIDs.insert(item.id)
                                        }
                                    }
                                    .onDisappear {
                                        rotatingIDs.remove(item.id)
                                    }
                            }
                            .contextMenu{
                                Button(role: .destructive) {
                                    deleteMission(item)
                                } label: {
                                    Label("삭제", systemImage: "trash")
                                }
                            }
                        }
                    }.id(gridID) // grid uuid
                        .padding(.trailing, 60)
                        .padding(.top, 16)
                }
                .sheet(item: $selectedMission) { mission in
                    MissionModalView(mission: mission) { // 확인 코드가 맞으면 콜백 함수 동작
                        
                        mission.hasBeenDone = true
                            try? modelContext.save()
                            gridID = UUID()
                    }
                }

[dyyeom]

Gus 안녕하세요! 영상이 있으면 이해하는데 더 도움이 될 것 같아요!

[salgilbarana]

업로드 했습니다. 감사합니다 ~~

[moonkey48]

안녕하세요 Gus! 2기 오스틴입니다:)

rotationEffect에서 Angle을 적용해주는 부분에서 문제가 있는 것 같습니다.
로직에서는 문제가 없어보이는데, SwiftUI 내부에서 동작 과정에서 생기는 에러이거나 roatationEffect에 Angle을 설정하는 과정은 init 단계에서만 이뤄지는 것인지,,어렵네요..!

일단 위에 문제는 rotationEffect에 Angle을 직접 설장하는 것이 아닌 Angle의 degree를 변경시켜주면 정상적으로 동작하는 것 같습니다.

// .rotationEffect(item.hasBeenDone ? .degrees(0) : .degrees(rotatingIDs.contains(item.id) ? 10 : -10))
.rotationEffect(.degrees(mission.hasBeenDone ? 0 : animate ? 10 : -10))

.animation(_ animatino:Animatino, value: Equatable)에서 rotatingIDs animaion이 변경되는 조건으로 하셨는데 Set으로 사용하셔서 search 비용을 낮춘 것도 너무 좋은 접근인 것 같습니다. 저는 각 Item을 struct로 만들어서 이를 변경하는 State를 두는 것이 animation에 드는 insert, remove에 드는 코드 복잡성을 낮출 수 있을 것 같아서 아래와 같이 작성해보았습니다.

import SwiftUI
import SwiftData

@Model
class Mission: Identifiable {
    var id: UUID
    var hasBeenDone: Bool
    var name: String
    var password: String

    init(name: String, password: String) {
        self.id = UUID()
        self.hasBeenDone = false
        self.name = name
        self.password = password
    }
}

struct ContentView: View {
    @Query private var missions: [Mission]
    @Environment(\.modelContext) private var modelContext
    @State private var selectedMission: Mission?

    private let columns: [GridItem] = Array(repeating: GridItem(.fixed(100)), count: 2)

    var body: some View {
        NavigationStack {
            VStack {
                LazyVGrid(columns: columns){
                    ForEach(missions) { mission in
                        Button {
                            mission.hasBeenDone = true
                        } label: {
                            GridItemView(mission: mission)
                        }
                    }
                }
            }
            .toolbar {
                Button {
                    let newMission = Mission(name: "new Mission", password: "1234")
                    modelContext.insert(newMission)
                } label: {
                    Image(systemName: "plus")
                }
            }
        }
    }
    struct GridItemView: View {
        @State private var animate = false
        var mission: Mission
        var body: some View {
            Text(mission.name)
                .rotationEffect(.degrees(mission.hasBeenDone ? 0 : animate ? 10 : -10))
                .animation(
                    Animation.easeInOut(duration: 0.1)
                        .repeatForever(autoreverses: true),
                    value: animate
                )
                .onAppear {
                    animate.toggle()
                }
        }
    }
}

#Preview {
    ContentView()
        .modelContainer(for: Mission.self, inMemory: true)
}

[salgilbarana]

안녕하세요 오스틴 snl에서 뵜는데 :) 답변 감사합니다. 올려주신 코드로 한번 테스트 해봤는데 전보다는 확실히 좋아졌는데 텝바로 뷰전환이 되면 애니메이션이 좋아졌다 나빠졌다 간헐적으로 발생하네요... 아마 SwiftUI 문제이지 않을까 예상해봅니다. ㅠㅠ

ScreenRecording_04-28-2025.23-01-21_1.MP4

[Segyun]

안녕하세요! Lemon입니다.

불리언 변수 대신에 직접 각도로 변수를 만들면 잘 동작하는 것으로 보입니다.

2025-04-29.12.11.00.mov

import SwiftUI
import SwiftData

@Model
class Mission: Identifiable {
    var id: UUID
    var hasBeenDone: Bool
    var name: String
    var password: String
    
    init(name: String, password: String) {
        self.id = UUID()
        self.hasBeenDone = false
        self.name = name
        self.password = password
    }
}

struct ContentView: View {
    @Query private var missions: [Mission]
    @Environment(\.modelContext) private var modelContext
    @State private var selectedMission: Mission?
    
    private let columns: [GridItem] = Array(repeating: GridItem(.fixed(100)), count: 2)
    
    var body: some View {
        TabView { 
            Tab {
            NavigationStack {
                VStack {
                    LazyVGrid(columns: columns){
                        ForEach(missions) { mission in
                            Button {
                                mission.hasBeenDone = true
                            } label: {
                                GridItemView(mission: mission)
                            }
                        }
                    }
                }
                .toolbar {
                    Button {
                        let newMission = Mission(name: "new Mission", password: "1234")
                        modelContext.insert(newMission)
                    } label: {
                        Image(systemName: "plus")
                    }
                }
            }
            } label: {
                Text("A")
            }
            
            Tab {
                
            } label: {
                Text("B")
            }
        }
    }

    struct GridItemView: View {
        @State private var degree: CGFloat = -10

        var mission: Mission
        var body: some View {
            Text(mission.name)
                .rotationEffect(.degrees(mission.hasBeenDone ? 0 : degree))
                .onAppear {
                    withAnimation(.easeInOut(duration: 0.1).repeatForever(autoreverses: true)) { 
                        degree = 10
                    }
                }
        }
    }
}

#Preview {
    ContentView()
        .modelContainer(for: Mission.self, inMemory: true)
}

[salgilbarana]

안녕하세요 레몬 답변 감사합니다. 올려주신 코드로 테스트를 해봤는데 최초 생성시 애니메이션이 동작 안하는 문제 빼고는 다른 애니메이션은 잘 동작합니다.
어렵네요 ㅠㅠㅠ 전체코드를 Repository로 한번 올려볼까요?

Simulator.Screen.Recording.-.iPhone.16.-.2025-05-07.at.13.41.43.mp4

[Segyun]

네, 코드 공유해주시면 확인해보겠습니다!

[salgilbarana]

https://github.com/salgilbarana/BuddyVendingMachine.git 넘넘 감사합니다 ㅠㅠ

[Segyun]

탭 간 전환 시마다 .onAppear가 실행되어 문제가 발생한 것으로 보입니다.

탭 전환에서는 뷰가 완전히 사라지지 않기 때문에, @State 변수는 초기화되지 않아요.

그 결과, .onAppear가 반복적으로 호출되며 @State 값이 계속 변경되고, 이로 인해 애니메이션 오류가 발생한 것 같아요.

그래서 뷰가 처음 초기화되었는지를 확인하는 변수를 추가하여 문제를 해결했습니다.

Buddy.mp4

    struct GridItemView: View {
        @State private var isAnimated = false
        @State private var didAppear = false // 뷰가 처음 초기화되었는지 확인하는 변수
        
        var mission: Mission
        
        var body: some View {
            Image(mission.friend.beverage)
                .resizable()
                .scaledToFit()
                .frame(width: 50, height: 100)
                .cornerRadius(8)
                .rotationEffect(.degrees(mission.hasBeenDone ? 0 : isAnimated ? 10 : -10))
                .animation(
                    .easeInOut(duration: 0.1).repeatForever(autoreverses: true),
                    value: isAnimated
                )
                .onAppear {
                    if !didAppear { // 뷰가 처음 초기화되었을 때만 실행
                        isAnimated = true
                        didAppear = true
                    }
                }
        }

[salgilbarana]

와우!!!! 많이 배웠습니다 정말 감사합니다!!!