Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Tạo ảnh động cho đồ hoạ đối tượng có thể vẽ

Hình 1. Một đối tượng có thể vẽ ở dạng động.

Trong một số trường hợp, hình ảnh cần phải có ảnh động. Điều này sẽ hữu ích nếu bạn muốn hiển thị một ảnh động tải tuỳ chỉnh bao gồm nhiều hình ảnh hoặc nếu bạn muốn một biểu tượng biến đổi sau hành động của người dùng. Android cung cấp hai lựa chọn để tạo hiệu ứng cho các thành phần có thể vẽ.

Cách đầu tiên là sử dụng AnimationDrawable. Thao tác này cho phép bạn chỉ định một số tệp tĩnh có thể vẽ hiển thị từng tệp mộ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 một drawable vector.

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 các loại ảnh động có thể vẽ này.

Bạn có thể xác định các khung hình của một ả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 hình đó bằng một tệp XML duy nhất liệt kê các khung hình tạo nên ảnh động. Tệp XML cho loại ảnh động này nằm trong thư mục res/drawable/ của dự án Android. Trong trường hợp này, các chỉ dẫn sẽ cho biết thứ tự và thời lượng của từng khung hình 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 hình – một tài nguyên drawable và thời lượng của tài nguyên đó. Sau đây là tệp XML mẫu cho một ả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. Đặt thuộc tính android:oneshot của danh sách thành true để danh sách lặp lại một lần rồi dừng và giữ ở khung hình cuối cùng. Nếu bạn đặt android:oneshot thành false, thì ả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 XML này làm hình nền cho View rồi 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 một ImageView rồi được 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 AnimationDrawable không thể được gọi trong phương thức onCreate() của Activity, vì AnimationDrawable chưa được gắn 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ừ phương thức onStart() trong Activity. Phương thức này được gọi khi Android hiển thị khung 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ị vỡ hình hoặc mờ. Lớp AnimatedVectorDrawable (và AnimatedVectorDrawableCompat để đảm bảo khả năng tương thích ngược) cho phép bạn tạo hiệu ứng động cho các 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 đổi thành một hình ảnh khác.

Thông thường, bạn sẽ xác định các đối tượng vectơ vẽ được ở dạng động trong 3 tệp XML:

Một vectơ có thể vẽ được có phần tử <vector> trong res/drawable/.
Một drawable vector ở dạng động có phần tử <animated-vector> trong res/drawable/.
Một hoặc nhiều trình tạo ảnh động đối tượng có phần tử <objectAnimator> trong res/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 sẽ được vẽ.

Khi bạn xác định một drawable vector mà bạn muốn tạo hiệu ứng động, hãy dùng thuộc tính android:name để chỉ định một tên riêng biệt cho các nhóm và đường dẫn, nhờ đó bạn có thể tham chiếu đến các nhóm và đường dẫn đó từ định nghĩa của trình tạo hiệu ứng độ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 drawable vector có hiệu ứng động đề cập đến các nhóm và đường dẫn trong drawable vector theo tên của chúng:

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 về ảnh động đại diện cho các đối tượng ObjectAnimator hoặc AnimatorSet. Trình tạo hiệu ứng động đầu tiên trong ví dụ này xoay nhóm mục tiêu 360 độ:

res/animator/rotation.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
  <objectAnimator
      android:duration="6000"
      android:propertyName="rotation"
      android:valueFrom="0"
      android:valueTo="360" />
</set>

Trình tạo ảnh động thứ hai trong ví dụ này sẽ 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 đổi hình dạng: chúng phải có cùng số lượng 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 kết quả:

Hình 2. 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 giú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.

Người dùng xem trước và phát ảnh động trong Android Studio

Hình 3. Công cụ Animated Vector Drawable (Vectơ vẽ được ở dạng động) trong Android Studio.

Để biết thêm thông tin, hãy xem tài liệu tham khảo API cho AnimatedVectorDrawable.

Tạo ảnh động cho đồ hoạ đối tượng có thể vẽ Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.