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

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

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.

Thêm nhiều thuộc tính bằng hiệu ứng chuyển đổi trong Compose →

Hiệu ứng 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 nào. Ví dụ: bạn có thể xác định một hiệu ứng chuyển đổi tuỳ chỉnh sẽ 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 các trường này bị vô hiệu hoá trong 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.

Hiệu ứng chuyển đổi tuỳ chỉnh, chẳng hạn như một trong các loại hiệu ứng chuyển đổi tích hợp, áp dụng ảnh động cho các thành phần hiển thị con của cả cảnh bắt đầu và kết thúc. Tuy nhiên, không giống như các loại chuyển đổi tích hợp, 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 nên xác định một tập hợp con của thành phần hiển thị mục tiêu cho ảnh động.

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 hiệu ứng chuyển đổi tuỳ chỉnh.

Mở rộng lớp Transition

Để tạo hiệu ứng 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 hiển thị trong đoạn mã sau:

class CustomTransition : Transition() {

    override fun captureStartValues(transitionValues: TransitionValues) {}

    override fun captureEndValues(transitionValues: TransitionValues) {}

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

}

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 thành phần hiển thị

Ảnh động chuyển đổi sử dụng hệ thống ảnh động thuộc tính được mô tả trong phần Tổng quan về ảnh động thuộc tính. Ảnh động thuộc tính thay đổi một thuộc tính thành phần 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 đã chỉ định, vì vậy, khung cần có cả giá trị bắt đầu và 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ỏ trong 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ó giá trị thuộc tính màu, trong khi ảnh động chuyển động cần 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 là dành riêng cho một hiệu ứng chuyển đổi, nên khung chuyển đổi không cung cấp mọi giá trị thuộc tính cho một hiệu ứng 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ỉ thu thập 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 giá trị bắt đầu

Để truyền các giá trị thành phần 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 thành phần hiển thị trong cảnh bắt đầu. Đối số hàm là một đối tượng TransitionValues chứa tham chiếu đến thành phần hiển thị và một thực thể Map mà bạn có thể lưu trữ các giá trị thành phần 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à chuyển các giá trị đó trở lại khung bằng cách lưu trữ các giá trị đó trong bản đồ.

Để đảm bảo 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 lược đồ đặ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():

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
    }

    ...

}

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 thành phần hiển thị mục tiêu trong cảnh kết thúc. Trong mọi khía cạnh 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():

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

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

Trong ví dụ này, cả hàm captureStartValues() và captureEndValues() đều gọi captureValues() để truy xuất và lưu trữ các giá trị. Thuộc tính thành phần 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à 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à kết thúc của một thành phần 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 một thành phần hiển thị giữa trạng thái của thành phần hiển thị đó trong cảnh bắt đầu và trạng thái của thành phần hiển thị đó trong cảnh kết thúc, hãy cung cấp một trình tạo ảnh động bằng cách ghi đè hàm createAnimator(). Khi khung gọi hàm này, khung sẽ truyền vào thành phần hiển thị gốc của cảnh và các đối tượng TransitionValues chứa giá trị bắt đầu và kết thúc mà bạn đã chụp.

Số lần khung 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à 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 hiệu ứng chuyển đổi tuỳ chỉnh. Nếu cảnh bắt đầu có 5 mục tiêu, trong đó 2 mục tiêu bị xoá khỏi cảnh kết thúc và cảnh kết thúc có 3 mục tiêu từ cảnh bắt đầu cộng với một mục tiêu mới, thì khung sẽ gọi createAnimator() 6 lần. Ba trong số các lệnh gọi này tạo ảnh động cho hiệu ứng mờ dần và mờ dần của các mục tiêu vẫn nằm trong cả hai đối tượng cảnh. Hai lệnh gọi khác tạo ảnh động cho hiệu ứng mờ dần của các mục tiêu đã bị xoá khỏi cảnh kết thúc. Một lệnh gọi sẽ tạo ảnh động cho hiệu ứng mờ dần của mục tiêu mới trong cảnh kết thúc.

Đối với các thành phần hiển thị mục tiêu tồn tại trong cả cảnh bắt đầu và kết thúc, khung này cung cấp một đối tượng TransitionValues cho cả đối số startValues và endValues. Đối với các thành phần hiển thị mục tiêu chỉ tồn tại trong cảnh bắt đầu hoặc kết thúc, khung này cung cấp một đố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 một hiệu ứng chuyển đổi tuỳ chỉnh, hãy sử dụng các giá trị thuộc tính thành phần hiển thị mà bạn đã thu thập để tạo một đối tượng Animator và trả về đối tượng đó cho 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 phần Ảnh động thuộc tính.

Áp dụng hiệu ứng chuyển đổi tuỳ chỉnh

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