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