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

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

Bạn có thể sử dụng hệ thống ảnh động khung hiển thị để thực hiện ảnh động tween trên Khung hiển thị. Ảnh động dạng Tween tính toán ảnh động với các thông tin như điểm bắt đầu, điểm kết thúc, kích thước, độ xoay và các khía cạnh phổ biến khác của ảnh động.

Ảnh động tween 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ó đối tượng TextView, bạn có thể di chuyển, xoay, tăng hoặc thu nhỏ văn bản. Nếu ứng dụng 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 dùng trong ảnh động dạng tween.

Một chuỗi hướng dẫn ảnh động xác định ảnh động tween, đượ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, dễ sử dụng lại và có thể hoán đổi hơn so với mã hoá cứng ảnh động. Trong ví dụ bên dưới, chúng ta sử dụng XML. (Để tìm hiểu thêm về cách xác định ảnh động trong mã ứng dụng thay vì XML, hãy tham khảo lớp AnimationSet và các lớp con Animation khác.)

Hướng dẫn ảnh động xác định các phép biến đổi mà bạn muốn xảy ra, thời điểm xảy ra và thời lượng áp dụng. Các hoạt động biến đổi có thể diễn ra tuần tự hoặc đồng thời – ví dụ: bạn có thể để nội dung của TextView di chuyển từ trái sang phải, sau đó 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 tham số dành riêng cho phép biến đổi đó (kích thước bắt đầu và kích thước kết thúc để thay đổi kích thước, góc bắt đầu và góc kết thúc để xoay, v.v.) và cũng là một tập hợp tham số phổ biến (ví dụ: thời gian bắt đầu và thời lượng). Để thực hiện đồng thời nhiều phép biến đổi, hãy đặt cùng một thời gian bắt đầu cho các phép biến đổi đó; để 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 phép biến đổi trước đó.

Tệp XML ả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: đây sẽ là một <alpha>, <scale>, <translate>, <rotate>, phần tử nội suy hoặc phần tử <set> 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ả hướng dẫn ảnh động sẽ được áp dụng đồng thời. Để các sự kiện này xảy ra tuần tự, bạn phải chỉ định thuộc tính startOffset, như trong ví dụ bên dưới.

Tệp XML sau đây từ một trong các ApiDemos được dùng để kéo giãn, sau đó đồng thời xoay và xoay đối tượng Khung hiển thị.

<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 được dùng trong ví dụ này) là (0,0) ở góc trên bên trái và tăng lên khi bạn di chuyển xuống và sang phải.

Một số giá trị chẳng hạn nhưPivotX có thể được chỉ định tương đối so với chính đối tượng đó hoặc so với thành phần mẹ. Hãy nhớ sử dụng định dạng thích hợp cho nội dung bạn muốn ("50" cho 50% so với thành phần mẹ, hoặc "50%" cho 50% so với chính thành phầ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 Interpolator. Android bao gồm 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 sẽ bắt đầu chậm và tăng tốc. Mỗi phần tử có một giá trị thuộc tính có thể được áp dụng trong XML.

Khi XML đượ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 và áp dụng nó cho đối tượng ImageView từ bố cục.

Kotlin

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

Java

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

Thay vì 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, giới hạn của Chế độ xem chứa ảnh động sẽ không tự động điều chỉnh để phù hợp với ảnh động. Tuy nhiên, ảnh động vẫn sẽ được vẽ ra ngoài giới hạn của Chế độ xem và sẽ không bị cắt bớt. Tuy nhiên, việc cắt sẽ xảy ra nếu ảnh động vượt quá giới hạn của Chế độ xem mẹ.