Trong một số trường hợp, hình ảnh cần phải là hình động. Điều này rất hữu ích nếu bạn muốn hiển thị ảnh động tải tuỳ chỉnh bao gồm nhiều hình ảnh hoặc nếu bạn muốn biểu tượng biến đổi sau hành động. Android cung cấp 2 tuỳ chọn để tạo ảnh động cho đối tượng có thể vẽ.
Lựa chọn đầu tiên là sử dụng AnimationDrawable. Chiến dịch này
cho phép bạn chỉ định một số định dạng
tệp có thể vẽ hiển thị mỗi lần một để
tạo ảnh động. Lựa chọn thứ hai là sử dụng
AnimatedVectorDrawable cho phép bạn tạo ảnh động cho các thuộc tính
của vectơ vẽ được.
Sử dụng AnimationDrawable
Một cách để tạo ảnh động là tải một chuỗi các tài nguyên có thể vẽ, chẳng hạn như một cuộn phim.
Lớp AnimationDrawable
là cơ sở cho các loại ảnh động có thể vẽ này.
Bạn có thể xác định khung của ảnh động trong mã bằng cách sử dụng AnimationDrawable
class API, nhưng sẽ dễ dàng hơn nếu bạn xác định chúng bằng một tệp XML liệt kê các khung
tạo ảnh động. Tệp XML cho loại ảnh động này thuộc res/drawable/
của dự án Android. Trong trường hợp này, hướng dẫn sẽ cung cấp thứ tự và thời gian cho
từng khung hình trong ảnh động.
Tệp XML bao gồm phần tử <animation-list> làm nút gốc và một phần tử
một loạt nút <item> con mà mỗi nút xác định một khung — một tài nguyên có thể vẽ
và thời lượng của nó. Dưới đây là tệp XML mẫu cho ảnh động Drawable:
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="true"> <item android:drawable="@drawable/rocket_thrust1" android:duration="200" /> <item android:drawable="@drawable/rocket_thrust2" android:duration="200" /> <item android:drawable="@drawable/rocket_thrust3" android:duration="200" /> </animation-list>
Ảnh động này chạy trong 3 khung hình. Thiết lập android:oneshot
thuộc tính của danh sách cho true sẽ quay vòng một lần, sau đó dừng và giữ
trên khung cuối cùng. Nếu bạn đặt android:oneshot thành false,
vòng lặp ảnh động.
Nếu bạn lưu tệp XML này dưới dạng rocket_thrust.xml trong res/drawable/
thư mục của dự án, bạn có thể thêm thư mục này làm hình nền vào View rồi sau đó
gọi start() để bắt đầu phát. Dưới đây là ví dụ về một hoạt động trong đó ảnh động được thêm vào một
ImageView rồi tạo ảnh động
khi màn hình được chạm vào:
Kotlin
private lateinit var rocketAnimation: AnimationDrawable override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.main) val rocketImage = findViewById<ImageView>(R.id.rocket_image).apply { setBackgroundResource(R.drawable.rocket_thrust) rocketAnimation = background as AnimationDrawable } rocketImage.setOnClickListener({ rocketAnimation.start() }) }
Java
AnimationDrawable rocketAnimation; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image); rocketImage.setBackgroundResource(R.drawable.rocket_thrust); rocketAnimation = (AnimationDrawable) rocketImage.getBackground(); rocketImage.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { rocketAnimation.start(); } }); }
Điều quan trọng cần lưu ý là phương thức start() được gọi trên
Không thể gọi AnimationDrawable trong phương thức onCreate() của
Activity, vì AnimationDrawable chưa được đính kèm hoàn toàn vào
cửa sổ. Để phát ảnh động ngay lập tức mà không cần tương tác, bạn có thể gọi ảnh động từ
onStart()Activity, được gọi khi Android cho thấy thành phần hiển thị trên màn hình.
Để biết thêm thông tin về cú pháp XML cũng như các thẻ và thuộc tính có sẵn, hãy xem phần Tài nguyên ảnh động.
Sử dụng AnimatedVectorDrawable
Vectơ vẽ được
là một loại đối tượng có thể vẽ có thể mở rộng mà không bị vỡ ảnh hoặc bị mờ. Chiến lược phát hành đĩa đơn
AnimatedVectorDrawable
class — và
AnimatedVectorDrawableCompat để tương thích ngược, cho phép bạn tạo ảnh động cho
thuộc tính của một vectơ vẽ được, chẳng hạn như xoay hoặc thay đổi dữ liệu đường dẫn để biến nó thành một
hình ảnh khác.
Bạn thường xác định các vectơ vẽ được ở dạng động trong 3 tệp XML:
- Một vectơ vẽ được có phần tử
<vector>trongres/drawable/ - Một vectơ vẽ được ở dạng động có phần tử
<animated-vector>trongres/drawable/ - Một hoặc nhiều trình tạo ảnh động cho đối tượng có phần tử
<objectAnimator>trongres/animator/
Các vectơ vẽ được ở dạng ảnh động có thể tạo ảnh động cho các thuộc tính của <group> và
Phần tử <path>. Phần tử <group> xác định một tập hợp
đường dẫn hoặc nhóm con và phần tử <path> xác định đường dẫn cần vẽ.
Khi bạn xác định một vectơ vẽ được mà bạn muốn tạo ảnh động, hãy sử dụng android:name
để chỉ định tên duy nhất cho các nhóm và đường dẫn để bạn có thể tham chiếu đến chúng từ hoạ sĩ tạo hoạt hoạ của mình
định nghĩa. Ví dụ:
res/drawable/vectơdrawable.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="64dp" android:width="64dp" android:viewportHeight="600" android:viewportWidth="600"> <group android:name="rotationGroup" android:pivotX="300.0" android:pivotY="300.0" android:rotation="45.0" > <path android:name="v" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector>
Định nghĩa vectơ vẽ được ở dạng động đề cập đến các nhóm và đường dẫn trong vectơ vẽ được theo tên của họ:
res/drawable/animatorvectordrawable.xml
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vectordrawable" > <target android:name="rotationGroup" android:animation="@animator/rotation" /> <target android:name="v" android:animation="@animator/path_morph" /> </animated-vector>
Các định nghĩa ảnh động biểu thị
ObjectAnimator hoặc
Đối tượng AnimatorSet. Chiến lược phát hành đĩa đơn
trình tạo ảnh động đầu tiên trong ví dụ này xoay nhóm mục tiêu 360 độ:
res/animator/rotation.xml
<objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" />
Hoạ sĩ tạo ảnh động thứ hai trong ví dụ này biến đổi đường dẫn của vectơ vẽ được từ một hình dạng thành khác. Các đường dẫn phải tương thích để biến đổi: chúng phải có cùng số lệnh và cùng số lượng tham số cho mỗi lệnh.
res/animator/path_morph.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator android:duration="3000" android:propertyName="pathData" android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z" android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z" android:valueType="pathType" /> </set>
Sau đây là kết quả AnimatedVectorDrawable:
AnimatedVectorDrawable.Bản xem trước vectơ vẽ được ở dạng động (AVD)
Công cụ vectơ vẽ được ở dạng động trong Android Studio cho phép bạn xem trước các ảnh động
tài nguyên có thể vẽ. Công cụ này giúp bạn xem trước <animation-list>,
Các tài nguyên <animated-vector> và <animated-selector> trong
Android Studio và giúp bạn dễ dàng tinh chỉnh ảnh động tuỳ chỉnh.
Để biết thêm thông tin, hãy xem tài liệu tham khảo API cho
AnimatedVectorDrawable.