Implicit Animations

1. .animation Modifier


Circle()
    .fill(isOn ? .green : .red)
    .frame(width: isOn ? 100 : 50)
    .animation(.default, value: isOn)

2. Animation Types


.animation(.linear(duration: 0.5), value: state)
.animation(.easeIn(duration: 0.3), value: state)
.animation(.easeOut(duration: 0.3), value: state)
.animation(.easeInOut(duration: 0.3), value: state)
.animation(.spring(), value: state)
.animation(.spring(response: 0.5, dampingFraction: 0.6), value: state)
.animation(.bouncy, value: state)

3. Ví dụ


struct HeartButton: View {
    @State private var isLiked = false
    
    var body: some View {
        Image(systemName: isLiked ? "heart.fill" : "heart")
            .font(.largeTitle)
            .foregroundColor(isLiked ? .red : .gray)
            .scaleEffect(isLiked ? 1.2 : 1.0)
            .animation(.spring(response: 0.3, dampingFraction: 0.5), value: isLiked)
            .onTapGesture {
                isLiked.toggle()
            }
    }
}

📝 Tips

Luôn specify value: để control khi animate
Spring animation cho feel tự nhiên
Kết hợp nhiều properties được animate cùng lúc