MakeXYZ Fun

[Video Summary] Ch. 2.7 Timing Code Execution with DispatchQueue asyncAfter, adding Animation & Sound to WordGarden

Admin -

Mô tả nhanh

Video này hướng dẫn cách thêm hiệu ứng animation và âm thanh vào ứng dụng Word Garden, đồng thời sử dụng DispatchQueue asyncAfter để thực thi code sau một khoảng thời gian nhất định, tạo hiệu ứng lá héo và âm thanh tương ứng khi người chơi đoán sai.

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 animation và âm thanh vào ứng dụng Word Garden, đồng thời sử dụng DispatchQueue asyncAfter để thực thi code sau một khoảng thời gian nhất định, tạo hiệu ứng lá héo và âm thanh tương ứng khi người chơi đoán sai.

Các bước chính:

  1. Thêm animation cho ImageView:
    • Sử dụng modifier .animation sau ImageView.
    • Chọn .easeIn(duration:) để tạo hiệu ứng mờ dần (fade in) cho ảnh.
    • Gán imageName làm giá trị để kích hoạt animation khi imageName thay đổi.
    • Ban đầu, đặt duration là 3 giây để dễ quan sát, sau đó giảm xuống 0.75 giây.
  2. Hiển thị ảnh "wilt" khi đoán sai:
    • Trong hàm updateGameplay(), khi phát hiện người chơi đoán sai (sử dụng !wordToGuess.contains(guessLetter)), thay đổi imageName thành ảnh "wilt".
    • Để xảy ra animation "wilt" trước khi ảnh hoa hiện ra, cần sử dụng DispatchQueue.main.asyncAfter(deadline:).
  3. Sử dụng DispatchQueue.main.asyncAfter:
    • Gọi DispatchQueue.main.asyncAfter(deadline: .now() + 0.75) để trì hoãn việc cập nhật ảnh hoa sau 0.75 giây (bằng thời gian animation lá héo).
    • Trong closure của asyncAfter, cập nhật imageName thành ảnh hoa.
  4. Thêm âm thanh:
    • Import AVFAudio để có thể chơi âm thanh.
    • Khai báo một biến audioPlayer kiểu AVAudioPlayer? làm state variable.
    • Copy hàm playSound(soundName:) từ ứng dụng "You Are Awesome" và paste vào project Word Garden.
    • Gọi playSound("incorrect") khi người chơi đoán sai, playSound("correct") khi đoán đúng.
    • Gọi playSound("word-guest") khi đoán đúng cả từ, playSound("word-not-guest") khi hết lượt đoán từ mà không đoán ra.
  5. Hoàn thiện và chạy thử:
    • Chạy ứng dụng và kiểm tra các hiệu ứng âm thanh, animation trên simulator hoặc thiết bị thật

Các điểm quan trọng:

  • DispatchQueue.main.asyncAfter được sử dụng để trì hoãn việc thực thi code sau một khoảng thời gian xác định.
  • Việc sử dụng AVFAudio giúp thêm âm thanh vào ứng dụng một cách dễ dàng.
  • Animation và âm thanh làm tăng tính hấp dẫn cho ứng dụng.

Chúc bạn thành công với việc hoàn thiện ứng dụng Word Garden của mình!