…

Xin chào các bạn hi hi, lại là mình đây. 🙂
Để thay đổi không khí sau loạt bài về animation, hôm nay mình sẽ giới thiệu với các bạn về Lottie cho Android.
Sau những loạt bài về animation thì các bạn có thấy ứng dụng của chúng ta đã trở nên đẹp và sinh động hơn chưa?. Tôi nghĩ chắc chắn là rồi phải không? 🙂
Nhưng sẽ có nhiều vị khách khó tính thì vẫn có chút xíu chưa hài lòng về độ mượt mà của animation. Bạn đừng lo, Lottie sẽ giải quyết vấn đề đó cho bạn ngay.
Ứng dụng của bạn sẽ trở nên mượt mà, sinh động và đẹp hơn rất nhiều nữa đấy. Nghe đến đây thì bạn đã hào hứng để tìm hiểu nó rồi chứ. Let’s go…

Trong bài này mình sẽ giới thiệu đến các bạn những mục sau:

• Giới thiệu về Lottie
• Cách sử dụng Lottie cho Android

Giới thiệu về Lottie

Lottie là một mã nguồn mở về animation được xây dựng bởi Airbnb. Nó có thể dùng được ở Android(hỗ trợ android từ phiên bản JellyBean API 16), iOS, React Native hay cả Web. Về bản chất hoạt động thì nó sẽ parse animation từ Adobe After Effects, thông qua Bodymovin và được xuất ra định dạng json. Sau đó, các nhà phát triển của các platform sẽ sử dụng công cụ thư viện Lottie để các animation sẽ được hiển thị tương ứng trên các platform.

Cách sử dụng Lottie cho Android

Đầu tiên, bạn chuẩn bị cho mình file có định json (được xuất ra từ Adobe After Effects, thông qua Bodymovin như bên trên mình đã chia sẻ).
Thường thì cái này được design team của các dự án cung cấp cho bạn hoặc bạn tự tạo đều được.
Bạn cũng có thể tham khảo ở đây rất nhiều.
Tôi đã chuẩn bị cho mình trail-loading.json cho bài viết này.

Sau khi có được file định dang json bên trên thì tiếp đến bạn sẽ tạo project và thêm vào trong build.gradle một dependencies như dưới đây:

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

Bạn sẽ tạo assets folder (app/src/main/assets) và copy file có định dạng json bên trên vào nhé. Còn mình sẽ copy file trail-loading.json của mình vào.
Tiếp theo bạn sẽ thêm animation vào xml với layout tương ứng để bạn hiển thị. Ở đây, mình sẽ thêm vào xml trên activity của mình.

<?xml version="1.0" encoding="utf-8"?>
<com.airbnb.lottie.LottieAnimationView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/loading_animation"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:lottie_autoPlay="true"
    app:lottie_fileName="trail-loading.json"
    app:lottie_loop="true"
    app:lottie_speed="1" />

Các thuộc tính mà chúng ta sử dụng bên trên:

• app:lottie_autoPlay="true": bắt đầu chạy animation.
• app:lottie_fileName="trail-loading.json": sử dụng file json ở trong thư mục assets mà bạn đã thêm.
• app:lottie_loop="true": cho phép animation được lặp.
• app:lottie_speed="1": tốc độ chạy animation.
  Ngoài ra cũng có các thuộc tính sau nữa: lottie_scale, lottie_repeatCount, lottie_repeatMode …

Bên trên là bạn đã thêm animation vào trong xml, nhưng nó cũng có thể được thực hiện, được set các thuộc tính ở onCreate() / onCreateView() bạn nhé.

package techover.lottie

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        loading_animation.setAnimation("trail-loading.json")
        loading_animation.loop(true)
        loading_animation.speed = 1f
        loading_animation.playAnimation()
    }
}

Thật đơn giản phải không các bạn? Giờ thì xem thành quả của bạn vừa làm nhé.

Đến đây, các bạn sẽ đặt câu hỏi rằng: tôi có thể điều khiển và lắng nghe nó không? (think)
Oh, Tất nhiên là được rồi. Bài tiếp theo mình sẽ giới thiệu, hãy đón đọc bài viết 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 ^^