[Video Summary] Ch. 2.8 Timing Code Execution w/DispatchQueue asyncAfter, adding Animation & Sound in SwiftUI (2025)

Mô tả nhanh

Video này hướng dẫn cách thêm hiệu ứng âm thanh và hình ảnh động vào ứng dụng Word Garden bằng Swift và SwiftUI. Cụ thể, video sẽ hướng dẫn cách sử dụng DispatchQueue.asyncAfter để hẹn giờ thực thi code, giúp tạo hiệu ứng lá úa trước khi chuyển sang hình ảnh hoa mới.

Video

Click vào hình dưới để mở:

Mô tả chi tiết

Video này hướng dẫn cách thêm hiệu ứng âm thanh và hình ảnh động vào ứng dụng Word Garden bằng Swift và SwiftUI, sử dụng DispatchQueue.asyncAfter để hẹn giờ thực thi code.

Dưới đây là các bước chi tiết:

1. Thêm Animation:

   • Sử dụng .animation modifier sau image view để tạo hiệu ứng.
   • Chọn animation kiểu easeIn(duration: 0.75) để tạo hiệu ứng mờ dần trong 0.75 giây.
   • Giá trị kích hoạt animation là imageName.

2. Hiển thị hình ảnh "wilt" (lá úa):

   • Trong hàm updateGameplay, khi đoán sai, thay đổi imageName thành "wilt" trước khi chuyển sang hình ảnh hoa.
   • Sử dụng DispatchQueue.main.asyncAfter để trì hoãn việc chuyển đổi sang hình ảnh hoa sau 0.75 giây (thời gian animation của lá úa).
     • Cú pháp:

DispatchQueue.main.asyncAfter(deadline: .now() + 0.75) {
   // Code để thay đổi image name thành flower
}

3. Thêm âm thanh:
   • Import AVFAudio.
   • Tạo biến audioPlayer kiểu AVAudioPlayer? (optional).
   • Copy hàm playSound từ ứng dụng "You Are Awesome" và paste vào project.
   • Gọi playSound("incorrect") khi đoán sai chữ cái (sau khi set imageName thành "wilt").
   • Gọi playSound("correct") khi đoán đúng chữ cái.
   • Gọi playSound("word-guessed") khi đoán đúng cả từ.
   • Gọi playSound("word-not-guessed") khi hết lượt đoán mà chưa đoán ra từ.

Lời chúc

Chúc mừng bạn đã hoàn thành việc thêm animation và âm thanh vào ứng dụng Word Garden! Hãy tiếp tục khám phá và xây dựng những ứng dụng tuyệt vời hơn nữa!