Ví dụ về MotionLayout

Thử cách Compose
Jetpack Compose là bộ công cụ giao diện người dùng được đề xuất cho Android. Tìm hiểu cách sử dụng ảnh động trong Compose.
Ảnh động trong Compose →

Tài liệu này chứa các ví dụ về cách sử dụng MotionLayout. Mỗi ví dụ đều có một video minh hoạ chuyển động, cùng với mã tương ứng cho cảnh chuyển động và bố cục.

Chuyển động cơ bản

Ví dụ này chứa một khung hiển thị duy nhất mà bạn có thể chạm và kéo để di chuyển theo chiều ngang.

Hình 1. Kéo một khung hiển thị.

Thuộc tính tuỳ chỉnh – backgroundColor

Ví dụ này tương tự như ví dụ Chuyển động cơ bản. Ngoài chuyển động cơ bản, màu nền của khung hiển thị cũng thay đổi khi khung hiển thị di chuyển.

Hình 2. Kéo một khung hiển thị trong khi màu nền của khung hiển thị đó thay đổi.

ImageFilterView – hiệu ứng chuyển đổi hình ảnh

Ví dụ này cho thấy cách chuyển đổi giá trị độ bão hoà của một ImageFilterView.

Hình 3. Kéo một hình ảnh trong khi độ rực màu của hình ảnh đó thay đổi.

Vị trí khung hình chính

Ví dụ này sử dụng <KeyFrameSet> để thay đổi vị trí Y của khung hiển thị trong khi chuyển động.

Hình 4. Kéo một khung hiển thị và thay đổi vị trí Y của khung hiển thị đó.

Nội suy khung hình chính

Ví dụ này dựa trên ví dụ về Vị trí khung hình chính, thêm hiệu ứng xoay và thu phóng vào hiệu ứng chuyển đổi khung hiển thị.

Hình 5. Kéo một khung hiển thị và thay đổi vị trí Y, độ xoay và tỷ lệ của khung hiển thị đó.

Chu kỳ khung hình chính

Ví dụ này thêm các phần tử <KeyCycle> để thêm chuyển động giống như sóng vào khung hiển thị.

Hình 6. Kéo một khung hiển thị bằng chuyển động giống như sóng trong khi thay đổi màu sắc của khung hiển thị đó.

CoordinatorLayout (1/2)

Ví dụ này thêm một MotionLayout vào AppBarLayout hiện có để thêm chuyển động vào thanh ứng dụng. Ví dụ này được mô tả thêm trong phần Giới thiệu về MotionLayout (phần III).

Hình 7. Nội dung cuộn trong khi thanh ứng dụng mở rộng.

CoordinatorLayout (2/2)

Ví dụ này thêm một MotionLayout vào AppBarLayout hiện có để thêm chuyển động vào thanh ứng dụng.

Hình 8. Nội dung cuộn trong khi thanh ứng dụng mở rộng và văn bản chuyển động vào và ra khỏi thanh ứng dụng.

DrawerLayout (1/2)

Ví dụ này cho thấy cách thêm chuyển động vào một DrawerLayout. Ví dụ này được mô tả thêm trong bài viết Giới thiệu về MotionLayout (phần III).

Hình 9. Mở rộng `DrawerLayout`.

DrawerLayout (2/2)

Ví dụ này cho thấy cách thêm chuyển động vào một DrawerLayout.

Hình 10. Mở rộng `DrawerLayout` bằng văn bản trình đơn có ảnh động.

Bảng điều khiển bên

Ví dụ này cho thấy cách hiển thị một bảng điều khiển bên khi kéo vùng nội dung chính sang phải.

Hình 11. Hiện bảng điều khiển bên bằng cách kéo nội dung chính.

Thị sai

Ví dụ này minh hoạ một nền thị sai, trong đó các lớp nền khác nhau di chuyển ở các tốc độ khác nhau.

Hình 12. Hiệu ứng thị sai trong hình ảnh tiêu đề.

ViewPager

Ví dụ này cho thấy cách bạn có thể thêm chuyển động khi vuốt giữa các thẻ ViewPager. Ví dụ này được mô tả thêm trong phần Giới thiệu về MotionLayout (phần III).

Hình 13. Hiệu ứng thị sai trong hình ảnh tiêu đề trong khi vuốt một `ViewPager`.

ViewPager – Lottie

Ví dụ này cho thấy cách bạn có thể thêm chuyển động khi vuốt giữa các thẻ ViewPager.

Hình 14. Hình ảnh cho thấy hiệu ứng Lottie trong hình ảnh tiêu đề khi vuốt một `ViewPager`.

Chuyển động phức tạp (1/3)

Ví dụ này kết hợp các phần tử trong các ví dụ trước để minh hoạ chuyển động phức tạp.

Hình 15. Kết hợp các hiệu ứng để tạo chuyển động phức tạp.

Chuyển động phức tạp (2/3)

Ví dụ này kết hợp các phần tử trong các ví dụ trước để minh hoạ chuyển động phức tạp.

Hình 16. Kết hợp các hiệu ứng để tạo chuyển động phức tạp.

Chuyển động phức tạp (3/3)

Ví dụ này kết hợp các phần tử trong các ví dụ trước để minh hoạ chuyển động phức tạp.

Hình 17. Kết hợp các hiệu ứng để tạo chuyển động phức tạp.

Chuyển đổi mảnh (1/2)

Ví dụ này cho thấy cách bạn có thể dùng MotionLayout để chuyển đổi giữa các mảnh.

Hình 18. Chuyển đổi phân đoạn.

Chuyển đổi mảnh (2/2)

Ví dụ này cho thấy cách bạn có thể dùng MotionLayout để chuyển đổi giữa các mảnh.

Hình 19. Chuyển đổi phân đoạn.

Chuyển động giống như trên YouTube

Ví dụ này minh hoạ quá trình chuyển đổi giữa chế độ xem thu gọn và chế độ toàn màn hình với nội dung bổ sung.

Hình 20. Quá trình chuyển cảnh mảnh tương tự như YouTube.

KeyTrigger

Ví dụ này minh hoạ cách hiện và ẩn nút hành động nổi khi hiệu ứng chuyển đổi vượt qua một ngưỡng tiến trình.

Hình 21. Hiện và ẩn nút hành động nổi.

Nhiều tiểu bang

Ví dụ này cho thấy cách sử dụng trạng thái để xác định chuyển động cần áp dụng.

Hình 22. Các chuyển động khác nhau tuỳ theo trạng thái.