[Video Summary] Ch. 4.6 Flip a Text View & More using withAnimation in SwiftUI (2025)

Mô tả nhanh

Video này trình bày cách tạo hiệu ứng lật chữ (text flip animation) trong SwiftUI bằng cách sử dụng withAnimation kết hợp với rotation3DEffect. Ngoài ra, video cũng giới thiệu một số kỹ thuật animation khác như scale và fade.

Video

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

Mô tả chi tiết

Video này hướng dẫn cách tạo hiệu ứng lật chữ (text flip animation) trong SwiftUI bằng cách sử dụng withAnimation và rotation3DEffect, đồng thời giới thiệu thêm các kỹ thuật animation khác như scale và fade.

Dưới đây là các bước chi tiết để thực hiện:

1. Tạo hiệu ứng fade đơn giản (Basic Animation):

• Sử dụng .animation modifier để tạo hiệu ứng fade in cho text view khi giá trị thay đổi.
• Sử dụng tham số value để chỉ định biến nào sẽ kích hoạt animation (ví dụ: resultMessage).
• Vấn đề: Nếu giá trị không thay đổi (ví dụ: tung xúc xắc ra cùng một số), animation sẽ không chạy.

2. Tạo animation trigger:

• Tạo một biến @State mới kiểu Bool (ví dụ: animationTrigger) và khởi tạo giá trị ban đầu là false.
• Trong action của button, sử dụng .toggle() để đảo ngược giá trị của animationTrigger mỗi khi button được nhấn. Điều này đảm bảo animation luôn chạy, ngay cả khi giá trị không thay đổi.
• Thay đổi giá trị value trong .animation modifier thành animationTrigger.

3. Tạo hiệu ứng pulse (sử dụng onChange modifier và withAnimation):

• Xóa .animation modifier cũ.
• Sử dụng .onChange modifier để theo dõi sự thay đổi của animationTrigger.
• Tạo một biến @State khác kiểu Bool (ví dụ: isDoneAnimating) và khởi tạo là true (vì khi bắt đầu app thì chưa có animation).
• Trong block của .onChange, đặt isDoneAnimating thành false (bắt đầu animation).
• Sử dụng withAnimation để tạo animation:
  • Đặt isDoneAnimating thành true bên trong withAnimation.
  • Sử dụng .scaleEffect và .opacity modifiers với ternary operator để thay đổi kích thước và độ trong suốt của text view dựa trên giá trị của isDoneAnimating.
  • Sử dụng .spring animation để tạo hiệu ứng nảy.

4. Tạo hiệu ứng lật (Flip Effect):

• Comment hoặc xóa các modifier .scaleEffect và .opacity đã tạo ở bước trước.
• Sử dụng modifier .rotation3DEffect:
  • angle: Sử dụng ternary operator để xác định góc quay dựa trên isDoneAnimating. Nếu true, quay 360 độ; nếu false, quay 0 độ.
  • axis: Đặt trục X là 1, trục Y và Z là 0 để xoay quanh trục ngang.

5. Sử dụng Interpolating Spring:

• Thay thế .spring bằng .interpolatingSpring.
• Sử dụng các tham số như duration và bounce để điều chỉnh hiệu ứng nảy.

<Lời chúc>
Chúc bạn thành công với những animation SwiftUI tuyệt vời!