Lottie on Android (Part 3)

by KINH HOANG` HON
2 comments 173 views

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.jsonbà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 }
        )
Shape Layer 1

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 }
        )
Stroke

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 }
        )
Wildcards

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 }
        )
Globstars

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 ^^

2 comments
2

2 comments

Magz March 27, 2020 - 10:05 PM

Hello, cảm ơn bạn về bài tut ạ.
Mình sử dụng hình này: https://lottiefiles.com/128-around-the-world
Và đang gặp chút trục trặc, phiền bạn xem giùm:
—Quoted————————-
“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.”

Log: Không có log, IDE báo “2020-03-27 21:55:30.096 9104-9104/com.example.test_lottie_2 W/LOTTIE: Cannot resolve KeyPath. Composition is not set yet.”
Lottie JSON Editor: output ra JSON như thế này: https://justpaste.it/34qxy
Không rõ lấy tên keypath là cái key nào trong đó ?

// Mình muốn đổi hình máy bay thành xanh lá cây và 1 phần bất kỳ của quả đất thành màu hồng.

Phiền bạn giải đáp giùm mình với. Cảm ơn bạn.

Reply
Magz March 27, 2020 - 10:21 PM

Hello, cảm ơn bạn về bài hướng dẫn.
Mình gặp chút khó khăn, làm sao để tìm được đúng keypath mình muốn nhỉ ?
Ví dụ, mình đang sử dụng hình này: https://lottiefiles.com/128-around-the-world
Mình muốn đổi màu máy bay thành xanh lá, và 1 lục địa bất kỳ thành màu hồng, thì mình phải tìm key bằng cách nào ?
Phiền bạn giúp mình nhé, cảm ơn bạn.

Reply

Leave a Comment

* By using this form you agree with the storage and handling of your data by this website.

%d bloggers like this: