Zmsoft
ENVI
•••
JAARDEESFRHIINPT-BRROTRUKZH-CNZH-TW
Triển khai hoạt ảnh sử dụng Lottie

Triển khai hoạt ảnh sử dụng Lottie

Xin chào. Tôi là zm soft, đã đăng ký làm nhà phát triển vào năm ngoái (cuối năm 2023) và bắt đầu phát hành ứng dụng. Chúng tôi cũng có kế hoạch phát hành ứng dụng dành cho nhà phát triển, vì vậy hãy kiểm tra nếu bạn quan tâm.

Các bạn có sử dụng hiển thị hoạt ảnh trong ứng dụng của mình không? Chỉ cần một chút hoạt ảnh là ứng dụng trở nên dễ hiểu và trông đẹp hơn rồi, phải không? Vì vậy, hôm nay tôi muốn viết về cách hiển thị hoạt ảnh trong ứng dụng Android.

LottieAnimation

Thư viện tôi đang sử dụng là LottieAnimation, một thư viện để hiển thị hoạt ảnh. Tôi sử dụng nó vì nó cho phép hiển thị hoạt ảnh nhẹ một cách tương đối dễ dàng.

Có thể hiển thị những loại hoạt ảnh nào / Các loại hoạt ảnh

Trước tiên, điểm tốt của thư viện này là sự phong phú của các hoạt ảnh có thể sử dụng miễn phí. Ví dụ, có những hoạt ảnh như sau.

Những hoạt ảnh này được công bố trên trang web chính thức của LottieFiles. Có nhiều hoạt ảnh trả phí, nhưng chỉ riêng những gì xuất hiện khi lọc theo miễn phí thôi đã đủ để sử dụng rồi. Về cơ bản, vì tôi không có kỹ năng cũng như năng lượng để tạo hoạt ảnh từ đầu, khi muốn thêm chuyển động, tôi trước tiên nghĩ đến việc tìm kiếm thứ gì đó có thể sử dụng từ trang web này. Ví dụ, bằng cách sử dụng các hoạt ảnh như vậy, có thể hướng dẫn người dùng các điểm nhấp phổ biến khi hiển thị lần đầu. Tôi đã thực sự sử dụng hoạt ảnh bên phải để cung cấp hướng dẫn thao tác cho người dùng.

Điểm mấu chốt: Sự đơn giản

Việc triển khai cũng có thể được thực hiện khá đơn giản. Ví dụ, nếu chỉ muốn hiển thị hoạt ảnh trong một bố cục nhất định, chỉ cần định nghĩa theo cách sau là chạy được. Chạy được mà không cần triển khai bất kỳ logic nào thật tuyệt phải không?

Phương pháp triển khai đơn giản của Lottie

Việc triển khai Lottie cực kỳ đơn giản. Chỉ cần nhúng hoạt ảnh vào bố cục cụ thể là nó sẽ hoạt động mà không cần logic bổ sung.

Ví dụ triển khai:

   <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottie_id"
        app:lottie_rawRes="@raw/your_lottie_animation"/>

Cách sử dụng cơ bản của Lottie

Các bước chính để sử dụng Lottie như sau:

  • Tích hợp thư viện (sửa đổi build.gradle)
  • Lấy và đặt file hoạt ảnh
  • Thiết lập file bố cục
  • Tùy chỉnh hoạt ảnh

Ví dụ triển khai cụ thể và mã code

Dưới đây là các ví dụ triển khai cụ thể khi sử dụng Lottie. Bao gồm cách tích hợp thư viện, cách đặt file hoạt ảnh, cách thiết lập file bố cục và cách tùy chỉnh hoạt ảnh.

Ghi vào build.gradle / Tích hợp thư viện:
Trước tiên, hãy tích hợp thư viện để có thể sử dụng Lottie.
Nếu không có vấn đề về khả năng tương thích, hãy sử dụng môi trường mới nhất.

dependencies {
    implementation 'com.airbnb.android:lottie:3.4.0'
}

Đặt file hoạt ảnh:
Tải xuống file hoạt ảnh yêu thích (.json) từ trang web chính thức của LottieFiles và đặt vào thư mục res/raw của ứng dụng.

Thiết lập file bố cục:
Thêm LottieAnimationView vào bố cục XML để có thể tham chiếu đến file hoạt ảnh đã tải xuống.

Tùy chỉnh hoạt ảnh:
Tùy chỉnh hành vi hoạt ảnh theo nhu cầu. Trong cài đặt hoạt ảnh, có thể thực hiện các điều sau:

  • Có hoặc không có phát lại vòng lặp
  • Chỉ định số lần lặp lại
  • Chỉ định tốc độ phát (bao gồm phát ngược)

Bằng cách thêm xử lý động, bạn có thể phát/dừng vào thời điểm mong muốn và thay đổi tốc độ phát.

Trước tiên, về cách chỉ định tĩnh. Hành vi hoạt ảnh thay đổi theo các chỉ định sau.

   <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottie_id"
        android:scaleType="centerCrop"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_speed="0.15"
        app:lottie_rawRes="@raw/your_lottie_animation"/>

Trong ví dụ này, file your_lottie_animation.json được phát tự động ở tốc độ phát 0,15x và lặp lại.

Tiếp theo, xử lý động:

lottieAnimationView.playAnimation()

Với xử lý trên có thể phát được. Ngoài việc phát, bạn cũng có thể thay đổi cài đặt để dừng, thay đổi tốc độ, v.v. Bạn cũng có thể đặt listener như sau để phát hiện khi phát kết thúc và xử lý:

        lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
            override fun onAnimationStart(animation: Animator) {
                // アニメーション開始時の処理
            }

            override fun onAnimationEnd(animation: Animator) {
                // アニメーション終了時の処理
            }

            override fun onAnimationCancel(animation: Animator) {
                // アニメーションがキャンセルされた時の処理
            }

            override fun onAnimationRepeat(animation: Animator) {
                // アニメーションがリピートされる時の処理
            }
        })

Lưu ý và khắc phục sự cố

Lottie rất hữu ích nhưng có một số điểm cần lưu ý. Đặc biệt, việc thay đổi vị trí đối tượng đôi khi có thể không hoạt động như mong đợi. Tôi cũng sẽ giải thích vấn đề tràn ngăn xếp liên quan đến xử lý khi hoạt ảnh kết thúc và hành vi sau onPause.

Ví dụ khắc phục sự cố 1:
Đây là vấn đề trong triển khai của tôi: cách xử lý khi kết thúc hoạt ảnh đã gây ra tràn ngăn xếp. Cụ thể, có vấn đề trong xử lý phát ngược khi đến cuối hoạt ảnh và lặp lại phát và phát ngược. Vấn đề được giải quyết bằng cách đăng lên thread chính và đưa lại vào hàng đợi:

        lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
            override fun onAnimationStart(animation: Animator) {
                // アニメーション開始時の処理
            }

            override fun onAnimationEnd(animation: Animator) {
                // アニメーション終了時の処理
                lottieAnimationView.speed = lottieAnimationView.speed*(-1) // 逆再生のためにスピードを逆にする
                lottieAnimationView.post {
                    // 直接呼ぶと再起呼び出しでスタックオーバーフローするのでPOSTする
                    if(isAttachedToWindow) {
                        lottieAnimationView.playAnimation()
                    }
                }
            }

            override fun onAnimationCancel(animation: Animator) {
                // アニメーションがキャンセルされた時の処理
            }

            override fun onAnimationRepeat(animation: Animator) {
                // アニメーションがリピートされる時の処理
            }
        })

Ví dụ khắc phục sự cố 2:
Một điểm cần lưu ý khác là xử lý sau onPause. Để tránh các thao tác không cần thiết, nên dừng hoạt ảnh ở chế độ nền.

    override fun onResume(owner: LifecycleOwner) {
        super.onResume(owner)
        // アニメーションを開始
        lottieAnimationView.playAnimation()
    }

    override fun onPause(owner: LifecycleOwner) {
        lottieAnimationView.cancelAnimation()
        super.onPause(owner)
    }

Tuy nhiên, nếu có xử lý khi kết thúc hoạt ảnh, v.v., chỉ điều này thôi là không đủ. Vì vậy, cần thiết phải kiểm tra xem view cha có bị tách ra không và xử lý lại:

                    if(isAttachedToWindow) {
                        binding.lottieBackground.playAnimation()
                    }

Tổng kết

Lottie là công cụ mạnh mẽ để cải thiện giao diện người dùng của ứng dụng. Có nhiều hoạt ảnh có thể sử dụng miễn phí và việc triển khai cũng đơn giản. Bằng cách hiểu các điểm cần lưu ý và xử lý chúng một cách thích hợp, bạn có thể tận hưởng những lợi ích lớn trong phát triển ứng dụng. Mặc dù có một số điểm cần lưu ý, nhưng nhìn chung rất dễ sử dụng và có nhiều tài nguyên có thể sử dụng miễn phí, vì vậy tôi nghĩ đây là thư viện tuyệt vời. Chắc chắn sẽ giúp cải thiện vẻ ngoài của ứng dụng, vì vậy hãy thử ngay.