[Video Summary] Ch. 3.2 using scaleEffect, spring, and withAnimation to animate Bip The Guy in SwiftUI (2025)

Mô tả nhanh

Video này hướng dẫn cách sử dụng scaleEffect, spring và withAnimation để tạo hiệu ứng nảy (bounce) cho hình ảnh khi chạm vào trong SwiftUI.

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 scaleEffect, spring và withAnimation để tạo hiệu ứng nảy (bounce) cho hình ảnh khi chạm vào trong SwiftUI.

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

1. Giới thiệu scaleEffect:

   • scaleEffect là một modifier cho phép thay đổi kích thước của một view.
   • Tạo một biến state để lưu trữ giá trị scale: @State private var scale = 1.0.
   • Thêm modifier .scaleEffect(scale) vào Image View.

2. Thử nghiệm tăng scale khi chạm:

   • Thêm scale = scale + 0.1 vào bên trong onTapGesture.
   • Khi chạy, hình ảnh sẽ tăng kích thước lên 10% mỗi khi chạm.

3. Sử dụng animation modifier:

   • Thêm .animation(.default, value: scale) sau .onTapGesture.
   • Hiệu ứng mặc định là ease in out.

4. Sử dụng spring animation:

   • Thay .default bằng .spring().
   • .spring() có các tham số như response (tốc độ) và dampingFraction (độ nảy).
   • Ví dụ: .spring(response: 0.3, dampingFraction: 0.3).

5. Sử dụng withAnimation để tạo hiệu ứng nảy mà không thay đổi scale:

   • Xóa .animation modifier.
   • Tạo một state variable mới: @State private var isFullSize = true.
   • Trong scaleEffect, sử dụng toán tử ternary: isFullSize ? 1.0 : 0.9.

6. Thực hiện hiệu ứng nảy khi chạm:

   • Trong onTapGesture, đặt isFullSize = false để giảm kích thước xuống 90% ngay lập tức.
   • Sử dụng withAnimation(.spring(response: 0.3, dampingFraction: 0.3)) { isFullSize = true } để trả lại kích thước ban đầu với hiệu ứng spring.

Lời chúc

Chúc mừng bạn đã tạo được hiệu ứng nảy đẹp mắt cho hình ảnh trong ứng dụng SwiftUI của mình! Hãy tiếp tục khám phá và sáng tạo!