[Video Summary] Ch. 1.10 .minimumScaleFactor and the SwiftUI animation modifier (2025)

Mô tả nhanh

Video này hướng dẫn cách sử dụng minimumScaleFactor để điều chỉnh kích thước chữ trong SwiftUI và làm quen với hiệu ứng animation cơ bản.

Video

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

Mô tả chi tiết

Video này hướng dẫn cách sử dụng minimumScaleFactor để điều chỉnh kích thước chữ trong SwiftUI và làm quen với hiệu ứng animation cơ bản.

Các bước thực hiện trong video:

1. Sắp xếp lại giao diện:
   • Loại bỏ Spacer ở trên cùng và đưa TextView lên trên ImageView trong VStack.
2. Sử dụng frame modifier:
   • Thêm frame(height: 130) vào TextView để cố định chiều cao của khung chứa text.
3. Sử dụng minimumScaleFactor:
   • Thêm modifier .minimumScaleFactor(0.5) vào TextView để đảm bảo chữ không bị tràn ra ngoài khung khi quá dài, nó chỉ cho phép scale text tối thiểu 50%.
4. Tìm hiểu về animation modifier:
   • Thêm modifier .animation(.default, value: imageName) vào ImageView để tạo hiệu ứng chuyển tiếp khi thay đổi hình ảnh.
   • Các loại animation:
     • .default: Hiệu ứng fade in/out nhẹ nhàng (ease in/out).
     • .linear: Hiệu ứng fade in/out với tốc độ đều.
     • .bouncy: Hiệu ứng nảy nhẹ khi chuyển tiếp. Có thể tùy chỉnh thêm bằng duration và extraBounce. (Lưu ý: extraBounce nên dưới 0.2 để tránh làm biến dạng ảnh).
5. Áp dụng animation cho TextView:
   • Thêm .animation(.easeInOUt(duration: 0.15), value: message) vào TextView để tạo hiệu ứng chuyển tiếp khi thay đổi text. Có thể tùy chỉnh duration để animation nhanh hơn.
6. Tổng kết:
   • Tìm hiểu về minimumScaleFactor để thu nhỏ text vừa khung (không nên nhỏ hơn 0.5).
   • Làm quen với animation modifier và các kiểu animation cơ bản (default, linear, bouncy, easeInOut với duration).
   • Sử dụng animation một cách tinh tế để cải thiện trải nghiệm người dùng.

Chúc bạn có những trải nghiệm thú vị với SwiftUI!