…
Xin chào các bạn, ở bài trước mình có giới thiệu cho các bạn về Animation Listener và Custom Animator với Lottie.
Trong bài này mình sẽ giới thiệu cho các bạn về cách điều chỉnh các thuộc tính động. Bạn có thể điều chỉnh các thuộc tính động trong thời gian đang chạy của nó. Một số mục đích như:
- Thay đổi chủ đề.
- Thay đổi kích thước và thời gian.
- Đáp ứng với những sự kiện lỗi hay thành công.
Nội dung bài bao gồm:
- Hiểu về After Effects để có thể vận dụng vào trong bài này.
- Cần có những gì để thay đổi?
- Cách thực hiện nó như thế nào?
Hiểu về After Effects
Để điều chỉnh các thuộc tính trong Lottie thì mình cần hiểu các thuộc tính đó.
Các thuộc tính này được kế thừa từ các thuộc tính trong After Effects. Trong After Effects, nó là tập hợp các Layer ứng với mỗi một thời gian. Đối tượng trong Layer bao gồm: tên, màu sắc, kích thước … Lottie có thể tìm thấy các đối tượng và thuộc tính bằng KeyPath.
Cần có những gì để thay đổi?
Để thay đổi thuộc tính trong thời gian chạy, bạn cần có:
- KeyPath
- LottieProperty
- LottieValueCallback
KeyPath
KeyPath được sử dụng với một nội dung cụ thể hoặc toàn bộ nội dung cần thay đổi. Nó được xác định bởi một danh sách các chuỗi tương ứng trong cấu trúc phân cấp của After Effects.
KeyPath bao gồm tên cụ thể của nội dung hoặc ký tự đại diện:
- Wildcard
*: sử dụng để phù hợp với nội dung duy nhất ở vị trí của nó trong KeyPath. - Globstar
**: sử dụng để phù hợp với không hoặc nhiều layer.
KeyPath resolution
KeyPath có khả năng lưu trữ một tham chiếu nội bộ đến nội dung mà họ quyết định. Khi bạn tạo một đối tượng KeyPath mới, nó sẽ không được quyết định. LottieDrawable và LottieAnimationView có một phương thức notifyKeyPath() lấy KeyPath và trả về một danh sách bằng 0 hoặc nhiều quyết định mà mỗi quyết định thành một phần nội dung bên trong. Điều này có thể được sử dụng để khám phá cấu trúc animation của bạn. Để làm như vậy, trong môi trường phát triển, new KeyPath("**") và ghi lại danh sách được trả về. Tuy nhiên, bạn không nên sử dụng ** với ValueCallback vì nó sẽ được áp dụng cho mọi phần nội dung trong animation của bạn. Nếu bạn quyết định KeyPath của mình và muốn thêm một giá trị callback, hãy sử dụng KeyPath được trả về từ phương thức đó vì chúng sẽ được giải quyết nội bộ và sẽ không phải tìm lại nội dung.
LottieProperty
LottieProperty là các thuộc tính có thể được set. Chúng tương ứng với giá trị trong After Effects.
Bạn có thể tham khảo các thuộc tính ở đây.
ValueCallback
ValueCallback được gọi mỗi khi animation hoạt động. Nó cung cấp:
- Khung bắt đầu của khung hình hiện tại.
- Khung kết thúc của khung hình hiện tại.
- Giá trị bắt đầu của khung hình hiện tại.
- Giá trị kết thúc của khung hình hiện tại.
- Giá trị progress từ 0 tới 1 của khung hình hiện tại với ngoài thời gian interpolation.
- Giá trị progress của khung hình hiện tại với thời gian interpolator.
- Progress trong tổng thể animation từ 0 tới 1.
Ngoài ra, cũng có một số lớp con ValueCallback như LottieStaticValueCallback, nó nhận đúng một giá trị trong constructor và sẽ luôn trả về giá trị đó.
ValueCallback classes
- LottieValueCallback: đặt giá trị tĩnh trong contructor or override getValue().
- LottieRelativeTYPEValueCallback: đặt giá trị trong constructor or override getOffset().
- LottieInterpolatedTYPEValue: cung cấp giá trị bắt đầu, giá trị kết thúc và tuỳ chọn interpolator để có thời gian.
Cách thực hiện nó như thế nào?
Mình vẫn sử dụng trail-loading.json ở bài trước để điều chỉnh.
Sau đó, bạn hãy xem các thuộc tính và phân cấp của nó:
Có thể sử dụng log sau:
loading_animation.resolveKeyPath(KeyPath("**")).forEach {
Log.i("KeyPath", it.toString())
}Hoặc, có thể sử dụng công cụ Lottie JSON Editor.
(Với file mình sử dụng bên trên thì sẽ có 5 layer, còn các bạn…). Dưới đây sẽ là một vài ví dụ thay đổi.
Thay đổi trong một layer
Mình sẽ thay đổi màu Shape Layer 1("nm": "Shape Layer 1"), trong Ellipse 1("nm": "Ellipse 1") sang màu đỏ như sau:
loading_animation.addValueCallback(
KeyPath("Shape Layer 1", "Ellipse 1", "Fill 1"),
LottieProperty.COLOR, { Color.RED }
)Hoặc bạn có thể thay đổi màu sắc và kích thước của stroke như sau:
loading_animation.addValueCallback(
KeyPath("Shape Layer 1", "Ellipse 1", "Stroke 1"),
LottieProperty.STROKE_COLOR, { Color.GREEN }
)
loading_animation.addValueCallback(
KeyPath("Shape Layer 1", "Ellipse 1", "Stroke 1"),
LottieProperty.STROKE_WIDTH, { 20f }
)Sử dụng Wildcards
Mình sử dụng Wildcards để thay đổi toàn bộ layer có Ellipse 1("nm": "Ellipse 1") sang màu GREEN như sau:
loading_animation.addValueCallback(
KeyPath("*", "Ellipse 1", "Fill 1"),
LottieProperty.COLOR, { Color.GREEN }
)Sử dụng Globstars
Mình sử dụng Globstars để thay đổi toàn bộ layer kết thúc thuộc tính Fill 1 sang màu BLUE như sau:
loading_animation.addValueCallback(
KeyPath("**", "Fill 1"),
LottieProperty.COLOR, { Color.BLUE }
)Các bạn có thể tham khảo các thuộc tính có thể thay đổi dưới đây:
Transform:
- TRANSFORM_ANCHOR_POINT
- TRANSFORM_POSITION
- TRANSFORM_OPACITY
- TRANSFORM_SCALE
- TRANSFORM_ROTATION
Fill:
- COLOR (non-gradient)
- OPACITY
- COLOR_FILTER
Stroke:
- COLOR (non-gradient)
- STROKE_WIDTH
- OPACITY
- COLOR_FILTER
Ellipse:
- POSITION
- ELLIPSE_SIZE
Polystar:
- POLYSTAR_POINTS
- POLYSTAR_ROTATION
- POSITION
- POLYSTAR_OUTER_RADIUS
- POLYSTAR_OUTER_ROUNDEDNESS
- POLYSTAR_INNER_RADIUS (star)
- POLYSTAR_INNER_ROUNDEDNESS (star)
Repeater:
- All transform properties
- REPEATER_COPIES
- REPEATER_OFFSET
- TRANSFORM_ROTATION
- TRANSFORM_START_OPACITY
- TRANSFORM_END_OPACITY
Layers:
- All transform properties
- TIME_REMAP (composition layers only)
Bài này đến đây là kết thúc rồi, hãy đón đọc bài viết tiếp theo của mình bạn nhé. Cảm ơn các bạn đã dành thời gian đọc bài của mình. Rất mong nhận được sự góp ý từ các bạn ^^