Trong một số trường hợp, hình ảnh cần phải là hình động. Điều này sẽ hữu ích nếu bạn muốn hiển thị ảnh động tải tuỳ chỉnh bao gồm một số hình ảnh hoặc nếu bạn muốn biểu tượng biến đổi sau hành động của người dùng. Android cung cấp 2 tuỳ chọn để tạo ảnh động cho đối tượng có thể vẽ.
Cách đầu tiên là sử dụng AnimationDrawable. Điều này cho phép bạn chỉ định một số tệp có thể vẽ tĩnh hiển thị lần lượt để tạo ảnh động. Lựa chọn thứ hai là sử dụng AnimatedVectorDrawable. Lựa chọn này cho phép bạn tạo ảnh động cho các thuộc tính của vectơ có thể vẽ.
Sử dụng AnimationDrawable
Một cách để tạo ảnh động là tải một chuỗi tài nguyên có thể vẽ, chẳng hạn như một cuộn phim.
Lớp AnimationDrawable là cơ sở cho những loại ảnh động có thể vẽ này.
Bạn có thể xác định các khung của ảnh động trong mã bằng cách sử dụng API lớp AnimationDrawable, nhưng sẽ dễ dàng hơn nếu xác định các khung đó bằng một tệp XML duy nhất liệt kê các khung tạo nên ảnh động. Tệp XML cho loại ảnh động này thuộc thư mụ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 lượng cho mỗi khung trong ảnh động.
Tệp XML bao gồm một phần tử <animation-list> làm nút gốc và một loạt các nút <item> con, 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 khung đó. 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. Việc đặt thuộc tính android:oneshot của danh sách thành true sẽ giúp danh sách này lặp lại một lần, sau đó dừng và giữ ở khung cuối cùng. Nếu bạn đặt android:oneshot thành false, ảnh động sẽ lặp lại.
Nếu lưu XML này dưới dạng rocket_thrust.xml trong thư mục res/drawable/ của dự án, bạn có thể thêm tệp này làm hình nền vào View, sau đó gọi start() để phát. Dưới đây là ví dụ về một hoạt động trong đó ảnh động được thêm vào ImageView, sau đó ảnh động sẽ xuất hiện 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à bạn không thể gọi phương thức start() được gọi trên AnimationDrawable trong phương thức onCreate() của Activity, vì AnimationDrawable chưa được đính kèm đầy đủ 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ừ phương thức onStart()Activity. Phương thức này được gọi khi Android hiển thị 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ơ có thể vẽ là một loại đối tượng có thể vẽ có thể mở rộng mà không bị mờ hoặc bị vỡ. Lớp
AnimatedVectorDrawable và
AnimatedVectorDrawableCompat để tương thích ngược – cho phép bạn tạo ảnh động cho các thuộc tính của 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 vectơ vẽ được dạng ảnh động trong ba tệp XML:
- Một vectơ có thể vẽ được với phần tử
<vector>trongres/drawable/. - Một vectơ ảnh động có thể vẽ với phần tử
<animated-vector>trongres/drawable/. - Một hoặc nhiều trình tạo ảnh động đối tượng có phần tử
<objectAnimator>trongres/animator/.
Vectơ ảnh động có thể vẽ có thể tạo ảnh động cho các thuộc tính của phần tử <group> và <path>. Phần tử <group> xác định một tập hợp các đường dẫn hoặc nhóm con, còn phần tử <path> xác định các đườ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 thuộc tính android:name
để gán tên riêng biệt cho các nhóm và đường dẫn, nhờ đó, bạn có thể tham chiếu đến chúng từ định nghĩa
trình tạo ảnh động. Ví dụ:
res/drawable/vectordrawable.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 động tham chiếu đến các nhóm và đường dẫn trong vectơ vẽ được theo tên của các nhóm và đường dẫn đó:
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 đại diện cho đối tượng ObjectAnimator hoặc AnimatorSet. Ả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" />
Trình tạo ảnh động thứ hai trong ví dụ này biến đổi đường dẫn của vectơ vẽ được từ hình dạng này sang hình dạng khác. Các đường dẫn phải tương thích để biến hình: 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à AnimatedVectorDrawable thu được:
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 tài nguyên có thể vẽ ở dạng động. Công cụ này giúp bạn xem trước tài nguyên <animation-list>, <animated-vector> và <animated-selector> trong Android Studio, đồng thời giúp bạn tinh chỉnh ảnh động tuỳ chỉnh của mình dễ dàng hơn.
Để biết thêm thông tin, hãy xem tài liệu tham khảo API cho AnimatedVectorDrawable.