Ví dụ về MotionLayout

Thử cách dùng 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 thành phần hiển thị mà bạn có thể chạm và kéo để di chuyển theo chiều ngang.

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

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

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

Hình 2. Kéo một thành phần hiển thị trong khi màu nền của thành phần đó 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 ImageFilterView.

Hình 3. Kéo một hình ảnh trong khi độ bão hoà 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 thành phần hiển thị trong khi chuyển động.

Hình 4. Kéo một thành phần hiển thị và thay đổi vị trí Y của thành phần 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 tính năng xoay và điều chỉnh theo tỷ lệ vào quá trình chuyển đổi chế độ xem.

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

Vòng lặp khung hình chính

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

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

CoordinatorLayout (1/2)

Ví dụ này thêm 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. Cuộn nội dung trong khi thanh ứng dụng mở rộng.

CoordinatorLayout (2/2)

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

Hình 8. Cuộn nội dung trong khi thanh ứng dụng mở rộng và văn bản tạo hiệu ứng ảnh độ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 DrawerLayout. Ví dụ này được mô tả thêm trong phần 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 DrawerLayout.

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

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

Ví dụ này cho thấy cách hiển thị 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 thị 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 có hiệu ứng thị sai, trong đó các lớp nền di chuyển với 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 đề khi vuố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 "ViewPager".

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

Ví dụ này kết hợp các phần tử từ 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ử từ 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ử từ 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ể sử dụng MotionLayout để chuyển đổi giữa các mảnh.

Hình 18. Chuyển đổi mảnh.

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

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

Hình 19. Chuyển đổi mảnh.

Ảnh độ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à trải nghiệm toàn màn hình với nội dung bổ sung.

Hình 20. Hiệu ứng chuyển đổi mảnh tương tự như trên YouTube.

KeyTrigger

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

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

Nhiều trạng thái

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 dựa trên trạng thái.