MakeXYZ Fun

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

Admin -

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 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 cho hình ảnh khi chạm vào trong SwiftUI.

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

  1. Tạo biến scale:
    • Khai báo biến @State private var scale = 1.0 để lưu giá trị tỉ lệ (scale) của hình ảnh. Ban đầu, scale bằng 1.0 (kích thước gốc).
  2. Sử dụng scaleEffect modifier:
    • Thêm modifier .scaleEffect(scale) vào Image view. Modifier này cho phép thay đổi kích thước của view bằng cách nhân với giá trị scale.
  3. Thử nghiệm với scaleEffect:
    • Trong onTapGesture, thử tăng giá trị scale lên 0.1 mỗi khi chạm vào. Điều này làm hình ảnh lớn dần lên, nhưng hiệu ứng chưa được mượt mà.
  4. Sử dụng animation modifier:
    • Thêm modifier .animation(.default, value: scale) sau onTapGesture. Điều này giúp tạo animation khi giá trị scale thay đổi. Tuy nhiên, hiệu ứng mặc định không phải là nảy.
  5. Sử dụng animation .spring():
    • Thay .default bằng .spring() trong animation modifier để có hiệu ứng nảy. Tuy nhiên, mặc định hiệu ứng nảy có vẻ chưa rõ ràng.
  6. Tùy chỉnh animation .spring():
    • Thêm các tham số response và dampingFraction vào .spring() để tùy chỉnh tốc độ và độ nảy của animation.
      • response: Tốc độ của spring (giá trị càng lớn, tốc độ càng chậm).
      • dampingFraction: Độ nảy của spring (giá trị càng nhỏ, độ nảy càng cao).
    • Thử nghiệm với các giá trị khác nhau để đạt được hiệu ứng mong muốn.
  7. Sử dụng withAnimation:

    • Xóa animation modifier .animation

    • Tạo biến @State private var animateImage = true để theo dõi trạng thái hình ảnh (scale 1.0 hoặc 0.9)

    • Sửa đổi scaleEffect với toán tử 3 ngôi: .scaleEffect(animateImage ? 1.0 : 0.9). Nếu animateImage là true, scale là 1.0 (100%), ngược lại là 0.9 (90%).

    • Trong onTapGesture,

      • Đặt animateImage = false để thu nhỏ hình ảnh xuống 90% ngay lập tức.
      • Sử dụng withAnimation với animation .spring() để đưa hình trở lại 100% kích thước bằng animation nảy.
        • Bên trong withAnimation đặt animateImage = true;.

    • Thử nghiệm và cảm nhận sự thay đổi.

      Giải thích: Khi chạm vào hình, hình ảnh sẽ thu nhỏ về 90% ngay lập tức, sau đó withAnimation sẽ thực hiện chuyển đổi về 100% với hiệu ứng nảy, tạo hiệu ứng đẹp mắt.


Chúc bạn luôn học tập hiệu quả!