Bắt đầu một hoạt động bằng ảnh động

Hiệu ứng chuyển đổi hoạt động trong các ứng dụng Material Design tạo ra sự kết nối hình ảnh giữa các trạng thái thông qua chuyển động và chuyển đổi giữa các thành phần phổ biến. Bạn có thể chỉ định ảnh động tuỳ chỉnh cho hiệu ứng chuyển đổi vào và ra, cũng như chuyển đổi của các phần tử dùng chung giữa các hoạt động.

Hình 1 Hiệu ứng chuyển đổi với các phần tử dùng chung.

  • Chuyển đổi Enter (nhập) xác định cách các khung hiển thị trong một hoạt động truy cập vào cảnh đó. Ví dụ: trong chuyển đổi explode, các khung hiển thị đi vào cảnh từ bên ngoài và di chuyển vào giữa màn hình.
  • Chuyển đổi thoát xác định cách khung hiển thị trong một hoạt động thoát khỏi cảnh. Ví dụ: trong quá trình chuyển đổi thoát explode, các khung hiển thị sẽ thoát khỏi cảnh khỏi trung tâm.
  • Chuyển đổi các phần tử dùng chung xác định cách các thành phần hiển thị được chia sẻ giữa hai hoạt động chuyển đổi giữa các hoạt động này. Ví dụ: nếu hai hoạt động có cùng một hình ảnh ở các vị trí và kích thước khác nhau, thì việc chuyển đổi phần tử dùng chung changeImageTransform sẽ chuyển đổi và điều chỉnh tỷ lệ hình ảnh một cách mượt mà giữa các hoạt động này.

Android hỗ trợ các hiệu ứng chuyển đổi nhập và thoát sau:

  • explode: di chuyển các khung hiển thị vào trong hoặc ra khỏi trung tâm của cảnh.
  • slide: di chuyển khung hiển thị vào hoặc ra khỏi một trong các cạnh của cảnh.
  • fade: thêm hoặc xoá một khung hiển thị khỏi cảnh bằng cách thay đổi độ mờ của khung hiển thị đó.

Mọi quá trình chuyển đổi mở rộng lớp Visibility đều được hỗ trợ dưới dạng quá trình chuyển đổi nhập hoặc thoát. Để biết thêm thông tin, hãy xem tài liệu tham khảo API cho lớp Transition.

Android cũng hỗ trợ các chuyển đổi thành phần dùng chung sau đây:

  • changeBounds: tạo ảnh động cho các thay đổi trong ranh giới bố cục của khung hiển thị mục tiêu.
  • changeClipBounds: tạo ảnh động cho các thay đổi trong ranh giới cắt của khung hiển thị mục tiêu.
  • changeTransform: tạo ảnh động cho những thay đổi về tỷ lệ và xoay của khung hiển thị mục tiêu.
  • changeImageTransform: tạo ảnh động cho các thay đổi về kích thước và tỷ lệ của hình ảnh mục tiêu.

Khi bạn bật tính năng chuyển đổi hoạt động trong ứng dụng, hiệu ứng chuyển đổi mờ dần theo mặc định sẽ kích hoạt giữa các hoạt động vào và thoát.

Hình 2. Hiệu ứng chuyển cảnh có một phần tử dùng chung.

Để xem mã mẫu tạo ảnh động giữa các hoạt động bằng các thành phần được chia sẻ, hãy xem phần ActivitySceneTransitionBasic.

Kiểm tra phiên bản hệ thống

API chuyển đổi hoạt động có trên Android 5.0 (API 21) trở lên. Để duy trì khả năng tương thích với các phiên bản Android cũ, hãy kiểm tra version của hệ thống trong thời gian chạy trước khi bạn gọi API cho bất kỳ tính năng nào sau đây:

Kotlin

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

Java

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

Chỉ định hiệu ứng chuyển đổi tuỳ chỉnh

Trước tiên, hãy bật tính năng chuyển đổi nội dung cửa sổ bằng thuộc tính android:windowActivityTransitions khi bạn xác định một kiểu kế thừa từ giao diện Material. Bạn cũng có thể chỉ định các chuyển đổi phần tử vào, thoát và dùng chung trong định nghĩa kiểu:

<style name="BaseAppTheme" parent="android:Theme.Material">
  <!-- enable window content transitions -->
  <item name="android:windowActivityTransitions">true</item>

  <!-- specify enter and exit transitions -->
  <item name="android:windowEnterTransition">@transition/explode</item>
  <item name="android:windowExitTransition">@transition/explode</item>

  <!-- specify shared element transitions -->
  <item name="android:windowSharedElementEnterTransition">
    @transition/change_image_transform</item>
  <item name="android:windowSharedElementExitTransition">
    @transition/change_image_transform</item>
</style>

Chuyển đổi change_image_transform trong ví dụ này được định nghĩa như sau:

<!-- res/transition/change_image_transform.xml -->
<!-- (see also Shared Transitions below) -->
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
  <changeImageTransform/>
</transitionSet>

Phần tử changeImageTransform tương ứng với lớp ChangeImageTransform. Để biết thêm thông tin, hãy xem tài liệu tham khảo API cho Transition.

Thay vào đó, để bật tính năng chuyển đổi nội dung cửa sổ trong mã, hãy gọi hàm Window.requestFeature():

Kotlin

// Inside your activity (if you did not enable transitions in your theme)
with(window) {
    requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)

    // Set an exit transition
    exitTransition = Explode()
}

Java

// Inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);

// Set an exit transition
getWindow().setExitTransition(new Explode());

Để chỉ định hiệu ứng chuyển đổi trong mã, hãy gọi các hàm này bằng đối tượng Transition:

Hàm setExitTransition() và setSharedElementExitTransition() xác định hiệu ứng chuyển đổi thoát cho hoạt động gọi. Hàm setEnterTransition() và setSharedElementEnterTransition() xác định hiệu ứng chuyển đổi nhập cho hoạt động được gọi.

Để có được hiệu ứng đầy đủ của quá trình chuyển đổi, bạn phải bật hiệu ứng chuyển đổi nội dung cửa sổ cho cả các hoạt động gọi và được gọi. Nếu không, hoạt động gọi sẽ bắt đầu chuyển đổi thoát, nhưng sau đó bạn sẽ thấy các chuyển đổi cửa sổ (như điều chỉnh tỷ lệ hoặc làm mờ).

Để bắt đầu chuyển đổi Enter sớm nhất có thể, hãy sử dụng hàm Window.setAllowEnterTransitionOverlap() trên hoạt động được gọi. Điều này cho phép bạn có những hiệu ứng chuyển cảnh nhấn mạnh hơn.

Bắt đầu một hoạt động bằng hiệu ứng chuyển đổi

Nếu bạn bật hiệu ứng chuyển đổi và đặt hiệu ứng chuyển đổi thoát cho một hoạt động, thì hiệu ứng chuyển đổi đó sẽ kích hoạt khi bạn chạy một hoạt động khác, như sau:

Kotlin

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle())

Java

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

Nếu bạn đặt một hiệu ứng chuyển đổi Enter cho hoạt động thứ hai, thì quá trình chuyển đổi đó cũng sẽ kích hoạt khi hoạt động bắt đầu. Để tắt hiệu ứng chuyển đổi khi bạn bắt đầu một hoạt động khác, hãy cung cấp một gói tuỳ chọn null.

Bắt đầu hoạt động có phần tử được chia sẻ

Để tạo ảnh động chuyển đổi màn hình giữa hai hoạt động có phần tử dùng chung, hãy làm như sau:

  1. Bật hiệu ứng chuyển đổi nội dung cửa sổ trong giao diện của bạn.
  2. Chỉ định chuyển đổi các thành phần dùng chung trong kiểu của bạn.
  3. Xác định chuyển đổi dưới dạng một tài nguyên XML.
  4. Gán tên chung cho các phần tử dùng chung trong cả hai bố cục bằng thuộc tính android:transitionName.
  5. Dùng hàm ActivityOptions.makeSceneTransitionAnimation().

Kotlin

// Get the element that receives the click event
val imgContainerView = findViewById<View>(R.id.img_container)

// Get the common element for the transition in this activity
val androidRobotView = findViewById<View>(R.id.image_small)

// Define a click listener
imgContainerView.setOnClickListener( {
    val intent = Intent(this, Activity2::class.java)
    // Create the transition animation - the images in the layouts
    // of both activities are defined with android:transitionName="robot"
    val options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot")
    // Start the new activity
    startActivity(intent, options.toBundle())
})

Java

// Get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);

// Get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);

// Define a click listener
imgContainerView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Intent intent = new Intent(this, Activity2.class);
        // Create the transition animation - the images in the layouts
        // of both activities are defined with android:transitionName="robot"
        ActivityOptions options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot");
        // Start the new activity
        startActivity(intent, options.toBundle());
    }
});

Đối với các khung hiển thị động dùng chung mà bạn tạo trong mã, hãy sử dụng hàm View.setTransitionName() để chỉ định tên phần tử phổ biến trong cả hai hoạt động.

Để đảo ngược ảnh động chuyển đổi cảnh khi bạn kết thúc hoạt động thứ hai, hãy gọi hàm Activity.finishAfterTransition() thay vì Activity.finish().

Bắt đầu một hoạt động với nhiều phần tử dùng chung

Để tạo ảnh động chuyển đổi cảnh giữa hai hoạt động có nhiều phần tử dùng chung, hãy xác định các phần tử được chia sẻ trong cả hai bố cục bằng thuộc tính android:transitionName hoặc sử dụng hàm View.setTransitionName() trong cả hai hoạt động và tạo đối tượng ActivityOptions như sau:

Kotlin

// Rename the Pair class from the Android framework to avoid a name clash
import android.util.Pair as UtilPair
...
val options = ActivityOptions.makeSceneTransitionAnimation(this,
        UtilPair.create(view1, "agreedName1"),
        UtilPair.create(view2, "agreedName2"))

Java

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));