Ả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.

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

Bạn có thể sử dụng hệ thống ảnh động dạng khung hiển thị để thực hiện ảnh động dạng tweened trên Khung hiển thị. Ảnh động tween tính toán ảnh động bằng 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.

Một ảnh động dạ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, chế độ xoay và độ trong suốt) cho nội dung của đối tượng Thành phần 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 được dùng trong ảnh động lấy giá trị giữa.

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. Cũng như khi xác định bố cục, bạn nên sử dụng tệp XML vì tệp này dễ đọc, có thể sử 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ụ 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 phép biến đổi có thể tuần tự hoặc đồng thời – ví dụ: bạn có thể di chuyển nội dung của TextView 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 có một tập hợp các 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à một tập hợp các tham số phổ biến (ví dụ: thời gian bắt đầu và thời lượng). Để thực hiện một số phép biến đổi đồng thời, hãy cho các phép biến đổi đó có cùng một thời gian bắt đầu; để các phép biến đổi này diễn ra tuần tự, hãy tính thời gian bắt đầu cộng với thời gian của lần 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 phần tử <alpha>, <scale>, <translate>, <rotate>, bộ nội suy hoặc phần tử <set> chứa nhóm các 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 đều được áp dụng đồng thời. Để các sự kiện đó xảy ra tuần tự, bạn phải chỉ định thuộc tính startOffset, như trong ví dụ dưới đây.

XML sau đây của một trong Apidemos được dùng để kéo dài, sau đó xoay và xoay đồng thời một đố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 sử 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 phù hợp với giá trị bạn muốn ("50" nếu 50% so với thành phần mẹ, hoặc "50%" nếu 50% so với thành phần mẹ).

Bạn có thể xác định cách áp dụng 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 của Bộ nội suy chỉ định nhiều đường cong tốc độ, chẳng hạn như AccelerateInterpolator yêu cầu một phép biến đổi bắt đầu chậm lại và tăng tốc độ. Mỗi phần tử đều có một giá trị thuộc tính có thể á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 đó gán ảnh động cho Thành phần 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. Mặc dù vậy, ảnh động vẫn sẽ được vẽ ngoài giới hạn của Khung hiển thị 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ẹ.