Ảnh động dạng khung hiển thị

Thử cách 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 sử dụng Ảnh động trong Compose.

Tạo ảnh động cho các thuộc tính →

Bạn có thể sử dụng hệ thống ảnh động khung hiển thị để thực hiện ảnh động chuyển động giữa các trạng thái trên Khung hiển thị. Ảnh động lấy giá trị giữa tính toán ảnh động bằng các thông tin như điểm xuất phát, điểm cuối, kích thước, xoay và các khía cạnh chung khác của ảnh động.

Ảnh động lấy giá trị giữa có thể thực hiện một loạt các phép biến đổi đơn giản (vị trí, kích thước, xoay và độ trong suốt) trên nội dung của đối tượng Khung hiển thị. Vì vậy, nếu có một đối tượng TextView, bạn có thể di chuyển, xoay, phóng to hoặc thu nhỏ văn bản. Nếu có hình nền, hình nền đó sẽ được biến đổi cùng với văn bản. animation package cung cấp tất cả các lớp được dùng trong một ảnh động dạng tween.

Một chuỗi các chỉ dẫn về ảnh động xác định ảnh động lấy giá trị giữa, được xác định bằng XML hoặc mã Android. Giống như việc xác định bố cục, bạn nên dùng tệp XML vì tệp này dễ đọc, có thể dùng lại và có thể hoán đổi hơn so với việc mã hoá cứng ảnh động. Trong ví dụ dưới đây, chúng ta sẽ sử dụng XML. (Để tìm hiểu thêm về cách xác định một ảnh động trong mã xử lý ứng dụng thay vì XML, hãy tham khảo lớp AnimationSet và các lớp con Animation khác.)

Các chỉ dẫn về ảnh động xác định những biến đổi mà bạn muốn xảy ra, thời điểm xảy ra và thời gian cần thiết để áp dụng. Các phép biến đổi có thể diễn ra tuần tự hoặc đồng thời – ví dụ: bạn có thể di chuyển nội dung của một TextView từ trái sang phải, rồi xoay 180 độ hoặc bạn có thể di chuyển và xoay văn bản đồng thời. Mỗi phép biến đổi sẽ lấy một tập hợp các tham số cụ thể cho phép biến đổi đó (kích thước bắt đầu và kích thước kết thúc cho thay đổi kích thước, góc bắt đầu và góc kết thúc cho phép xoay, v.v.), cũng như một tập hợp các tham số chung (ví dụ: thời gian bắt đầu và thời lượng). Để thực hiện đồng thời nhiều biến đổi, hãy đặt cho chúng cùng một thời gian bắt đầu; để thực hiện tuần tự, hãy tính thời gian bắt đầu cộng với thời lượng của biến đổi trước đó.

Tệp XML của ảnh động thuộc thư mục res/anim/ của dự án Android. Tệp phải có một phần tử gốc duy nhất: đây sẽ là một phần tử <alpha>, <scale>, <translate>, <rotate>, phần tử nội suy hoặc phần tử <set> duy nhất lưu giữ các nhóm phần tử này (có thể bao gồm một <set> khác). Theo mặc định, tất cả các chỉ dẫn về ảnh động đều được áp dụng đồng thời. Để các hoạt động này diễn ra tuần tự, bạn phải chỉ định thuộc tính startOffset, như trong ví dụ bên dưới.

XML sau đây trong một trong các ApiDemos được dùng để kéo giãn, sau đó đồng thời xoay và xoay một đối tượng Chế độ xem.

<set android:shareInterpolator="false">
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.4"
        android:fromYScale="1.0"
        android:toYScale="0.6"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="700" />
    <set android:interpolator="@android:anim/decelerate_interpolator">
        <scale
           android:fromXScale="1.4"
           android:toXScale="0.0"
           android:fromYScale="0.6"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400"
           android:fillBefore="false" />
        <rotate
           android:fromDegrees="0"
           android:toDegrees="-45"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400" />
    </set>
</set>

Toạ độ màn hình (không dùng trong ví dụ này) là (0,0) ở góc trên cùng bên trái và tăng lên khi bạn di chuyển xuống dưới và sang phải.

Một số giá trị, chẳng hạn như pivotX, có thể được chỉ định tương ứng với chính đối tượng hoặc tương ứng với đối tượng mẹ. Hãy nhớ sử dụng đúng định dạng cho nội dung bạn muốn ("50" cho 50% so với phần tử mẹ hoặc "50%" cho 50% so với chính nó).

Bạn có thể xác định cách áp dụng một phép biến đổi theo thời gian bằng cách chỉ định một Interpolator. Android có một số lớp con Interpolator chỉ định nhiều đường cong tốc độ: ví dụ: AccelerateInterpolator cho biết một phép biến đổi bắt đầu chậm và tăng tốc. Mỗi thuộc tính đều có một giá trị thuộc tính có thể được áp dụng trong XML.

Khi XML này được lưu dưới dạng hyperspace_jump.xml trong thư mục res/anim/ của dự án, mã sau đây sẽ tham chiếu đến XML này và áp dụng cho một đối tượng ImageView trong bố cục.

AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump).also { hyperspaceJumpAnimation ->
    findViewById<ImageView>(R.id.spaceshipImage).startAnimation(hyperspaceJumpAnimation)
}

ImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);
Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
spaceshipImage.startAnimation(hyperspaceJumpAnimation);

Ngoài startAnimation(), bạn có thể xác định thời gian bắt đầu cho ảnh động bằng Animation.setStartTime(), sau đó chỉ định ảnh động cho Khung hiển thị bằng View.setAnimation().

Để biết thêm thông tin về cú pháp XML, các thẻ và thuộc tính có sẵn, hãy xem phần Tài nguyên ảnh động.

Lưu ý: Bất kể ảnh động của bạn có thể di chuyển hoặc đổi kích thước như thế nào, ranh giới của View chứa ảnh động sẽ không tự động điều chỉnh để phù hợp với ảnh động đó. Mặc dù vậy, ảnh động vẫn sẽ được vẽ vượt quá ranh giới của View và sẽ không bị cắt. Tuy nhiên, thao tác cắt sẽ xảy ra nếu ảnh động vượt quá ranh giới của View gốc.