LightProgress Animation

Tram Ho

Hôm nay, chúng ta sẽ tìm hiểu custom một view được thiết kế bởi Oleg Frolov trên Dribble.

Mathematics things…

Đầu tiên chúng ta cần phải xác định được trục cho Light animation. Như các bạn thấy thì nó nằm ở giữa dấu chấm của từ ” i ”. Ta sẽ thực hiện animation này với text “Loading” và bây giờ chúng ta sẽ tính toán để tìm được tọa độ đó:

  1. Tính chiều rộng của text (w1) với từ ” i ” (Loadi)
  2. Tính chiều rộng của text (w2) khi không có từ ” i ” (Load)
  3. Tính chiều rộng của từ ” i ” (w3) với dấu cách 2 bên của từ, w3 = w1 – w2
  4. Tính tọa độ pivotX: pivotX = w1 – w3 / 2
  5. Tính chiều rộng của từ ” i ” (w4) khi không có dấu cách. Giả sử w4 = đường kính của dấu chấm trên đầu từ i
  6. Tính tọa độ pivotY: pivotY = (-text.ascent – text.height + w4/2). Các bạn có thể tìm hiểu về ascent, descent,…

Mình đã thay chữ Light thành chữ Loading nhưng cách tính của chúng đều giống nhau.

Some drawing

Để vẽ được được đường đèn sáng màu trắng, chúng ta cần phải tính được cấu trúc hình thang.

Let’s light it up

Bây giờ chúng ta cần chạy animation:

  • Tạo một animator object:

  • Cập nhật góc độ và invalidate view

  • Chạy animation:

=> Không phải thứ ta muốn?

Android PorterDuff.Mode

Chúng ta sẽ sử dụng PorterDuff.Mode để đạt được kết quả như sau:

Code…

  • LightProgress.kt

  • CustomSpringInterpolator.kt

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo