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

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

Hình 1 Đáp chuyển đổi bằng các phần tử được chia sẻ.

• Hiệu ứng chuyển đổi enter (nhập) xác định cách các thành phần hiển thị trong một hoạt động vào cảnh. Ví dụ: trong lệnh chuyển đổi enter (nhập) explode, khung cảnh từ bên ngoài và di chuyển vào trong trung tâm của màn hình.
• Hiệu ứng chuyển đổi thoát xác định cách các thành phần hiển thị trong một lần thoát của hoạt động cảnh đó. Ví dụ: trong quá trình chuyển đổi thoát khỏi explode, các khung hiển thị thoát cảnh ra khỏi trung tâm.
• Chuyển đổi các thành phần chung xác định cách các chế độ xem đượ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ì changeImageTransform hiệu ứng chuyển đổi thành phần dùng chung đ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 chuyển đổi vào và thoát sau:

• explode: di chuyển 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 từ một trong các cạnh của cảnh.
• fade: thêm hoặc xoá khung hiển thị khỏi cảnh bằng cách thay đổi độ mờ.

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

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

• changeBounds: tạo ảnh động cho các thay đổi trong giới hạn bố cục của mục tiêu lượt xem.
• changeClipBounds: tạo ảnh động cho những thay đổi về giới hạn đoạn video của mục tiêu lượt xem.
• changeTransform: tạo ảnh động cho các thay đổi về tỷ lệ và xoay số lượt xem mục tiêu.
• changeImageTransform: tạo ảnh động cho các thay đổi về kích thước và tỷ lệ 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 của mình, chế độ mờ dần mặc định hiệu ứng chuyển đổi sẽ kích hoạt giữa hoạt động vào và hoạt động thoát.

Hình 2. Hiệu ứng chuyển đổi 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ách sử dụng các phần tử dùng chung, hãy xem 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 trước đây, hãy kiểm tra hệ thống version trong thời gian chạy trước khi bạn gọi API cho bất kỳ tính năng nào trong số nà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 cảnh tuỳ chỉnh

Trước tiên, hãy bật hiệu ứng chuyển đổi nội dung cửa sổ bằng 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 vào, thoát và chuyển đổi thành phần dùng chung trong định nghĩa kiểu của bạn:

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

Hiệu ứng 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 API tài liệu tham khảo cho Transition.

Để bật tính năng chuyển đổi nội dung cửa sổ trong mã của bạn, hãy gọi phương thức 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 các hiệu ứng chuyển đổi trong mã của bạn, hãy gọi các hàm này bằng một Đối tượng Transition:

• Window.setEnterTransition()
• Window.setExitTransition()
• Window.setSharedElementEnterTransition()
• Window.setSharedElementExitTransition()

setExitTransition() và Các hàm setSharedElementExitTransition() xác định lối ra chuyển đổi cho hoạt động gọi. setEnterTransition() và Hàm setSharedElementEnterTransition() xác định giá trị nhập cho hoạt động được gọi.

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

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

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

Nếu bạn bật tính năng chuyển đổi và thiết lập chuyển đổi thoát cho một hoạt động, hiệu ứng chuyển đổi sẽ kích hoạt khi bạn khởi 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 hiệu ứng chuyển đổi enter cho hoạt động thứ hai, hiệu ứng chuyển đổi đó cũng 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 hoạt động khác, hãy cung cấp gói tuỳ chọn null.

Bắt đầu hoạt động bằng một phần tử dùng chung

Để 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.
2. Chỉ định hiệu ứng chuyển đổi cho các phần tử dùng chung theo kiểu của bạn.
3. Xác định hiệu ứng chuyển đổi dưới dạng một tài nguyên XML.
4. Gán một 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. Sử 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 chế độ xem động được chia sẻ mà bạn tạo trong mã của mình, hãy sử dụng Hàm View.setTransitionName() để chỉ định một tên phần tử chung 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 phương thức Activity.finishAfterTransition() thay cho Activity.finish().

Bắt đầu một hoạt động có nhiều thành phần dùng chung

Để tạo ảnh động chuyển đổi cảnh giữa hai hoạt động có nhiều nhiều phần tử dùng chung, hãy xác định các phần tử dùng chung 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 một ActivityOptions đối tượng 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"));