Tạo một ảnh động chuyển tiếp tuỳ chỉnh

Thử cách dùng Compose
Jetpack Compose là bộ công cụ giao diện người dùng được đề xuất cho Android. Tìm hiểu cách thêm ảnh động trong Compose.

Quá trình chuyển đổi tuỳ chỉnh cho phép bạn tạo ảnh động không có trong bất kỳ lớp chuyển đổi tích hợp sẵn nào. Ví dụ: bạn có thể xác định quá trình chuyển đổi tuỳ chỉnh chuyển màu nền trước của văn bản và các trường nhập thành màu xám để cho biết rằng các trường này bị tắt trên màn hình mới. Loại thay đổi này giúp người dùng thấy các trường mà bạn đã tắt.

Quá trình chuyển đổi tuỳ chỉnh, giống như một trong các loại chuyển đổi tích hợp sẵn, sẽ áp dụng ảnh động cho các khung hiển thị con của cả cảnh bắt đầu và cảnh kết thúc. Tuy nhiên, không giống như các loại chuyển đổi tích hợp sẵn, bạn phải cung cấp mã ghi lại các giá trị thuộc tính và tạo ảnh động. Bạn cũng có thể muốn xác định một tập hợp con các khung hiển thị đích cho ảnh động của mình.

Trang này hướng dẫn bạn cách ghi lại các giá trị thuộc tính và tạo ảnh động để tạo quá trình chuyển đổi tuỳ chỉnh.

Mở rộng lớp Chuyển đổi

Để tạo quá trình chuyển đổi tuỳ chỉnh, hãy thêm một lớp vào dự án của bạn để mở rộng lớp Transition và ghi đè các hàm được minh hoạ trong đoạn mã sau:

Kotlin

class CustomTransition : Transition() {

    override fun captureStartValues(transitionValues: TransitionValues) {}

    override fun captureEndValues(transitionValues: TransitionValues) {}

    override fun createAnimator(
        sceneRoot: ViewGroup,
        startValues: TransitionValues?,
        endValues: TransitionValues?
    ): Animator? {}

}

Java

public class CustomTransition extends Transition {

    @Override
    public void captureStartValues(TransitionValues values) {}

    @Override
    public void captureEndValues(TransitionValues values) {}

    @Override
    public Animator createAnimator(ViewGroup sceneRoot,
                                   TransitionValues startValues,
                                   TransitionValues endValues) {}
}

Các phần sau đây giải thích cách ghi đè các hàm này.

Ghi lại các giá trị thuộc tính khung hiển thị

Ảnh động chuyển đổi sử dụng hệ thống ảnh động thuộc tính được mô tả trong Tổng quan về ảnh động thuộc tính. Ảnh động thuộc tính thay đổi thuộc tính khung hiển thị từ giá trị bắt đầu thành giá trị kết thúc trong một khoảng thời gian cụ thể, vì vậy, khung này cần có cả giá trị bắt đầu và giá trị kết thúc của thuộc tính để tạo ảnh động.

Tuy nhiên, ảnh động thuộc tính thường chỉ cần một tập hợp con nhỏ của tất cả các giá trị thuộc tính của khung hiển thị. Ví dụ: ảnh động màu cần các giá trị thuộc tính màu, trong khi ảnh động chuyển động cần các giá trị thuộc tính vị trí. Vì các giá trị thuộc tính cần thiết cho ảnh động dành riêng cho quá trình chuyển đổi, nên khung chuyển đổi không cung cấp mọi giá trị thuộc tính cho quá trình chuyển đổi. Thay vào đó, khung này sẽ gọi các hàm gọi lại cho phép quá trình chuyển đổi chỉ ghi lại các giá trị thuộc tính cần thiết và lưu trữ các giá trị đó trong khung.

Ghi lại các giá trị bắt đầu

Để truyền các giá trị khung hiển thị bắt đầu vào khung, hãy triển khai hàm captureStartValues(transitionValues). Khung này gọi hàm này cho mọi khung hiển thị trong cảnh bắt đầu. Đối số hàm là đối tượng TransitionValues chứa tham chiếu đến khung hiển thị và thực thể Map mà bạn có thể lưu trữ các giá trị khung hiển thị mà bạn muốn. Trong quá trình triển khai, hãy truy xuất các giá trị thuộc tính này và truyền chúng trở lại khung bằng cách lưu trữ chúng trong bản đồ.

Để đảm bảo rằng khoá cho giá trị thuộc tính không xung đột với các khoá TransitionValues khác, hãy sử dụng sơ đồ đặt tên sau:

package_name:transition_name:property_name

Đoạn mã sau đây cho thấy cách triển khai hàm captureStartValues():

Kotlin

class CustomTransition : Transition() {

    // Define a key for storing a property value in
    // TransitionValues.values with the syntax
    // package_name:transition_class:property_name to avoid collisions
    private val PROPNAME_BACKGROUND = "com.example.android.customtransition:CustomTransition:background"

    override fun captureStartValues(transitionValues: TransitionValues) {
        // Call the convenience method captureValues
        captureValues(transitionValues)
    }

    // For the view in transitionValues.view, get the values you
    // want and put them in transitionValues.values
    private fun captureValues(transitionValues: TransitionValues) {
        // Get a reference to the view
        val view = transitionValues.view
        // Store its background property in the values map
        transitionValues.values[PROPNAME_BACKGROUND] = view.background
    }

    ...

}

Java

public class CustomTransition extends Transition {

    // Define a key for storing a property value in
    // TransitionValues.values with the syntax
    // package_name:transition_class:property_name to avoid collisions
    private static final String PROPNAME_BACKGROUND =
            "com.example.android.customtransition:CustomTransition:background";

    @Override
    public void captureStartValues(TransitionValues transitionValues) {
        // Call the convenience method captureValues
        captureValues(transitionValues);
    }


    // For the view in transitionValues.view, get the values you
    // want and put them in transitionValues.values
    private void captureValues(TransitionValues transitionValues) {
        // Get a reference to the view
        View view = transitionValues.view;
        // Store its background property in the values map
        transitionValues.values.put(PROPNAME_BACKGROUND, view.getBackground());
    }
    ...
}

Ghi lại các giá trị kết thúc

Khung này gọi hàm captureEndValues(TransitionValues) một lần cho mỗi khung hiển thị đích trong cảnh kết thúc. Về mọi mặt khác, captureEndValues() hoạt động giống như captureStartValues().

Đoạn mã sau đây cho thấy cách triển khai hàm captureEndValues():

Kotlin

override fun captureEndValues(transitionValues: TransitionValues) {
    captureValues(transitionValues)
}

Java

@Override
public void captureEndValues(TransitionValues transitionValues) {
    captureValues(transitionValues);
}

Trong ví dụ này, cả hàm captureStartValues()captureEndValues() đều gọi captureValues() để truy xuất và lưu trữ các giá trị. Thuộc tính khung hiển thị mà captureValues() truy xuất là giống nhau, nhưng có các giá trị khác nhau trong cảnh bắt đầu và cảnh kết thúc. Khung này duy trì các bản đồ riêng biệt cho trạng thái bắt đầu và trạng thái kết thúc của khung hiển thị.

Tạo trình tạo ảnh động tuỳ chỉnh

Để tạo ảnh động cho các thay đổi đối với khung hiển thị giữa trạng thái của khung hiển thị đó trong cảnh bắt đầu và trạng thái của khung hiển thị đó trong cảnh kết thúc, hãy cung cấp trình tạo ảnh động bằng cách ghi đè hàm createAnimator(). Khi khung này gọi hàm này, khung này sẽ truyền vào khung hiển thị gốc của cảnh và các đối tượng TransitionValues chứa các giá trị bắt đầu và giá trị kết thúc mà bạn đã ghi lại.

Số lần khung này gọi hàm createAnimator() phụ thuộc vào các thay đổi xảy ra giữa cảnh bắt đầu và cảnh kết thúc.

Ví dụ: hãy xem xét ảnh động mờ dần hoặc rõ dần được triển khai dưới dạng quá trình chuyển đổi tuỳ chỉnh. Nếu cảnh bắt đầu có 5 đích, trong đó 2 đích bị xoá khỏi cảnh kết thúc và cảnh kết thúc có 3 đích từ cảnh bắt đầu cộng với một đích mới, thì khung này sẽ gọi createAnimator() 6 lần. 3 trong số các lệnh gọi tạo ảnh động mờ dần và rõ dần của các đích vẫn ở trong cả 2 đối tượng cảnh. Thêm 2 lệnh gọi tạo ảnh động mờ dần của các đích bị xoá khỏi cảnh kết thúc. Một lệnh gọi tạo ảnh động rõ dần của đích mới trong cảnh kết thúc.

Đối với các khung hiển thị đích tồn tại trong cả cảnh bắt đầu và cảnh kết thúc, khung này sẽ cung cấp đối tượng TransitionValues cho cả đối số startValuesendValues. Đối với các khung hiển thị đích chỉ tồn tại trong cảnh bắt đầu hoặc cảnh kết thúc, khung này sẽ cung cấp đối tượng TransitionValues cho đối số tương ứng và null cho đối số còn lại.

Để triển khai hàm createAnimator(ViewGroup, TransitionValues, TransitionValues) khi bạn tạo quá trình chuyển đổi tuỳ chỉnh, hãy sử dụng các giá trị thuộc tính khung hiển thị mà bạn đã ghi lại để tạo đối tượng Animator và trả đối tượng đó về khung. Để tham khảo ví dụ về cách triển khai, hãy xem lớp ChangeColor trong mẫu CustomTransition. Để biết thêm thông tin về trình tạo ảnh động thuộc tính, hãy xem Ảnh động thuộc tính.

Áp dụng chuyển cảnh tuỳ chỉnh

Quá trình chuyển đổi tuỳ chỉnh hoạt động giống như quá trình chuyển đổi tích hợp sẵn. Bạn có thể áp dụng chuyển cảnh tuỳ chỉnh bằng trình quản lý chuyển cảnh, như mô tả trong phần Áp dụng chuyển cảnh.